CSS简介:CSS 指的是层叠样式表、CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。
CSS框模型
CSS 框模型实质上是一个包围每个 HTML 元素的框。
元素的总宽度应该这样计算：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度应该这样计算：
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
CSS语法
CSS 规则集（rule-set）由选择器和声明块组成：
（1）选择器指向您需要设置样式的 HTML 元素。
（2）声明块包含一条或多条用分号分隔的声明。
（3）每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
（4）多条 CSS 声明用分号分隔，声明块用花括号括起来。
CSS添加
（1）外部 CSS：每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用。
（2）内部 CSS：内部样式是在 head 部分的 元素中进行定义。
（3）行内CSS：行内样式（也称内联样式）可用于为单个元素应用唯一的样式。
CSS 注释：注释用于解释代码，在编辑源代码时会有所帮助。（浏览器会忽略注释。）以 /* 开始，以 / 结束。eg：/ 这是一条单行注释 */
CSS属性——背景
·背景属性background-position（所有背景属性）
·背景颜色background-color（opacity 属性元素的透明度）
·背景图像background-image
-图像的路径url('URL')
-不显示背景图像none
-从父元素继承属性inherit
·背景区域background-clip
-裁剪到边框盒border-box
-裁剪到内边距框padding-box
-裁剪到内容框content-box
·背景位置background-origin
-内边距框来定位padding-box
-边框盒来定位border-box
-内容框来定位content-box
·背景大小background-size
·背景重复background-repeat
-水平repeat-x
-垂直方向repeat-y
-只显示一次no-repeat
·背景附着background-attachment
·指定背景图像是滚动的scroll
·指定背景图像是固定的fixed
CSS属性——边框
·边框属性border
·边框样式border-style
-定义点线边框dotted
-定义虚线边框dashed
-定义实线边框solid
-定义隐藏边框hidden
-定义双边框double
-定义无边框none
·边框颜色border-color
·边框图像border-image
-边框图像路径border-image-source
-裁剪边框图像border-image-slice
-边框图像的宽度border-image-width
-边框图像超出边框盒的量border-image-outset
-边框图像应重复、圆角或拉伸border-image-repeat
·边框圆角border-radius
-左上角边框圆角border-top-left-radius
-右上角边框圆角border-top-right-radius
-左下角边框圆角border-bottom-left-radius
-右下角边框圆角border-bottom-right-radius
·边框宽度border-width
·上边框border-top
·下边框border-bottom
·左边框border-left
·右边框border-right
CSS属性——外边距
·外边框属性margin
·上外边距margin-top
·下外边距margin-bottom
·左外边距margin-left
·右外边距margin-right
CSS属性——内边距
·内边距属性padding
·上内边距padding-top
·下内边距padding-bottom
·左内边距padding-left
·右内边距padding-right
CSS属性——高度
·高度height
·最大高度max-height
·最小高度min-height
CSS属性——宽度
·宽度width
·最大宽度max-width
·最小宽度min-width
CSS属性——文本
·颜色color
·对齐text-align
-左对齐left
-右对齐right
-居中对齐center
·方向direction
-正向direction: rtl
-倒向unicode-bidi: bidi-override
·行高line-height
·换行Word-break
·文本转换text-transform
-大写Uppercase
-小写lowercase
-首字母大写capitalize
·文本溢出text-overflow
-修剪文本clip
-省略符号来代表被修剪的文本ellipsis
-使用给定的字符串来代表被修剪的文本string
·首行缩进text-indent
固定的缩进length
基于父元素宽度的百分比的缩进%
从父元素继属性值inherit
·阴影效果text-shadow
-水平阴影h-shadow
-垂直阴影v-shadow
-模糊的距离blur
-阴影的颜色color
·装饰效果text-decoration
-标准的文本none
-文本下的一条线underline
-文本上的一条线overline
-穿过文本下的一条线line-through
-闪烁的文本blink
-从父元素继承属性值inherit
·字符间距letter-spacing
-规定字符间没有额外的空间normal
-字符间的固定空间（允许使用负值）length
-从父元素继承属性的值inherit
·单词间距word-spacing
-规定字符间没有额外的空间normal
-字符间的固定空间（允许使用负值）length
-从父元素继承属性的值inherit
·垂直对齐方式vertical-align
·水平对齐方向text-align
CSS属性——字体
·字体属性font
·字体样式font-style
-标准字体样式normal
-斜体字体样式italic
-倾斜的体样式oblique
-从父元素继承字体样式inherit
·字体大小font-size
·字体粗细font-weight
-标准的字符normal
-粗体字符bold
-更粗的字符bolder
-更细的字符lighter
·字体改变font-family
·字体拉伸font-stretch
CSS属性——列表
·列表属性list-style
-设置列表项标记的类型list-style-type
-设置在何处放置列表项标记list-style-position
-用图像来替换列表项的标记list-style-image
-规定应该从父元素继承 list-style 属性的值inherit
·列表标记list-style-image
·列表标记位置list-style-position
-列表项目标记放置在文本以内，且环绕文本根据标记对齐inside
-保持标记位于文本的左侧outside
-规定应该从父元素继承属性值inherit
·列表标记类型list-style-type
CSS属性——链接
·未访问链接a:link
·访问过链接a:visited
·鼠标停留在链接上a:hover
·链接被点击时a:active
CSS属性——表格
·边框border
·布局table-layout
-列宽度由单元格内容设定automatic
-列宽由表格宽度和列宽度设定fixed
-从父元素继承属性的值inherit
·标题caption-side
-表格标题定位在表格之上top
-表格标题定位在表格之下bottom
-从父元素继承属性的值inherit
·全宽表格width：100%
·合并表格边框border-collapse
-边框会被分开separate
-如果可能，边框会合并为一个单一的边框collapse
-规定应该从父元素继承属性的值inherit
CSS属性——轮廓
·轮廓属性outline
·轮廓样式outline-style
-无轮廓none
-点状的轮廓dotted
-虚线的轮廓dashed
-实线的轮廓solid
-双线的轮廓double
-隐藏的轮廓hidden
-3D 凹槽轮廓groove
-3D 凸槽轮廓ridge
-3D 凹边轮廓inset
-3D 凸边轮廓outset
·轮廓颜色outline-color
·轮廓宽度outline-width
·轮廓与边框空间outline-offset
-轮廓与边框边缘的距离length
-从父元素继承属性值inherit
