CSS(层叠样式表cascading style sheet
主要作用
(1)对页面的外观进行美化
(2)统一网站页面的风格
(3)实现内容和样式的分离,适合团队开发
使用方法
1、行内嵌入式
给标签添加style属性,用来设置样式, 只对当前嵌入的标签有效。如:<p style="color: cyan; font-size: 45px;">中国</p>
2、页面嵌入式
在页面中使用定义不同的样式规则,如下:
// An highlighted block
<style>
body{ /* 表示body中的所有内容都居中 */
text-align: center;
}
p{
color: red; /*color表示文字的颜色*/
font-size: 45px; /*font-size表示字号*/
}
</style>
<body>
<p>北京</p>
<p>西安</p>
</body>
3、导入css文件的方式
步骤:第一步:创建扩展名为.css的样式文件。
第二步:在页面中通过标签将外部的css文件链接起来。
CSS的选择器
1、标签名选择器:
标签名{
样式规则(属性): 值;
}
2、类选择器
在页面中给标签添加class属性,标签的class属性值可以重复。
.类名(标签的class属性值){
样式规则(属性): 值;
}
3、id选择器
在页面中给标签添加id属性,标签的id属性值不能重复
#id{
样式规则(属性): 值;
}
4、通配选择符
(*),代表所有元素
*{
样式规则(属性): 值;
}
常用CSS的样式规则
1、字体规则
字体 | 作用 |
---|---|
font-style | 字体样式 |
font-size | 字号 |
font-family | 字体 |
font-weight | 文字的粗细 |
2、列表样式
列表 | 作用 |
---|---|
list-style-position | 设置项目符号和文本的位置 |
outside | 默认值,列表项目符号放置在文本以外,且环绕文本不根据符号对齐 |
inside | 列表项目符号放置在文本以内,且环绕文本根据符号对齐 |
list-style-image | 指定项目符号的图像 |
list-style-type | 指定项目符号的类型 |
list-style | 指定列表样式 |
3、表格样式
表格 | 作用 |
---|---|
border-spacing | 指定单元格之间的距离,不能是负值 |
border-collapse | 指定单元格的边框是否合并,取值有两个 |
separate | 单元格边框独立,默认值 |
collapse | 相邻单元格的边框合并 |
border-color | 边框颜色 |
border-width | 边框宽度 |
border-style | 边框线的样式 |
border-radius | 边框的弧度 |
CSS常用属性选择器
1、标签名[属性名]:选择含有给定属性的标签
2、标签名[属性名=值]:选择含有给定属性值的标签
3、标签名[属性名^=值]:选择给定属性值是以某个字符开头的
4、标签名[属性名$=值]:选择给定属性值是以某个字符结尾的
CSS的关系选择器
子元素选择器(用>进行连接)、相邻兄弟关系选择器(用+、~进行连接)
1、父标签 > 子标签
2、相邻兄弟关系选择器
(1)临近兄弟选择器:同一个父元素、第二个元素必须紧跟在第一个元素后
(2)普通兄弟关系
复合选择器
用逗号分隔,如下:
span,#gl,.hm{
color: green;
font-size: 45px;
}
子元素选择器
#parent p {
font-family: '隶书';
}
伪类选择器
1、:hover:当鼠标悬停在目标对象上时
2、a:visited:表示已经访问过的超链接
3、a:link:超链接未被访问的样式
4、a:active:激活超链接时
5、:root:匹配文档的根元素,页面的根元素是<html>,该选择器设置的样式对页面的所有元素均有效
6、:not(element):匹配不是指定元素的元素
7、:only-child:匹配只有一个子元素的元素
8、:first-child:匹配父元素中的第一个子元素
9、:last-child: 匹配父元素中的最后一个子元素
10、:nth-child(n):匹配父元素中正数第n个元素
11、:nth-last-child(n):匹配父元素中倒数第n个元素
12、:before:在匹配的元素之前添加指定的内容,要和content结合使用
13、:after:在匹配的元素之后添加指定的内容
相关资料:https://www.w3school.com.cn/cssref/func_calc.asp