一、CSS选择器
1.基础选择器
· 标签选择器
标签选择器：用标签名做选择器，可以把某一类标签全部选出来。
<html>
<head>
<style>
p {
color: pink;
}
div {
color: red;
}
</style>
</head>
<body>
<p>这是一段文字</p>
<p>这是另一段文字</P>
<div>你好</div>
<div>早上好</div>
</body>
</html>
效果图：
优点：能快速为页面中同类型的标签统一设置样式。
缺点：不能设计差异化样式，相同标签的样式是一样的。
· 类选择器
类选择器：用class类名选出一个或者几个标签。
<html>
<head>
<style>
.pink {
color: pink;
}
.font-35 {
font-size: 35px;
}
</style>
</head>
<body>
<p class="pink">这是一段文字</p>
<p class="pink font-35">这是另一段文字</P>
<div class="pink font-35">你好</div>
<!--class中可以写多个类名，但是类名之间要有空格-->
<!--复合词构成的类名，可以在复合的词之间加上“-”将两个词连起来-->
<!--一个类名可以给多个标签使用-->
</body>
</html>
效果图：
· id选择器
id选择器：用#定义做选择器，一个id只能一个标签使用。
<html>
<head>
<style>
#pink {
color: pink;
}
#font {
font-size: 35px;
}
</style>
</head>
<body>
<p id="pink">这是一段文字</p>
<p id="font">这是另一段文字</P>
<!--一个id名只能一个标签使用-->
</body>
</html>
效果图：
· 通配符选择器
通配符选择器：用*做选择器，选取页面中的所有元素。
<html>
<head>
<style>
* {
color: pink;
font-size: 35px;
}
</style>
</head>
<body>
<p>这是一段文字</p>
<p>这是另一段文字</P>
<div>你好</div>
<div>早上好</div>
</body>
</html>
效果图：
基础选择器总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p{color:red} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav{color:red} |
| id选择器 | 一次只能选择1个标签 | id属性只能在每个html文档中出现一次 | 一般和js搭配 | #nav{color:red} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要也选上了 | 特殊情况使用 | *{coler:red} |
2.复合选择器
1）复合选择器可以更精准、更高效的选择目标元素（标签）；
2）复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
· 后代选择器
后代选择器：选择父元素中的子元素，把外层标签写在前面，内层标签写在后面，中间用空格隔开。
语法：元素1 元素2 { 样式声明；}
- 元素1和元素2中间用空格隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
- 元素1和元素2可以是任意基础选择器
<html>
<head>
<style>
ul li {
color: red;
}
/*选择的是所有的ul中的li*/
.nav li{
color: pink;
}
/*选择的是类名为nav的ol中的li*/
</style>
</head>
<body>
<ul> <li>第一个</li> <li>第二个</li> </ul>
<ul> <li>123</li> <li>456</li> </ul>
<ol class="nav"> <li>one</li> <li>two</li> </ol>
<ol> <li>123</li> <li>456</li> </ol>
</body>
</html>
效果图：
· 子选择器
子选择器：只能选择作为某元素的最近一级子元素。
语法：元素1>元素2 { 样式声明；}
- 元素1和元素2中间用大于号隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2必须是元素1最近的一级子级，其他的隔了代的都不行
· 并集选择器
并集选择器：可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。各选择器之间通过英文逗号连接，最后一个选择器后面不需要逗号。
语法：元素1,元素2 { 样式声明；}
<html>
<head>
<style>
ul>li,
.nav li {
color: red;
}
</style>
</head>
<body>
<ul> <li>第一个</li> <li>第二个</li> </ul>
<ol class="nav"> <li>one</li> <li>two</li> </ol>
</body>
</html>
效果图：
· 伪类选择器
伪类选择器：用于某些选择器添加特殊效果。
链接伪类选择器
| 链接伪类选择器 | 说明 |
|---|---|
| a:link | 选择所有未被访问的链接 |
| a;visited | 选择所有已被访问的链接 |
| a:hover | 选择鼠标指针位于其上的链接 |
| a:active | 选择活动链接（鼠标按下还没松开的链接） |
为了确保链接伪类选择器生效，按照LVHA的顺序声明
<html>
<head>
<style>
a {
color: blue;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="#">链接1</a>
<a href="#">链接2</a>
</body>
</html>
效果图：
:focus伪类选择器
选择获得焦点的表单元素，一般情况表单元素才能获取，该选择器主要针对表单元素。
<html>
<head>
<style>
input:focus {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
</body>
</html>
效果图：
复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav li |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于号 .nav>li |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号 .nav,.pink |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点是a{}和a:hover |
| :focus伪类选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus |
二、CSS引入方式
1.行内样式表（行内式）
例如：< div style=“color:red;font-size:12px;” >这是一个盒子< /div >
- style其实就是标签的属性
- 在双引号中间，写法要复合CSS规范
- 可以控制当前的标签设置样式
- 由于书写繁琐，并没有体现出结构与样式相分离的思想，不推荐大量使用，只有对当前元素添加简单样式的时，可以考虑使用
- 这样的写法优先级高
2.内部样式表（嵌入式）
写到html页面内部，将所有css代码抽取出来，单独放到一个< style >标签中，如：上面所有的代码举例
- 理论上< style >可以放到任何地方，但是一般放到< head >中
- 方便控制当前整个页面中的元素样式设置
- 代码结构清晰，但并没有实现结构与样式完全分离
3.外部样式表（链接式）
将样式单独写到css文件中，把css文件引入html页面中使用
首先新建一个后缀名为.css的样式文件，把css代码放入文件中，文件中只有样式，没有标签
然后使用< link >标签引入
如：
< head >
< link rel=“stylesheet” href="css文件名” >
< /head >
属性rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
属性href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
css引入方式总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便在，权重更高 | 结构样式混写 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 很多 | 控制多个页面 |
三、CSS三大属性
1.层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠行主要解决样式冲突的问题。
层叠行原则：
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠，会显示出来
<html>
<head>
<style>
p {
color: red;
font-size: 35px;
}
p {
color: pink;
}
</style>
</head>
<body>
<p>这是一段文字</p>
</body>
</html>
效果图：
2.继承性
子元素会继承父元素的某些样式，如文本颜色和字号（text-，font-，line-这些元素开头的可以继承，还有color属性）
<html>
<head>
<style>
div {
color: red;
font-size: 35px;
}
</style>
</head>
<body>
<div> <p>这是一段文字</p> </div>
</body>
</html>
效果图：
3.优先级
当同一个元素被指定多个选择器，就会由优先级的产生。
- 选择器相同，则执行层叠行
- 选择器不同，则根据选择器权重执行
| 选择器 | 权重 |
|---|---|
| 继承或者* | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| id选择器 | 0，1，0，0 |
| 行内样式style | 1，0，0，0 |
| !important 重要的 | 无穷大 |
!important用法：p{color:red!important;}
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
<html>
<head>
<style>
p {
color: red;
font-size: 35px;
}
.nav {
color: pink;
}
</style>
</head>
<body>
<p class="nav">这是一段文字</p>
</body>
</html>
效果图：
权重叠加
如果是复合选择器，则会有权重叠加，需要计算权重
例：
div ul li——0，0，0，3
.nav ul li——0，0，1，2
a:hover——0，0，1，1
.nav a——0，0，1，1
四、CSS元素显示模式
1.块级元素
块元素：< h1 >-< h6 >，< p >，< div >，< ul >，< ol >，< li >
块元素特点：
- 独占一行
- 高度，宽度，外边距以及内边距都是可以控制的
- 宽度默认是容器（父级宽度）的100%
- 是一个容器（盒子），里面可以放行内或者块级元素
注意：
- 文字类的元素内不能使用块级元素
- < p >标签主要用于存放文字，因此< p >里面不能放块级元素，特别是不能放< div >
2.行内元素
行内元素又称内联元素：< a >，< strong >，< b >，< em >，< i >，< span >
行内元素特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意：
- 链接里面不能再放链接
- 特殊情况链接< a >里面可以放块级元素，但是给< a >转换一下块级模式最安全
3.行内块元素
- 和相邻行内元素（在内块）再一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度（行内元素特点）
- 高度，行高，外边距以及内边距都可以控制（块级元素特点）
4.显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度和高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以设置宽度和高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 块级元素 | 一行只能放一个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
5.显示模式转换
一个模式的元素需要另一个模式的特性，比如增加< a >的触发范围
- 行转换为块元素：display:block;
- 块转换为行内元素：display:inline;
- 转化为行内块：display:inline-block;
增加链接的触发范围举例
a {
display:block;
width:50px;
height:50px;
}
五、CSS Fonts(字体)属性系列
1.文本字体（font-family）
格式： p { font-family: “micosoft yahei”,"宋体”,Arial }
如果字体由含有空格的多个单词组成，则单词外需要加引号（单引号，双引号都可以）
2.字体大小（font-size）
格式：p { font-size: 20px; }
后面的数字一定要带单位。
3.字体粗细（font-weight）
格式：p { font-weight: normal }
属性值：normal（正常粗细，400），bold（加粗，700），bolder（特粗体），lighter（细体），number（直接写数字，100-900，后面没有单位）
4.字体倾斜（font-style）
格式：p { font-weight: normal }
属性值：normal（正常，没有倾斜），italic（斜体）
5.字体复合属性（font）
格式：font: font-style font-weight font-size/line-height(行高) font-family
例：font: italic 400 16px “宋体”;
不需要设定的可以省略，但是font-size和font-family必须有，否则font属性不起作用
六、CSS Text(文本)属性系列
1.文本颜色（color）
格式：p { color: red; }
颜色有很多种表示方式：用英文单词表示；用十六进制表示（#FF0000）；用rgb代码表示（rgb(255,0,0)或rgb(100%,0%,0%)
2.文本对齐（text-align）
格式：p { text-align: center; }
属性值：left（左对齐），right（右对齐），center（居中对齐）
3.装饰文本（text-decoration）
格式：p { text-decoration: none; }
属性值：none（默认，没有装饰线），underline（下划线，链接a自带下划线），overline（上划线），line-through（删除线）
4.文本缩进（text-indent）
格式：p { text-indent: 20px; }
指定文本第一行算进,通常将段落的首行缩进
数字后面的单位还可以是em，em是相对单位，1em是当前字体1个字体的大小。如果该段font-size没有设置，则会按照父元素的文字大小缩进。
5.行间距（line-height）
格式：p { line-height: 26px; }
当行间距line-height=高度height时可以理解为设置垂直居中
七、CSS Background(背景)属性系列
1.背景颜色（background-color）
格式：background-color: red;
默认transparent（透明）
设置背景颜色的透明度可以用rgba(0,0,0,0.3)
a=alpha（透明度，值是0-1，小数的0可以省略，写成.3）
背景透明，内容不会透明
2.背景图片（background-image）
格式：background-image: none/url(图片地址)
3.背景平铺（background-repeat）
格式：background-repeat: repeat;
属性值：repeat（平铺，默认），no-repeat（不平铺），repeat-x（横向平铺），repeat-y（纵向平铺），
4.背景图片位置（background-position）
格式：background-position: x y;
position：top，center，bottom，left，center，right
length：数(20px)
1.参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如：left top和top left效果一样
- 如果只制定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2.参数是精确单位
- 如果参数值是精确坐标，那么第一个一定是x坐标，第二个一定是y坐标
- 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
3.参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
5.背景图片固定（background-attachment）
格式：background-attachment: fixed
属性值：scroll（背景图象是随对象内容滚动的），fixed（背景图像固定）
6.背景复合属性（background）
格式：background: background-color background-image background-repeat background-attachment background-position（一般是这个顺序，没有固定的顺序）
扫一扫
241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
