一、简介
层叠样式表(英文全称：Cascading StyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
二、具体介绍
1、语法
（1）一条CSS样式规则由两个主要的部分构成；
（2）结构：选择器{属性：值；属性：值}
（3）选择器：有id和class选择器
id 选择器适用范围只有一个元素，并且选择器前必须要有“#”；元素的class值可以多个，可以重复使用，大大提升高效率，一般情况下class选择器使用比较多。
2、CSS生效方式
（1）插入样式表的方法有三种:外部样式表、内部样式表、内联样式。
（2）外部样式表说明：
- 页面使用 标签链接到样式表。
- 在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观，使用较为广泛。
（3）内部样式表说明：
单个文档需要特殊的样式时，就应该使用内部样式表，即直接放在htnl文件中，一般情况不使用。
（4）内联样式说明：
直接把样式规则直接写到要应用的元素中。
（5）优先级：内联样式>内部样式表或外部样式表>浏览器默认样式
3、颜色尺寸等美化
（1）文本或背景颜色：可以使用16进制值、RGB值或者名称表示。
（2）尺寸：用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %。
（3）对齐：元素中的文本，可以根据需求设置text-align属性为left, center, right。
4、盒子模型
（1）盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
（2）图示：
（3）说明：说明：
- Content 盒子的内容，如文本、图片等
- Padding 填充，也叫内边距，即内容和边框之间的区域
- Border 边框，默认不显示
- Margin 外边距，边框以外与其它元素的区域
（4）总宽度计算公式：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
（5）总高度最终计算公式：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
5、边框和边距
（1）边框、内边距还是外边距，它们都有上下左右四个方向。
（2）说明：
- CSS边框属性允许指定一个元素边框的样式和颜色。
| border-style值 | 效果 |
|---|---|
| none | 默认无边框 |
| dotted | 定义一个点线边框 |
| dashed | 定义一个虚线边框 |
| solid | 定义实线边框 |
| 。。。 | 。。。 |
- 通过 border-width 属性为边框指定宽度。
- border-color属性用于设置边框的颜色。
6、定位
（1）position属性用于对元素进行定位：
- static 静态
- relative 相对
- fixed 固定
- absolute 绝对
（2）static：
-
设置为静态定位position: static;
-
按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。
（3）relative：
-
设置为相对定位position: relative;
-
元素相对于他的静态（正常）位置进行偏移。
（4）fixed：
- 设置为固定定位position: fixed;
- 元素固定不动
（5）absolute：
- 设置为绝对定位position: absolute;
- 元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
7、浮动
（1）CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
（2）例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
（3）浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。
8、不透明度
（1）用opacity对任何元素设置不透明度。
（2）值在[0.0～1.0]之间，值越低，透明度越高。
例如（分别为0.2 0.5 1.0）：
9、伪类和伪元素
（1）CSS伪类和伪元素是用来添加一些选择器的特殊效果。
（2）可实现的效果：
- 鼠标移到某元素上变换背景颜色
- 超链接访问前后访问后样式不同
- 离开必须填写的输入框时出现红色的外框进行警示
- 保证段落的第一行加粗，其它正常
（3）语法：
selector:pseudo-class {property:value;}
1663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
