CSS基本语法结构、选择器
1.1 CSS概述
1.什么是CSS:CSS全称为层叠样式表（Cascading Style Sheet），⼜称为风格样式表，表现HTML或XHTML⽂件样式的计算机语⾔，包括对字体、颜⾊、边距、⾼度、宽度、背景图⽚、⽹页定位等设定。
2.CSS的优势
（1）内容与表现分离
（2）表现的统⼀
（3）丰富的样式，使得页⾯布局更加灵活
（4）减少⽹页的代码量，提⾼⽹页的浏览速度，节省⽹络宽度
（5）运⽤独⽴于页⾯的CSS，还有利于⽹页被搜索引擎收录
1.2 CSS的基本语法结构
1 CSS的基本语法结构
① CSS规则由两部分构成，即选择器和声明
②声明必须放在⼤括号（｛｝）中，并且声明可以是⼀条或多条。
③每条声明由属性和值构成，属性和值之间⽤冒号分开，每条语句以英⽂分号结尾。
h1 {
font-size:12px;
color:#F00;
}
2 认识< style>标签
< style >标签⽤于为HTML⽂档定义样式信息，位于< head>标签中，它规定了浏览器中如何呈现HTML⽂档，⽤法如下：
< style type=“text/css”>
h1 {
font-size:12px;
color:#F00;
}
< /style>
1.3 在HTML中引⼊CSS样式
在HTML中引⼊样式的⽅法有三种，分别是⾏内样式、内部样式表和外⾯样式表
1⾏内样式
⾏内样式就是在HTML标签中直接使⽤style属性设置CSS样式，⽤法如下：
< 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外部样式表
①链接外部样式表
链接外部样式表就是在HTML5页⾯中使⽤链接外部样式表，这个< link/>标签要放到页⾯的< head>标签内。
语法：< head>
……
< link href=“style.css” rel=“stylesheet” type=“text/css” />
……
< /head>
其中，rel="stylesheet"是指在页⾯中使⽤这个外部样式表；type="text/css"是指⽂件的类型是样式表⽂本； href="style.css"是⽂件所在的位置。
②导⼊外部样式表
导⼊外部样式表就是在HTML⽹页中使⽤@import导⼊外部样式表，导⼊样式表的语句必须放在< style>标签中，⽽< style>标签必须放到页⾯的< head>标签内，语法如下：
< head>
< head>
……
< style type=“text/css”>
< !–
@import url(“style.css”);
– >
< /style>
< /head>
其中，@import表⽰导⼊⽂件，前⾯必须有⼀个@符号，url(“style.css”)表⽰样式表⽂件的位置。
链接式与导⼊式的区别：
< link/>标签属于XHTML，@import是属于CSS2.1
使⽤< link/>链接的CSS⽂件先加载到⽹页当中，再进⾏编译显⽰
使⽤@import导⼊的CSS⽂件，客户端显⽰HTML结构，再把CSS⽂件加载到⽹页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是⽆效的。
4 样式优先级
⾏内样式>内部样式表>外部样式表
就近原则
1.4 CSS3的选择器
在CSS中，有三种最基本的选择器，分别是标签选择器、类选择器和ID选择器
1、标签选择器
HTML标签作为标签选择器的名称，语法如下：
p { font-size:16px;}
2、类选择器
<；标签名 class= “类名称”>标签内容</标签名>
语法：.class { font-size:16px;}
3、ID选择器
语法：#id { font-size:16px;}
⼩结：
标签选择器直接应⽤于HTML标签
类选择器可在页⾯中多次使⽤
ID选择器在同⼀个页⾯中只能使⽤⼀次
4、基本选择器的优先级
ID选择器>类选择器>标签选择器
问：标签选择器是否也遵循“就近原则”？
答：不遵循，⽆论是哪种⽅式引⼊CSS样式，⼀般都遵循ID选择器 > class类选择器 > 标签选择器的优先级
任务2使⽤CSS⾼级选择器美化页⾯
1.1 CSS3的⾼级选择器
1层次选择器
E F 后代选择权 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内。
E>F ⼦选择器 选择匹配的F元素，且匹配的F元素是匹配的E元素的⼦元素。
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后⾯。
E~F 通⽤兄弟选择器 选择匹配的F元素，切位于匹配的E元素后的所有匹配的F元素。
（1）后代选择器
后代选择器的作⽤就是可以选择某元素的后代元素，例如：“E F”中，E为祖先元素，F为后代元素，那么F元素⽆论是E的⼦元素。孙辈元素，或者更深层次的关系，都将被选选中。
语法：body p{ background: red; }
上⾯的代码表⽰body元素的后代元素p，即所有的p元素都会被选中
上⾯的代码表⽰body元素的后代元素p，即所有的p元素都会被选中
注意：后代选择器的两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插⼊
（2）⼦选择器
⼦选择器（E>F），只能选择某元素的⼦元素，其中E为⽗元素，F为⼦元素
语法：body>p{ background: pink; }
上⾯代码的意思是选择body的⼦元素，
（1）相邻兄弟选择器
相邻兄弟选择器(E+F)可以选择紧接在另⼀个元素后⾯的元素，它们有⼀个相同的⽗级元素。
语法：.active+p { background: green; }
上⾯代码的意思是选择类名为active的相邻兄弟p元素，也就是类active后⾯的⼀个p元素被选中
（2）通⽤兄弟选择器
通⽤兄弟选择器（E~F）⽤于选择某元素后⾯的所有兄弟元素。
语法：.active~p{ background: yellow; }
上⾯代码的意思是选择类名为active后⾯的所有兄弟元素p元素。
2 结构伪类选择器
所有结构伪类选择器都是基于HTML⽂档树的，也称⽂档对象模型（DOM）。⽂档树是HTML页⾯的层级结构，它由元素、属性和⽂本组成，它们都是⼀个节点。
根据上⾯的HTML⽂档，可以绘制⼀个清晰地DOM结构树，如下：
css选择器分为哪几类
结构伪类选择器语法
E：first-child：作为⽗元素的第⼀个⼦元素的元素E
E：last-child: 作为⽗元素的最后⼀个⼦元素的元素E
E F：nth-chuld(n): 选择⽗级元素E的第N个⼦元素F，(n可以是1，2，3)，作为关键字为even、odd
E：first-of-type：选择⽗元素内具有指定累⼼的第⼀个E元素
E：last-of-type：选择⽗元素内具有指定类型的最后⼀个E元素
E F:nth-of-type(n)：选择⽗元素内具有指定类型的第N个F元素
⽰例：
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 属性选择器
属性选择器的语法
E[attr]：选择匹配具有属性attr的E元素
E[attr=val]：选择匹配具有属性attr的E元素，并且属性值为val(其中val区分⼤⼩写)
E[attr$=val]：选择匹配元素E，且元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]：选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配（1）E[attr]属性选择器
E[attr]属性选择器是最简单的⼀种，⽤来选择㕛某个属性的元素，⽽⽆论这个属性值是什么。
在⽰例41的style样式中添加如下代码：
[id] { background: yellow; }
（2）E[attr=val]属性选择器
E[attr=val]属性选择器为元素E设置了属性attr，并且它的属性值为val。
在⽰例41的style样式中添加如下代码：
a[id=first] { background: red; }
（3）E[attr*=val]属性选择器
E[attr*=val]属性选择器设置了通配符，为元素E设置了属性attr，并且它的属性值总包含“val”字符串，也就是说只要所选择的属性中含有“val”字符串就可以被匹配上。
在⽰例41的style样式中添加如下代码：
a[class*=links] { background: red; }
（4）E[attr^=val]属性选择器
E[attr^=val]属性选择器为元素E设置了属性attr，并且它的属性值是以字符串“val”开头的所有E元素。
在⽰例41的style样式中添加如下代码：
a[href^=http] { background: red; }
=val]属性选择器E[attr
（5）E[attr=val]属性选择器与E[attr^=val]刚好相反，表⽰选择attr的属性值是以字符串“val”结尾的所有E 元素。
在⽰例41的style样式中添加如下代码：
a[href$=png] { background: red; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。