文章目录
第四章 初识CSS3
css的概念：
Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、背景图片、网页定位等设定
css的优势：
- 内容与表现分离
- 网页的表现统一，容易修改
- 丰富的样式，使得网页布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络宽带
- 运用独立于页面的css，有利于网页被搜索引擎收录
css基本语法结构：
语法：
选择器{
声明1；
声明2；
}
最后一条声明后的“；”可写可不写。
style标签：
HTML中引入CSS样式：
行内样式
<!-- 使用style属性引入css样式 -->
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
内部样式表
<!-- css代码写在<head>的<style>标签中 -->
<style>
h1{
color:green;
}
</style>
优缺点：
- 方便在同页面中修改样式
- 不利于在多页面间共享复用代码以及维护，对内容与样式的分离也不够彻底
外部样式表
-
CSS代码保存在扩展名为.css的样式表中
-
HTML文件引用扩展名为.css的样式表，有两种方式：链接式，导入式。
链接外部样式表：
语法： <head> <link href="style.css" rel="stylesheet" type="text/css" /> 文件路径 使用外部样式表 文件类型
导入外部样式表：
语法：
<head>
<style type="text/css">
@import url("style.css");
</style>
</head>
导入式与链接式的区别：
- 标签属于XHTML，@import是属于CSS2.1
- 使用链接的CSS文件先加载到网页当中，再进行编译显示
- 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
- @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
优先级：
- 行内样式>内部样式表>外部样式表
- 就近原则
基本选择器：
标签选择器
HTML标签直接作为标签选择器的名称
类选择器
<style>
.class{}
</style>
<标签名 class="自定义名称"></标签名>
ID选择器
<style>
#id{}
</style>
<标签名 id="自定义名称"></标签名>
- 标签选择器直接应用于HTML标签
- 类选择器可在页面中多次使用
- ID选择器在同一个页面中只能使用一次
- ID选择器>类选择器>标签选择器
- 标签选择器 不遵循就近原则
全局选择器
*{
}
选择所有元素
并集选择器
<style>
.borther,#aa,a{
color: blueviolet;
font-size:25px;
}
</style>
<body>
<ul class="borther">
<li id="aa"><a>大娃</a></li>
<li>二娃</li>
<li>三娃</li>
</ul>
<a>我是一个虚假连接</a>
<ul>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙悟净</li>
<li>唐三藏</li>
</ul>
</body>
高级选择器：
层次选择器：
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| EF | 后代选择器 | 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 |
| E>F | 子选择器 | 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 |
| E+F | 相邻兄弟选择器 | 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 |
| E~F | 通用兄弟选择器 | 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
后代选择器
body p{
}
实例
<style>
ul li a{
color: red;
}
</style>
<body>
<ul>
<li><a>大娃</a></li>
<li>二娃</li>
<li>三娃</li>
</ul>
<ul>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙悟净</li>
<li>唐三藏</li>
</ul>
</body>
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
子选择器
body>p{
}
<style>
ul>li{
font-size: 30px;
}
li>a{
font-size: 30px;
}
</style>
<body>
<ul>
<li><a>大娃</a></li>
<li>二娃</li>
<li>三娃</li>
</ul>
<ul>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙悟净</li>
<li>唐三藏</li>
</ul>
</body>
相邻兄弟选择器
.active+p{
<!-- 自身不会改变，只改变紧挨着的相同标签的样式 -->
}
【同级ul不会改变:】
通用兄弟选择器
<style>
#aa~li{
color: blue;
}
.borther~ul{
font-size: 20px;
}
a~ul{
color: red;
}
</style>
<body>
<ul class="borther">
<li id="aa"><a>大娃</a></li>
<li>二娃</li>
</ul>
<a>我是一个虚假连接</a>
<ul>
<li>孙悟空</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
</ul>
</body>
<!-- 除了自身的所有同级的标签的样式都会改变。 -->
结构伪类选择器：
| 选择器 | 功能描述 |
|---|---|
| E:first-child | 作为父元素的第一个子元素的元素E，此标签必须在第一行 |
| E:last-child | 作为父元素的最后一个子元素的元素E |
| E F:nth-child(n) | 选择父级元素E的第n个子元素F，(可以是1,2,3)，关键字为even、odd |
| E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
| E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
| E F:nth-of-type(n) | 选择父元素内具有指定类型的第n个F元素 |
使用E F:nth-child(n)和E F:nth-of-type(n)的关键点
-
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
-
E F:nth-of-type(n)在父级里先看类型，再看位置
属性选择器：
| 属性选择器 | 功能描述 |
|---|---|
| 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与属性值中的任意位置相匹配） |
示例：
<style>
<!-- 含有id属性的p元素是第一个和最后一个 -->
p[id]{
background: yellow;
}
<!-- 含有id属性,并且属性值为first;属性和属性值必须完全匹配才能被选中 -->
p[id=first]{
background: red;
}
<!-- 所有p元素都有class属性，且属性值中都有links字符串 -->
p[class*=links]{
background: greenyellow;
}
<!-- p元素中有href属性，并且属性值以http开头 -->
p[href^=http]{
background: blueviolet;
}
<!-- p元素中有href属性，并且字符串以png结尾 -->
p[href$=png]{
background: goldenrod;
}
</style>
<body>
<p class="demo">
<p class="links item" id="first">段落一</p>
<p href="http://xxx1" class="links item">段落二</p>
<p href="http://xxx2.png" class="links item">段落三</p>
<p class="links item">段落四</p>
<p class="links item">段落五</p>
<p class="links item" id="last">段落六</p>
</p>
</body>
div：块级元素
span：行内元素
<body>
<p class="demo">
<p class="links item" id="first">段落一</p>
<p href="http://xxx1" class="links item">段落二</p>
<p href="http://xxx2.png" class="links item">段落三</p>
<p class="links item">段落四</p>
<p class="links item">段落五</p>
<p class="links item" id="last">段落六</p>
</p>
</body>
659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
