首页 > 其他分享> 文章详细

css样式

2021-11-23 20:01:42 阅读：165 来源： 互联网

标签：样式 text color nbsp background font 选择器 css

# 1.CSS样式种类

## 1.1行内样式<标签内部添加属性>

代码分析：<div style="color:yellow;bcakground:yellow;">我和我的祖国<div/>

<body style="green"><body/>//页面背景颜色的填充

## 1.2内部样式<整个页面的内部>

格式分析：<style type="text/css">

标签{

属性 }

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

body{

background-color: burlywood;

}

div{

color: chocolate;

background-color: cyan;

}

</style>

</head>

<body>

<div>我和我的祖国</div>>

</body>

</html>

## 1.3外部样式

解析：链接CSS文件

## 1.4总结：三种样式优先级

```

优先级：行内样式>内部样式>外部样式

```

# 2.选择器

## 2.1基本选择器

### 2.11标签选择器

代码解析：

div{

color:blue;

}

</style>

### 2.1.2类选择器

```

.<!DOCTYPE html>

<head>

<title>Document</title>

.there{

color: cyan;

}

</style>

</head>

<body>

</body>

</html>

```

### 2.1.3ID选择器

```

.there{

color: cyan;

}

#one{

background-color: cyan;

}

#two{

background-color: darkblue;

}

</style>

</head>

<body>

</body>

</html>

```

### 2.1.4总结：三种基本选择器优先级

```

优先级：ID选择器>类选择器>标签选择器

```

## 2.2高级选择器

### 2.2.1层次选择器

```

后代选择器E F

代码分析：

body p{

background-color: darkblue;

}

</style>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

</ul>

</body>

</html>

子选择器E>F

body>p{

background-color: darkblue;

}

</style>

相邻选择器E+F

代码分析：

p+span{

background-color: darkblue;

}

</style>

//有效果的是+后面的

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

</ul>

</body>

</html>

通用兄弟选择器E~F

代码分析：

p~ul{

background-color: darkblue;

}

</style>

//只显示兄弟，也就是~后面的，其本身不显示，也就是~前面的

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

</ul>

</body>

</html>

```

### 2.2.2结构伪类选择器<同类型中的第（n）个元素>

```

代码分析：

p:nth-of-type(3){

background-color: darkblue;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

```

### 2.2.3属性选择器

```

代码分析：

[class]{//【】里面的是属性

background-color: darkcyan;

}

</style>

</head>

<body>

<p class="asdfg">asdfg</p>

<p class="azxwf">azxwf</p>

<p title="avrhy">avrhy</p>

</body>

</html>

代码分析（绝对定位）

[class="a"]{ //参照 class="a"来写的

background-color: darkcyan;

}

</style>

</head>

<body>

<p class="a">asdfg</p>

<p class="azxwf">azxwf</p>

<p title="avrhy">avrhy</p>

</body>

</html>

^代表以xxx为开头的：【属性^="类引号里面元素值中的n个字母"】

[class^="a"]{

background-color: darkcyan;

}

</style>

</head>

<body>

<p class="asdfg">asdfg</p>

<p class="azxwf">azxwf</p>

<p title="avrhy">avrhy</p>

</body>

</html>

$代表的是以xxx为结尾的（类后面的引号中的元素值）

[class$="f"]{

background-color: darkcyan;

}

</style>

</head>

<body>

<p class="asdff">asdff</p>

<p class="azxwf">azxwf</p>

<p title="avrhy">avrhy</p>

</body>

</html>

```

# 3.CSS实战

## 1.文本常用标签

### 1.1<span>标签（凸显文本）

```

代码分析：<把内容放在span标签里，然后用内部样式渲染>

<!DOCTYPE html>

<head>

<title>Document</title>

span{

background-color: darkgreen;

}

</style>

</head>

<body>

床前明月光<span>(2)</span>，疑是地上霜⑶。

举头望明月⑷，低头思故乡。

</body>

</html>

```

### 1.2font属性

```

风格>粗细>大小>类型

风格：font-style属性

粗细：font-weight属性

大小：font-size属性

类型：font-family属性

font:风格粗细大小类型（和上面的等价）

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

body{

/* font-style: italic;

font-size: 10px;

font-weight: bold;

font-family: '宋体'; */

font: italic bold 30px"宋体";

}

</style>

</head>

<body>

床前明月光<span>(2)</span>，疑是地上霜⑶。

举头望明月⑷，低头思故乡。

</body>

</html>

```

