CSS概述
层叠样式表（cascading style sheet）
作用：控制页面的显示效果，最终用HTML去展示页面内容，用CSS样式去控制页面内容的显示效果，实现显示和样式的分离，并丰富了网页样式效果。
CSS和HTML结合的方式
1. 行内式（内联）
使用HTML标签的style属性。
2. 内嵌样式
使用位于<head>标签内的<style>标签。
3. 外部样式（常用）
使用Link标签，引入外部css文件。其中rel和type属性的值是固定的，href是指定css文件的位置。
<link rel = "stylesheet" type = "text/css" href = "theme.css" />
4. 外部样式
使用import导入，注意：@import和url之间没有冒号。
<style type = "text/css" >@import url ( 'css.css' );</style>
CSS的优先级
由上而下，由外而内，优先级由低到高，即就近原则。
CSS的代码规范
选择器名称{
属性: 属性值;
属性: 属性值1 属性值2
}
- 选择器名称后面紧跟一对大括号
- 大括号内部是样式的属性和属性值
- 属性和属性之间用分号隔开
- 属性和属性值之间用冒号隔开
- 一个属性中多个值用空格隔开
CSS的常用选择器
1. 标签选择器
直接使用html标签的名称作为选择器的名称。
2. ID选择器
使用html标签的id属性在前面加上#，作为选择器的名称。HTML标签的id属性值应保持唯一。
3. 类选择器
使用html标签的class属性在前面加上.作为选择器的名称。
4. 示例
<html><head><title> CSS的三种常用选择器 </title><style type = "text/css" >div {border : 1px solid blue ;width : 300px ;height : 300px ;}#myspan {border : 1px solid red ;width : 300px ;height : 300px ;color : green ;}. mydpt {color : green ;}</style></head><body><div class = "mydpt" > 第一种选择器 </div><span id = "myspan" > 第二种选择器 </span><p class = "mydpt" > 第三种选择器 </p></body></html>
CSS的扩展选择器
1. 关联选择器
使用外元素加上空格加上内元素来声明选择器的名称。
2. 组合选择器
多个元素（标签）使用同一个样式，选择器名称为多个元素（标签）名称用逗号分隔。
3. 伪元素选择器
超链接的四种状态：
a:link{}：超链接未点击状态。
a:visited{}：被访问后的状态。
a:hover{}：光标移到超链接上的状态（未点击，常用）
a:active{}：点击超链接时的状态。
4. 示例
<html><head><title> css的扩展选择器 </title><style type = "text/css" >p {color : red ;}p b {color : blue ;}span ,div {color : green ;}a : link {text - decoration : none ;}a : hover {font - size : 35px ;}a : active {color : green ;}a : visited {color : red ;}</style></head><body><p> 内容 <b> 加粗内容 </b> 还是内容 </p><hr /><span> span内容 </span><div> div内容 </div><a href = "#" > 伪元素选择器 </a></body></html>
CSS常见样式
1. 文本和字体
- CSS注释
/*这里是注释*/ - 设置文本颜色
color: blue; - 设置文本修饰
text-decoration: underline; - 设置文本的显示位置
text-align: center; - 设置文本的缩进
text-indent: 30px; - 设置文本对其方式（与<center>不同，不影响元素，只影响文本内容）
text-align: center; - 设置字体的大小
font-size: 50px; - 设置字体的类型
font-family: "楷体";
- 设置字体加粗
font-weight: bold;
示例
<html><head><meta charset="utf-8"><title>CSS常见操作之文本和字体</title><style type="text/css">/*css的注释*/p {/*文本样式的设置*/color: blue;/*设置文本颜色*/text-decoration: overline;/*设置文本修饰*/text-align: center;/*设置文本的显示位置*/text-indent: 30px;/*设置文本的缩进*//*字体样式的设置*/font-size: 50px;/*设置字体的大小*/font-family: "楷体";/*设置字体的类型*/font-weight: bold;/*设置字体加粗*/}</style></head><body><p>段落</p></body></html>
效果：
2. 边框和背景
- 设置边框
border:1px solid green; - 设置宽度和高度
width:700px;
height:700px; - 设置背景颜色
background-color: red;
- 设置背景图片
background-image:url('../htmlcode/resource/4.gif');
- 设置背景图片显示
background-repeat:no-repeat;
- 设置背景图片位置
background-position: 50%, 50%;
3. 列表样式
- 列表项图标
list-style-type:circle;
list-style-image:url('../htmlcode/resource/4.gif');
4. 盒子模型
外边距：margin
内边距：padding
边框：border
- 边框
border:1px dashed blue;
- 外边距
margin-left:200px;
margin-top:200px;
- 内边距
padding-left:50px;
padding-top:10px;
示例
<html><head><meta charset="utf-8"><title>盒子模型</title><style type="text/css">div {border: 1px dashed blue;/*设置边框*/width: 200px;height: 50px;background-color: yellow;font-weight: bold;font-size: 25px;margin-left: 200px;/*设置外左边距*/margin-top: 200px;/*设置外上边距*/padding-left: 50px;/*设置内左边距*/padding-top: 10px;/*设置内上边距*/}</style></head><body><div>AAAAAAA</div></body></html>
效果：
5. 位置样式
- 定位（position）
relative：相对位置，是相对自己原来的位置
absolute：绝对位置，针对body - 偏移：
top：根据position的值来确定的顶部像素
left：根据position的值来确定的左部像素 - 漂浮（float）
left：左漂浮
right：右漂浮 - 不允许浮动元素出现（clear）
left、right、both
案例
将DIV层漂浮到右侧
<html><head><meta charset="utf-8"><title>DIV变化案例</title><style type="text/css">div {border: 1px solid black;width: 200px;height: 50px;margin-top: 5px;padding-left: 60px;padding-top: 15px;font-weight: bold;margin-left: 5px;}#div1 {background-color: red;float: right;clear: both;}#div2 {background-color: blue;float: right;clear: both;}#div3 {background-color: yellow;float: right;clear: both;}</style></head><body><div id="div1">AAAAAAAAA</div><div id="div2">BBBBBBBBB</div><div id="div3">CCCCCCCCC</div></body></html>
效果（全在网页右侧
）
6. 滤镜
- filter：设置滤镜颜色
如设置全网页灰色显示，只需要对body设置该滤镜为灰色即可。
扫一扫
1044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
