什么是CSS?
CSS是层叠样式表（Cascading Style Sheets），样式定义了如何显示HTML元素，样式通常储存在样式表中，CSS是HTML的化妆师
如何使用CSS？
内联样式：定义在单个HTML元素中
内部样式表 ：定义在HTML的头元素中
外部样式表：将样式定义在外部的CSS文件中（.css）,由HTML页面引用样式表文件
内联样式：定义在HTML元素的属性style里面
css语法：只需要将分号隔开的一个或多个属性作为元素的style属性值，属性值之间用冒号（:）连接，多个属性值之间用分号（;）隔开
**内部样式表：**在HTML的<head>元素内部添加<style>元素
**外部样式表：**样式定义在独立的CSS文件中，一个纯文本文件，后缀为.css,该文件只包含样式规则
使用方法：①**创建外部样式表文件
②引用该样式文件
<link rel="stylesheet" type="text/css" href="文件地址值"\>
CSS语法规范：
CSS规则由俩个部分构成：选择器，以及一条或多条样式声明
**CSS注释：**CSS注释以 “/*” 开始, 以 “*/” 结束,
/*这是个注释*/
CSS规则特性
优先级：同一个元素若存在多个CSS规则，对应冲突的声明以优先级高者为准（就近原则）
层叠性：同一个元素若存在多个CSS规则，对于不冲突的声明可以叠加
继承性：父元素的CSS声明可以被子元素继承，如字体，颜色
CSS选择器
**元素选择器：**能通过元素名来选择CSS作用的目标
**类选择器：**能够附带class属性的元素都可以使用此样式声明，将元素的class属性设置为样式类名，可以将类选择器和元素选择器结合使用，以实现对某种元素的中不同样式的细分控制 (.class_name)
**ID选择器：**以一种独立于文档元素的方式，它仅作用于id属性的值 (#id_name)
**选择器组：**选择器声明为以逗号隔开的选择器列表，将一些相同的规则作用于多个元素
**派生选择器：**用来选择子元素
分类：后代选择器：选择某元素的后代（子孙）元素
子元素选择器：选择某元素的所有子元素
**伪类选择器：**用于设置同一个元素在不同状态下的样式
常用伪类:
:link向未被访问的超链接添加样式
:visited 向已被访问的添加样式
:active:向未激活的元素添加样式
:hover:当鼠标悬停到元素上方时，添加样式
:focus:当元素获取焦点时，向该元素添加样式
border：用来设置元素的边框
四边设置：border：width值 style值 color值
单边设置：border-left border-right border-top border-bottom
样式单位：%：百分比 in：英寸 cm：厘米
mm:毫米 pt 磅（1pt=1/72 in）
Px像素 1em 等于当前字体尺寸
Overflow：当内容溢出元素边框时
Visible 不裁剪内容，可显示在内容框外
Hidden 裁剪内容，不提供滚动机制
Scroll 裁剪内容，提供滚动机制
Auto 如溢出，提供滚动
Box框模型：
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置
Margin - 清除边框区域。Margin没有背景颜色，它是完全透明
Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响 `
Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content - 盒子的内容，显示文本和图像
背景色：
background-color：用于为元素设置背景色，可接受任何合法的颜色值
背景图片：
background-image：设置背景图片，默认值为none，表示背景上没有放置任何图像，如需设置，则需要起始字符附带图像的url地址
默认情况下，背景图片是在水平和垂直方向上重复出现的
background-repeate：可控制背景图片的平铺效果
repeate：在水平和垂直方向重复
repeate-x：在水平方向重复
repeate-y：在垂直方向重复
no repeate：仅显示一次
background-position：用于改变背景图片在元素中的位置
CSS文本格式化
控制字体：
font-family：value 1，value 2 指定字体
font-size：value 字体大小
font-weight：normal/bold 字体加粗
color：value 文本颜色
Text-align：left/right/center 文本排列
Line-height：value 行高
Text-indent：value 首行文本缩进
表格样式：
常用属性：表格同样使用box模型（边框 ，内边距，宽，高）以及文本格式化属性
表格特有属性：如果设置了单元格边框，相邻单元格边框 会单独显示，类似于双线边框
border-collapse：合并相邻的边框，设置是否将表格的边框合并为一个边框
显示方式：元素都有自己默认的选择方式
块元素：从上到下显示，可以设置宽高 如：<P>,<div>,<h1>
行内元素：从左到右显示，不能设置宽高，如：<span>,<a>
行内块元素：从左到右显示，可以设置宽高，<input>,<img>
除了默认显示效果外，可以用display属性，修改元素的显示方式
具体修改方式:
display：none 表示不显示该元素，释放其占用的空间
display：block 表示将元素的显示方式设置为块
display：inline 表示将元素的显示方式设置为行内元素
display：inline-block：表示将元素的显示方式设置为行内块元素
定位：
定义元素框对于其正常位置应该出现的位置或相对于父元素另一个元素相对于浏览器窗口本身的位置
**流定位：**页面中的块级元素从上到下依次排列，每一个块级元素都会出现在新的一行，元素框之间的垂直距离，由框的垂直外边距计算得出
内联元素：在一行中从左到右，水平排列不需要换行，使用的是水平内边距，边框和外边距调整他们的间距
**浮动定位：**将元素排除在普通流之外，将浮动元素放置在包含框的左边或者右边，浮动元素依旧包含于框之外，浮动框可以向左或者向右移动，直到外边缘碰到包含框或者另一个浮动框位为止，如需要设置框浮动在包含框的左边或者右边，可以通过float属性实现具体方向的移动
任何元素都是可以移动的 float：none/left/right
clear清除浮动所带来的影响：clear：none/left/right/both
**相对定位：**元素原本所占的空间不释放，元素框会相对于原来的位置偏移某个距离，设置垂直或者水平，让元素相对于它的起点进行移动
首先需要设置position属性，其值为relative，然后使用left/right/top/bottom设置具体的偏移量
**绝对定位：**将元素的内容从当前定位中清除，释放空间，并使用偏移量来固定元素的位置，相对于最近的祖先元素，若偏移元素没有已定位的元素，那么它的位置就是相对于body元素的位置
首先设置position属性，其值为absolute，然后使用left/right/top/bottom设置具体的偏移量
**固定定位：**将元素的内容固定在页面的某个位置，元素从普通流中完全移出，不占用页面空间，当用户将页面向下滚动时，元素看不随着移动
首先设置position属性，其值为fixed，然后使用left/right/bottom/top设置具体的偏移量
**堆叠顺序：**一旦修改元素的定位方式，元素可能发生堆叠，可以使用z-index来控制有元素在框中出现的堆叠数值
Z-index：value 数值越大，级别越高，越显示在前
列表样式：
List-style-type：用于控制列表中列表项标志的一个样式
无序列表：出现在各列旁边的圆点
无需列表的取值：none：无标记；disc：实心圆（默认）；circle（空心圆）；square 实心方块
有序列表：可能出现数字，字母或者其他用来排列计数
有序列表的取值：none：无标记；decimal：数字；
lower-roman：小写罗马数字 upper-roman：大写罗马数字
list-style-image：使用图像替换列表项，取值为url
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
