目录
1. 容器标签 - 块级元素
<div></div> 常用于页面的模块划分
类似 : <span></span> 用于行内分区
2. CSS介绍
Cascading Style Sheets 层叠样式表
1. 作用 : 为元素设置样式,美化页面
2. 内联样式(行内样式) :
1. 内联样式(行内样式)
语法 <标签 style="CSS样式规则">
样式规则 width : 200px;
2. 常用属性:
width : 取数值,单位为像素px
height : 取数值,单位为像素px
background-color :背景颜色
color : 取颜色值,设置文本颜色
font-size : 字体大小,取数值,单位为px
font-weight : 设置字体为粗体 取值bold
3. 练习 :
1.创建页面 01work.html
2.创建<div>,内容不限
3.使用行内样式设置div
500*500 尺寸
橘色 背景色
红色 文本色
字体大小为 24px
字体加粗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 行内样式 -->
<div style="width: 300px;height: 300px;background-color:rgb(255,0,0)"></div>
<p style="width: 600px;height: 50px;background-color: pink;color:blue;font-size: 32px; font-weight:bold;">这是一段文本</p>
<h1>这是一段文本</h1>
<div style="width: 500px;height:500px;background-color: orange;color: #ff0000;font-size: 24px;font-weight:bold;">
此处是练习
</div>
</body>
</html> 3. 文档内嵌方式
使用<style>样式</style>来引入CSS样式,常写在<head></head>标签中
标签内容就是样式规则
语法 :
<style>
div{
width : 300px;
height : 300px;
...
}
</style>
选择文档中的div元素为其设置样式
CSS选择器 :
由选择符/器 和 样式规则组成.
选择符用来 规范页面中哪些元素需要设置样式
样式规则 具体的样式声明
4. 外链方式引入CSS代码
1. 创建外部的CSS文件 index.css
2. 使用 <link rel="stylesheet" href="url">,书写在<head>标签中
3. 样式表中采用选择器去声明样式
5. 补充元素分类
1. 块级元素 :
独占一行,不与其他元素共行,可以设置宽高
代表元素 : div hn p ul ol li table form...
2. 行内元素 :
可以与其他元素共行,不可以设置宽高
代表元素 : span label a strong i b sub sup
3. 行内块元素 :
既可以与其他元素共行,又可以设置宽高
代表元素 : img input
6. CSS样式表的特点:
1. 层叠性
可以对同一个元素设置多个不同的样式规则,共同起作用
2. 继承性
子元素可以继承父元素中设置的样式
例如 : 块元素 默认 宽度与父元素保持一致,文本属性都可以被继承
3. 优先级
在样式声明发生冲突的时候,需要考虑优先级
浏览器默认样式 低
文档内嵌/外链形式引入 中 (这两种形式发生样式冲突时,根据代码的书写顺序决定最终样式,后来者居上)
行内样式 高
3. CSS选择器(重点)
1. 作用 : 规范页面中哪些元素可以设置样式
2. 分类 :
1. 标签选择器/元素选择器
标签名{
属性:值;
属性:值;
}
作用 : 根据标签名在文档中匹配所有的该元素,并为其添加样式
2. id选择器
作用 : 根据元素id属性值进行匹配
语法 :
<h1 id="redText_1"></h1>
#redText_1{
属性:值;
}
特点 :
1. 命名规范 ID 值不能以数字和下划线开头,推荐以英文字母开头,可以出现下划线和数字,大小写敏感
2. 选择符 以 #开头,跟上ID属性值
3. id 属性具有唯一性,id值不能出现重复
4. id属性常用来划分外围结构
3. 类选择器
作用 : 根据元素的class属性值进行匹配,可以实现样式复用
语法 :
<h1 class="redText2"></h1>
.redText2{
属性:值;
}
特点 :
1. 命名规范 不允许以数字和下划线开头,推荐小写字母开头,由数字下划线组成,大小写敏感
2. 以 . 开头跟上class属性值作为选择符
3. 允许重复使用class值,实现样式复用
特殊用法 :
1. class 的属性值可以出现多个,使用空格分隔
<h1 class="redText Green"></h1>
2. 组合使用,缩小匹配元素范围
p.orangeText 表示在p元素中查找类名为orangeText的元素
注意 : 标签选择器与其他选择器结合,标签名一定要写在前面
4. 群组选择器
为一组元素共同设置样式
div,h1,p{
width:200px;
}
body,h1,p{
margin :0;
}
5. 后代选择器
为后代元素设置样式
语法 : 父元素 子元素{
属性:值;
}
注意:
1. 父元素与子元素之间使用空格隔开
2. 后代元素包含直接子元素和间接子元素
<ul>
<li>
<a></a>
</li>
<li>
<ol>
<li></li>
</ol>
</li>
</ul>
ul li{
color: red;
}
6. 子代选择器
用来匹配父元素中指定的直接子元素
语法 : 父元素>子元素{
属性:值;
}
注意 : 只会匹配直接后代元素
7. 通配符选择器 (了解)
* 表示匹配文档中所有元素
*{
margin:0;
padding:0;
}
设置文档中所有元素的内外边距为0
8. 伪类选择器
为元素的不同状态设置样式
以 :开头
1. 分类 :
超链接伪类选择器
动态伪类选择器
2. 超链接伪类:
:link 表示超链接未被访问时的状态
:visited 表示超链接被访问过后的样式
3. 动态伪类:
:hover 鼠标悬停时的状态
:active 鼠标点按时的状态
:focus 元素获取到焦点时的样式,常见于输入框
4. 注意 :
如果给超链接设置四种状态的样式,必须按照以下顺序书写伪类
a:link
a:visited
a:hover
a:active
简称 LVHA 爱恨原则
3.选择器的优先级
继承或者* 的贡献值0,0,0,0
每个元素（标签）贡献值为0,0,0,1
每个类，伪类贡献值为0,0,1,0
每个ID贡献值为0,1,0,0
每个行内样式贡献值1,0,0,0
每个!important贡献值∞ 无穷大
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
总结优先级：
1. 使用了 !important声明的规则。
2. 内嵌在 HTML 元素的 style属性里面的声明。
3. 使用了 ID 选择器的规则。
4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5. 使用了元素选择器的规则。
6. 只包含一个通用选择器的规则。
7. 同一类选择器则遵循就近原则。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#nav{ /* 100*/
height: 30px;
background-color: pink;
}
/* 101 */
#nav a{
text-decoration: none;
color: #643a31;
}
/* 1 */
td{
width: 150px;
height: 26px;
background-color: orange;
}
/* 11 */
td:hover{
background-color: green;
}
/* 112 */
#nav td:hover a{
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div id="nav">
<table>
<tr>
<td><a href="#">首页</a></td>
<td><a href="#">新闻</a></td>
<td><a href="#">音乐</a></td>
</tr>
</table>
</div>
<div id="search"></div>
<div id="main"></div>
<div id="foot"></div>
</body>
</html>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
