第四章、初识CSS3
目录
1.学习目标
1.会使用行内样式、内部样式表和外部样式表三种方式为HTML5文档添加CSS样式
2.会使用CSS3的基本选择器设置字体大小和颜色
3.会使用复合选择器为特定的网页元素添加CSS样式
4.会使用CSS3高级选择器为网页元素添加CSS样式
2.CSS的概念
Cascading Style Sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
3.CSS的优势
1.内容与表现分离
2.网页的表现统一，容易修改
3.丰富的样式，使得页面布局更加灵活
4.减少网页的代码量，增加网页的浏览速度，节省网络带宽
5.运用独立于页面的CSS，有利于网页被搜索引擎收录
4.CSS的基本语法
4.1 语法结构
h1 {
font-size:12px;
color:#F00;
}
4.2 style标签
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>5.CSS样式
优先使用：
1.行内样式>内部样式表>外部样式表
2.就近原则
5.1 行内样式
使用style属性引入CSS样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
5.2 内部样式表
CSS代码写在<head>的<style>标签中
<style>
h1{color: green; }
</style>
优点 方便在同页面中修改样式
缺点 不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
5.3 外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：
链接式
导入式
5.3.1 链接外部样式表
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>5.3.2 导入外部样式表
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>CSS基本选择器6.CSS基本选择器
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
优先级：
ID选择器>类选择器>标签选择器
6.1 标签选择器
p { font-size:16px;}
6.2 类选择器
.class { font-size:16px;}
6.3 ID选择器
#id { font-size:16px;}7.CSS的高级选择器
7.1 层次选择器
| 选择器 | 类 型 | 功能描述 |
|---|---|---|
| E F | 后代选择器 | 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 |
| E>F | 子选择器 | 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 |
| E+F | 相邻兄弟选择器 | 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 |
| E~F | 通用兄弟选择器 | 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
7.2 后代选择器
body p{ background: red; }7.3 子选择器
body>p{ background: pink; }7.4 相邻兄弟选择器
.active+p { background: green; }
7.5 通用兄弟选择器
.active~p{ background: yellow; }
7.6 结构伪类选择器
| 选择器 | 功能描述 |
| E:first-child | 作为父元素的第一个子元素的元素E |
| E:last-child | 作为父元素的最后一个子元素的元素E |
| E F:nth-child(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;}
7.7 小结
使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置
8.属性选择器
| 属性选择器 | 功能描述 |
| E[attr] | 选择匹配具有属性attr的E元素 |
| E[attr=val] | 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写） |
| E[attr^=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串 |
| E[attr$=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串 |
| E[attr*=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配 |
a[id] { background: yellow; }a[id=first] { background: red; }a[id=first] { background: red; }a[class*=links] { background: red; } a[href^=http] { background: red; }
a[href$=png] { background: red; }9.总结
扫一扫
2747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
