文章目录
CSS
层叠样式表(Cascading Style Sheets, CSS)是一种样式表语言，用于描述用标记语言编写的文档的表示。基本的格式和样式可以通过HTML来完成，但是最好是使用CSS。
web应用程序包含许多页面，无论是动态的还是静态的。如果我们使用HTML标签来设计信息，我们必须在每个页面中重复这些信息。假设我们想要改变背景颜色——我们必须为网站的每一个页面编辑HTML。
相反，我们可以使用CSS在一个位置存储我们的样式定义，并将每个HTML页面引用到该位置。通过改变CSS文件，我们可以改变每个页面的背景颜色，样式定义的样式表。
CSS不仅仅是设置背景颜色，当然，它还允许我们为各种元素、字体、页面布局等等设置颜色。
CSS具有复用性。
1、CSS语法规则
选取作用的标签对象之后，通过style的属性来设置内容。语法为：属性1：值；属性2：值。
因为作用位置以及style书写的位置可以做以下分类：
1.1、书写位置
- **行内样式表：**一行标签之内，直接书写在标签的
style属性里。 - **内嵌样式表：**写在<head>的<style>下，然后通过选择器选取要作用的标签。
- **外联样式表：**将内容写在一个外部样式表中（
.css）用<link href=“XXX.css” type=“text/css” rel=“stylesheet”/>
注意:多种样式作用同一个属性：
就近原则。可以根据
并列关系作用标签： td，th；给 td 和 th 都添加样式。可以根据
从属关系作用标签 ：table th；给 table 下的和 th 添加样式。期中 td th 都可以用等效的 id 和 class 选择器选择。
1.2、选择器
通过选择器选择标签对象，然后给这些对象添加属性。
- id ：给需要修改的标签取一个唯一id值，访问的时候
#id名访问。 - class： 给需要修改的标签取一个通用的class值，访问的时候
.class名访问。 - 标签名：直接书写标签名来访问需要添加样式的标签。
注意：多种样式互相补充互相作用(style属性不一样)。
id、 class 、标签名同时作用同一属性，优先级：
id > class> 标签名。class 命名多个名字用空格隔开 class=“cls1 cls2 cls3” 一个标签多个class值。
2、CSS的常用属性
2.1、background-image、background-color
**background-color:**背景颜色，使用颜色单词来确定背景，或者RGB来设置颜色。
**background-image:**背景图片，使用url来选择图片。
/*background-color:#00ffff;背景颜色*/
background-image:url('../Images/img011.jpg');/*背景图片*/
background-repeat: no-repeat;/*background-repeat 平铺方式 repeat-x水平方向 repeat-y垂直方向 no-repeat 则不允许平铺。*/
background-position:center;/*background-position定位属性 center中 top上 bottom下 right右 left左 中可以和其他一起使用 当有两个值的时候前一个为x水平 后一个为y垂直 也可以是数值px 和百分比%*/
background-attachment:fixed;/*设置滚动值 可视区是固定的（fixed） 默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。*/
2.2、font字体
**font：**字体相关的设置，通过颜色color来设置颜色。
font-family:微软雅黑;/*字体*/
font-style:oblique;/*字体风格 normal - 文本正常显示 italic - 文本斜体显示 oblique - 文本倾斜显示*/
font-variant:small-caps;/*小写转大写*/
font-weight:lighter;/*粗细程度（100~900）bold 大 bolder 更大 lighter小*/
font-size:3em;/*设置字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。*/
2.3、text文本
**text：**文本相关的设置，设置每一个字符的样式。
text-indent: 5em;/*em=16px ex=8px px 缩进*/
/*text-align:justify;水平排列方式left center righter*/
/*vertical-align:top;垂直排列方式top middle bottom 作用table */
word-spacing:5px;/*单词间距*/
letter-spacing:10px;/*字母间距 对汉字自持*/
text-transform:capitalize;/*大小写转化none 无转化 uppercase 全大写 lowercase 全小写 capitalize首字母大写 */
text-decoration:blink;/*风格 underline下划线 overline上划线 line-through中划线 blink闪烁 */
white-space:pre;/*留白*/
2.4、无序列表样式
**type:**设置无序列表的序号类型。也可以通过 url 来设置图片。
list-style-type:circle;列表索引 square circle*
list-style :url('../Images/img01.jpg') circle inside;
2.5、table
设置表格的边框和去掉重复边框。
/*单线条*/
table{
border-collapse:collapse;
}
/*样式并列使用[,]*/
table,td{
border:1px dotted red;/*边框像素 实虚线（solid实 dotted虚） 颜色 */
}
2.6、超级链接伪类
/*超级链接的伪类*/
a:link{color:#00ffff};/*超级链接未访问*/
a:visited{color:#778899}/*超级链接访问过*/
a:hover{color:#ff0000}/*超级链接鼠标悬停*/
a:active{color:green}/*超级链接鼠标按住*/
3、盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。
元素的宽度和高度
当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。
3.1、padding内边距
内容与父级元素边框的距离。
padding:20px 10px 1px;
/*
padding-top:20px;padding-left:20px; padding-right:20px;padding-bottom:20px--->上、左、右、底
top right bottom left 四个方向合并：
-1个值: A，全部都一样。
-2个值: AB，A是上下，B是左右。
-3个值: ABC，A是上，B是左右，C下。
-4个值: ABCD，A是上，B是右，C是下，D是左。
*/
3.2、margin外边距
当前元素与平级元素的距离。
margin:20px;/*上下左右都20px*/
/*
margin-top:20px;margin-left:20px; margin-right:20px;margin-bottom:20px--->上、左、右、底
top right bottom left 四个方向合并：
-1个值: A，全部都一样。
-2个值: AB，A是上下，B是左右。
-3个值: ABC，A是上，B是左右，C下。
-4个值: ABCD，A是上，B是右，C是下，D是左。
*/
3.3、width、height
width:200px;// 宽度
height:80px;// 高度
4、定位
有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
-
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
-
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
-
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
-
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
#div1{
background-color:red;
/*position:relative;相对*/
position:absolute;/*绝对*/
width:100%;
height:20px;
left:20px;
}
#div2{
/*position:relative;相对*/
position:absolute;
top:30px;
width:100%;
height:30px;
bottom:5px;
background-color:#00ffff;
}
5、CSS+DIV
使用DIV+CSS可以完成各种混排效果，使用 float:left/right。
#middle{
width:100%;
height:160px;
}
#middle_left{
background-color:red;
width:33.33333%;
height:160px;
float:left;/* 滑动 left right */
clear:none;/* 清理格式 */
}
#middle_center{
background-color:green;
width:33.33333%;
height:160px;
float:left;
}
#middle_right{
background-color:blue;
width:33.33333%;
height:160px;
float:left;
}
6、filter过滤器
filter: blur(1px); /* 照片模糊程度 */
filter: brightness(60%);/* 照片黑白程度 */
filter: contrast(60%);/* 照片昏暗程度 */
filter: drop-shadow(-10px -10px 50px -100 red);/* 滤镜阴影 第一个值正负表示阴影方向左右 第二个值正负表示阴影方向上下 第三个值阴影大小*/
box-shadow:-10px -10px 10px 10px red;
filter: grayscale(100%);/*滤镜黑白*/
filter:hue-rotate(150deg);/*滤镜对比度1*/
filter:invert(90%);/*滤镜对比度2*/