《CSS3知识点》

原创 前端小攻略 教程 css3 68阅读 17 天前 举报

一.引入样式

1.行内样式表

<h1 style="color: red;font-size: 18px;">10-30</h1>

2.内部样式表(在head标签里面,title标签下面)

<style type="text/css">

h2{

color: yellow;

font-size: 20px;

}

</style>

优点

方便在同页面中修改样式

缺点

不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底

3.外部样式表

嵌入式

<link href="../css/index.css" rel="stylesheet" type="text/css"/>

导入式

<style type="text/css">

@import "../css/index.css";

</style>

嵌入式和导入式的区别:

1.<link/>标签属于XHTML,@import是属于CSS2.1

2.使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示

3.使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中

4.@import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的

4.样式优先级

行内>内部>外部

就近原则

二.基本选择器

1.标签选择器(通过标签名称定位)

h2{

color: red;

}

2.类选择器(通过标签中class属性的值定位,值可以重复,不能以数字开头)

.class01{

color:yellow;

}

<h2 class="class01">10-30</h2>

<h1 class="class01">10-31</h1>

3.ID选择器(通过标签中id属性的值定位,值不可以重复,不能以数字开头)

id01{

color: red;

}

<h2 id="id01">10-30</h2>

<h1 id="id02">10-31</h1>

4.基本选择器的优先级

不遵循就近原则,无论哪一种样式表的导入,都遵循:id选择器>类选择器>标签选择器

三.高级选择器

1.层次选择器

/后代选择器/

li p{

background-color: yellow;

}

/子选择器/

body>p{

background-color: aqua;

}

/相邻兄弟/

.class01+p{

background-color: red;

}

/通用选择器/

.class01~p{

background-color: blue;

}

2.结构伪类选择器

ul li:first-child{

background-color: yellow;

}

ul li:last-child{

background-color: red;

}

ul li:nth-child(even){

background-color: blue;

}

/匹配元素类型/

p:first-of-type{

background-color: pink;

}

p:last-of-type{

background-color: green;

}

p:nth-of-type(3){

background-color: aqua;

}

3.属性选择器

/包含id属性/

a[id]{

background-color: red;

}

/包含target属性,并且值为_blank/

a[target=_blank]{

background-color: yellow;

}

/包含title属性,并且值以we开头/

a[title^=we]{

background-color: aqua;

}

/包含title属性,并且值以e结尾/

a[title$=e]{

background-color: black;

}

/包含class属性,并且值包含it/

a[class*=it]{

background-color: blue;

}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复