CSS3的引入和选择器
2019-11-19 本文已影响0人
1CC4
一、HTML中引入css
1、行内样式
- 使用style引入html样式
示例：
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
2、内联样式表
- CSS代码写在<head>的<style>标签中
<style>
h1{color: green; }
</style>
- 优点
方便在同页面中修改样式 - 缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
3、外部样式表
- CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：
[1]链接式
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
/*文件路径、使用外部样式表、文件类型*/
</head>
[2]导入式
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
4、链接式与导入式的区别
- <link/>标签属于XHTML，@import是属于CSS2.1
- 使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
- 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
- @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
5、CSS样式优先级
行内样式>内部样式表>外部样式表
就近原则
二、CSS3基本选择器
1、标签选择器
HTML标签作为标签选择器的名称
<h1>…<h6>、<p>、<img/>
语法：
p { font-size:16px;}
/*标签选择器{属性:(声明)值}*/
2、类选择器
语法：
.class { font-size:16px;}
<标签名 class= "类名称">标签内容</标签名>
3、ID选择器
#id { font-size:16px;}
/*id名称{属性:(声明)值}*/
小结：
- 标签选择器直接应用于HTML标签
- 类选择器可在页面中多次使用
- ID选择器在同一个页面中只能使用一次
- ID选择器>类选择器>标签选择器
三、CSS高级选择器
1.1、层次选择器
语法：
body p{ background: red; }
- 后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
1.2、子选择器
语法：
body>p{ background: pink;}
1.3、相邻兄弟选择器
语法：
.active+p { background: green; }
1.4、通用兄弟选择器
语法：
.active~p{ background: yellow; }
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;}
- 使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
- E F:nth-child(n)在父级里从一个元素开始查找，不分类型
- E F:nth-of-type(n)在父级里先看类型，再看位置
3、属性选择器
3.1、E[attr]
语法：
a[id] { background: yellow; }
3.2、E[attr=val]
语法：
a[id=first] { background: red; }
- E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中
3.3、E[attr*=val]
语法：
a[class*=links] { background: red; }
3.4、E[attr$=val]
语法：
a[href$=png] { background: red; }