### 1.3文本属性

```

文本颜色 color:rgba()函数

代码分析：

body{

/* color: #c52e32; */ //颜色

color: rgb(46, 51, 152);//rgb调色

}

</style>

</head>

<body>

床前明月光<span>(2)</span>，疑是地上霜⑶。

举头望明月⑷，低头思故乡。

</body>

</html>

代码分析：rgba（）函数

<!DOCTYPE html>

<head>

<title>Document</title>

body{

/* color: #c52e32;

color: rgb(46, 51, 152); */

color: rgba(100, 100, 100, 0.5)//最后位的参数代表的是字体的透明度

}

</style>

</head>

<body>

床前明月光<span>(2)</span>，疑是地上霜⑶。

举头望明月⑷，低头思故乡。

</body>

</html>

文本对齐 text-align:center/left/right

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

body{

text-align: center;

}

h1{

text-align: center;

}

</style>

</head>

<body>

床前明月光<span>(2)</span>，疑是地上霜⑶。

举头望明月⑷，低头思故乡。

</body>

</html>

文本装饰 text-decoration:

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

h1{

text-decoration: overline;

}

h2{

text-decoration: line-through;

}

h3{

text-decoration: underline;

}

h4{

text-decoration: blink;

}

h5{

text-decoration: none;

}

</style>

</head>

<body>

<h1>JAVA实战</h1>

<h2>CSS盒子</h2>

<h3>python实战</h3>

<h4>c语言程序</h4>

<h5>JAVA该机API</h5>

</body>

</html>

文本阴影 text-shadow:阴影横向偏移量阴影纵向偏移量模糊度颜色（负号代表反方向）

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

div{

font-size: 100px;

text-shadow: 10px 10px 10px blanchedalmond;

}

</style>

</head>

<body>

<div>文本影子的效果</div>

</body>

</html>

垂直对齐（图片和文字）vertical-align

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

img,span{

vertical-align: middle;

}

</style>

</head>

<body>

<p>

</p>

</body>

</html>

```

## 2.伪类超链接

```

标签名：hover

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

a:hover{

text-decoration: none;

}

</style>

</head>

<body>

</body>

</html>

```

## 3.列表属性

```

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

</style>

</head>

<body>

<style>

ul li {

height: 30px;

line-height: 25px;

text-indent: 1em;/*首行文本的缩进*/

}

</style>

<!DOCTYPE html>

<html>

</head>

<body>

<h2 class="title">全部商品分类</h2>

<ul>

</li>

</ul>

</body>

</html>

</body>

</html>

```

## 4.背景样式

```

背景颜色背景图像背景定位

代码分析：

<style>

#nav {

width:230px;

background-color:#D7D7D7;

}

.title {

background-color:#C00;

font-size:18px;

font-weight:bold;

color:#FFF;

text-indent:1em;

line-height:35px;

}

#nav ul li {

height:30px;

line-height:25px;

list-style: none;

}

</style>

<!DOCTYPE html>

<html>

</head>

<body>

<div class="title">全部商品分类</div>

<ul>

</ul>

</div>

</body>

代码分析：

<!DOCTYPE html>

<head>

<title>Document</title>

</style>

</head>

<body>

<style>

#nav {

width:230px;

background-color:#D7D7D7;

}

.title { //背景颜色背景图像背景定位

background: #C00 url(img/arrow-down.gif) 205px 10px no-repeat;

}

#nav ul li { //背景颜色背景图像背景定位

background: url(img/arrow-right.gif) 170px 2px no-repeat;

}

</style>

<!DOCTYPE html>

<html>

</head>

<body>

<div class="title">全部商品分类</div>

<ul>

</ul>

</div>

</body>

</html>

```

a:link：没有访问超链接时文本样式

a:visited单击访问后超链接的样式

a：hover鼠标悬停在文字上面的样式

a：active表示点击超链接的那一刻的样式

速记：有人给你买lv你就ha大笑

鼠标类型：defult默认光标 puinterc 超链接的指示 wait等待的效果 crossshair呈现十字架

语法：cuisoe：pointer超链接的指针

标签：样式,text,color,nbsp,background,font,选择器,css
来源： https://blog.csdn.net/m0_64374353/article/details/121500964

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css样式

鼠标类型：defult默认光标 puinterc 超链接的指示 wait等待的效果 crossshair呈现十字架