一.CSS的基本语法
1.1CSS的基本语法结构
h1 {
font-size:12px;
color:#F00;
}
h1 选择器
font-size:12px 声明
font-size 属性
CSS的最后一条声明后的“;” 可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上
1.2style标签
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
二.HTML中引入CSS样式
2.1行内样式
使用style属性引入CSS样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
2.2内部样式表
CSS代码写在<head>的<style>标签中
<style>
h1{color: green; }
</style>
2.3外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式
2.3.1链接式
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
href 文件路径
rel 使用外部样式表、
type 文件类型
2.3.2导入式
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
三.CSS3基本选择器
3.1标签选择器
HTML标签作为标签选择器的名称<h1>…<h6>、<p>、<img/>
p { font-size:16px;}
p 标签名称
font-size 属性
16px 值
3.2类选择器
.class { font-size:16px;
class 类名称
font-size 属性
16px 值
3.3ID选择器
#id { font-size:16px;
id id名称
font-size 属性
16px 值
注意：
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
四.CSS的高级选择器
4.1层次选择器
后代选择器
body p{ background: red; }
注意:
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
子选择器
body>p{ background: pink; }
相邻兄弟选择器
.active+p { background: green; }
通用兄弟选择器
.active~p{ background: yellow; }
4.2结构伪类选择器
前三个是一类 ，在父级里从一个元素开始查找，不分类型，不具有指定元素类型的能力
后三个是一类 ，在父级里先看类型，再看位置，具有指定元素类型的能力
示例
ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}
分别是：
选择ul下的第一个子元素，并且是li，变为红色背景
选择ul下的最后一个子元素，并且是li，变为绿色背景
选择到父元素的第一个p元素，变成黄色背景
选择到父元素的第二个p元素，变成蓝色背景
4.3属性选择器
4.3.1 E[attr]选择器：
a[id] { background: yellow; }
含有id属性的a元素，设置背景元素使黄色
4.3.2 E[attr=val]属性选择器：
a[id=first] { background: red; }
含有id属性，并且id属性值为first的a元素，背景颜色变成红色
E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中
4.3.3 E[attr*=val]属性选择器
所有的a元素都有class属性，并且属性中都有links字符串，把其背景颜色设成红 色
4.3.4 E[attr$=val]属性选择器
a[href$=png] { background: red; }
含有href属性，并且属性值是png字符结尾的，背景颜色变成红色
4.3.5 E[attr^=val]属性选择器
a[href^=http] { background: red; }
含有href属性，并且属性值是http字符开头的，背景颜色变成红色
标签：基本,size,语法,background,font,选择器,CSS,属性 From： https://blog.csdn.net/nice66660/article/details/141927325