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>
……
< 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元素都会被选中
注意:后代选择器的两个选择符之间必须要以空格隔开,中间不能有任何其他的符号插入
(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结构树,如下:
结构伪类选择器语法
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; }
(5)E[attr = v a l ] 属 性 选 择 器 E [ a t t r =val]属性选择器 E[attr =val]属性选择器E[attr=val]属性选择器与E[attr^=val]刚好相反,表示选择attr的属性值是以字符串“val”结尾的所有E元素。
在示例41的style样式中添加如下代码:
a[href$=png] { background: red; }