文章目录
- 第四章 初识CSS3
- 1.CSS的基本语法
- 2.HTML中引入CSS样式
- 3.基本选择器
- 4.高级选择器
- 4.1层次选择器
- 4.2结构伪类选择器
- 4.3属性选择器
第四章 初识CSS3
1.CSS的基本语法
- 选择器{ 声明2；
声明(属性：值)1;
}；
- style标签
<style type="text/css"> </style>
2.HTML中引入CSS样式
-
行内样式（使用style属性引入CSS样式）
<h1 style="color:red;">style属性的应用</h1> <p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p> -
内部样式表(CSS代码写在
<head>的<style>标签中)<style> h1{color: green; } </style> -
外部样式表(CSS代码保存在扩展名为.css的样式表中)
-
链接外部样式表(使用
<link/>链接的CSS文件先加载到网页当中，再进行编译显示)<head><!--rel="stylesheet":使用外部样式表 type="text/css":文件类型 --> <link href="文件路径" rel="stylesheet" type="text/css"/> </head> -
导入外部链接表(使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中)
<head> <style type="text/css"> <!-- @import是属于CSS2.1,对不兼容CSS2.1的浏览器是无效的 @import url("style.css"); --> </style> </head>
-
-
CSS样式优先级: 就近原则
3.基本选择器
-
全局选择器
使用*号，选择所有标签
-
标签选择器（直接应用于HTML标签）
HTML标签作为标签选择器的名称
<h1>…<h6>、<p>、<img/> -
类选择器（可在页面中多次使用）
.类名称{属性:值;}
<标签名 class= “类名称”>标签内容</标签名>
-
ID选择器（在同一个页面中只能使用一次）
#id { 属性:值;}
-
交集选择器、并集选择器
使用,隔开
-
基本选择器的优先级
ID选择器>类选择器>标签选择器
4.高级选择器
4.1层次选择器
-
后代选择器（后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入）
body p{ background: red; }：body下所有p元素都为红色 -
子选择器
body>p{ background: pink; }:只有子元素为粉色 -
相邻兄弟选择器
.active+p { background: green; }:紧邻的p元素为绿色，本身不变 -
通用兄弟选择器
.active~p{ background: yellow; }:active后所有兄弟p元素为黄色，本身不变
4.2结构伪类选择器
-
li:first-child（ul下第一个元素是li）
li:first-child{ color:red; } <ul> <li>163/126/yeah三大免费邮箱均默认开放</li> <li>全面支持iPhone/iPad及Android等系统</li> <li>客户端、手机与网页，实现发送、阅读邮件</li> </ul> -
li:first-of-type（ul下第一个类型是li的元素）
li:first-of-type{ color:red; } <ul> <a>jddodfj</a> <li>163/126/yeah三大免费邮箱均默认开放</li> <li>全面支持iPhone/iPad及Android等系统</li> <li>客户端、手机与网页，实现发送、阅读邮件</li> </ul>
4.3属性选择器
-
a[id]（含有id属性的a元素）
a[id] { background: yellow; } -
a[id=first]（a元素中有“id=first”相同的属性）
a[id=first] { background: red; } -
a[class*=links]（class 属性中属性值包含links）
a[class*=links] { background: red; } -
a[href^=http]（href属性值中以http开头的）
a[href^=http] { background: red; } -
a[href$=png]（href属性值中以png结尾的）
a[href$=png] { background: red; }
