第四章
Posted ww张炜啊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第四章相关的知识，希望对你有一定的参考价值。
CSS3样式:
1.CSS3（层叠样式）:
①用来进行网页相对风格设计思的，使网页看起来更美观，清晰
②CSS3是CSS的升级版本
2.CSS优点
①.内容与表现分离
②.网页的表现形式更加统一，更用于灵活修改
③.丰富的样式，使得页面布局更灵活
④减少代码量，增加浏览速度，节省宽带流量
⑤运用独立的CSS，有利于网页被搜索引擎收录
3.CSS3基本语法：
①html中的注释：<!---->
②CSS3中的注释:/* */
③语法:
选择器{
声明1;
声明2;
.......
}
*CSS中最后一条声明可以不加“;”，但是基于W3C标准规范考虑，建议加
④样式标签：
<style></style>
4.基本选择器
①ID选择器:
#p{ }
style中以“#”开头
ID选择器命名不可以使用数字开头,在浏览器中无法识别
②类选择器：
.w{ }
style中以“.”开头
③元素选择器：
h1{ }
style中使用标签名调用
④子类选择器：
ul>li{ }
⑤后代选择器:
div p{ }
⑥伪类选择器:
a:hover{ }
⑦属性选择器:
input[type="text"]{ }
5.基本选择器优先级：
①ID选择器 > 类选择器 > 标签选择器
②标签选择器不遵循就近原则
③无论使用那种引用CSS样式,一般都遵循（ID选择器 > 类选择器 > 标签选择器）优先级
6.CSS3的高级选择器
(1)层次选择器
类型 选择器 描述
①后代选择器 E F 选择匹配的F元素,匹配的F元素被包含在E元素中
②子选择器 E>F 选择匹配的F元素,匹配的F元素是匹配的E元素的子元素
③相邻兄弟选择器 E+F 选择匹配的F元素,匹配的F元素紧位于匹配的E元素后
④通用兄弟选择器 E~F 选择匹配的F元素,位于匹配的E元素后的所有匹配的F元素
(2)结构伪类选择器
扩展:css已定义好的,不允许修改
css中四种伪类选择器
①first-line:为某个元素的第一行文字使用样式
②filt-letter:为某个元素的文字的首字字母后第一个字使用样式
③before:在某个元素之前插入一些内容
④after:在某个元素之后插入一些内容
选择器:伪类元素(样式):
*first-child{}
*last-child{}
*nth-child{}
net-last-child{}
nth-last-chile{}
nth-of-chile{}
(3)属性选择器
选择器 功能描述
①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”，任意位置匹配
(4).在HTML中引入CSS的方式？
①最常用的，引入样式表，引入方式：
<link href="css/stytle.css" rel="styleshell" type="text/css" />默认样式
②在HTML头部<style></style>,在内部写样式
<style type="text/css">
p{background:red;}
</style>
③在标签里面直接写样式
<div style="color:red"></div>
引入js文件，赋值给某一个标签
7.HTML中引入CSS样式的方式
(1)常用的引用样式表
<link href="css/style.css" rel="styleshell" type="text/css" />
(2)在HTML头部<style></style>,在内部写样式
<style type="text/css">
</style>
(3)在标签内直接引用
<div color=blue>
</div>
CSS样式
1.<style>标签:
在HTML中通过使用<style>标签引入CSS样式。<style>标签用于为HTML文档定义样式信息。<style>标签位于<head>标签中。
2.CSS选择器:
(1).标签选择器:
一个HTML页面由很多个标签组成，如<h1>~<h6>,<p>,<img/>等。CSS标签选择器就是用来声明这些标签的。
(2).类选择器:
使用标签的class属性引用类样式,即<标签名 class="类名">标签内容</标签名>
(3).ID选择器:
ID选择器的使用方式与类选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次,因此它的针对性更强。
*ID选择器在<style>标签中使用时用《#类名》来使用。
ID选择器语法:
<html>
<head>
<style>
#类名{font-size:16px;}
</style>
</head>
<body>
<p id="类名"></p>
</body>
</html>
3.CSS样式
(1).行内样式:
行内样式就是在HTML标签中直接使用style属性设置CSS样式。style属性提供了一种改变所有HTML元素方式的通用方式。
*语法:
<p style="font-size:14px">直接在HTML标签中设置样式</p>
(2)内部样式表:
把CSS代码在<head>的<style>标签中使用。
(3)外部样式表:
①连接外部样式表
连接外部样式表就是在HTML页面中使用<link/>标签连接外部样式表,<link/>标签必须放在页面的<head>标签内。
语法:
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<head>
*href="style.css"是文件所在的位置
*rel="stylesheet"是指在页面中使用这个外部样式表
*type="text/css"是指文件的类型是样式表文本。
②导入外部样式表:
在HTML中使用@import导入外部样式表,导入样式表的语句必须放在<style>标签中,而<style>标签必须放到<head>标签内。
语法:
<head>
<style>
@import url("style.css")
</style>
</head>
@import表示导入文件,前面必须有个@符号,url("style.css")表示样式文件的位置。
4.样式优先级
(1).行内样式>内部样式表>外部样式表
(2).ID选择器>类选择器>标签选择器
5.CSS符合选择器:
(1).后代选择器
使用空格
(2).交集选择器
(3).并集选择器
逗号
以上是关于第四章的主要内容，如果未能解决你的问题，请参考以下文章