CSS样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_37196107/article/details/73864053

外部样式：.css文件
内部样式：<head><style class="text/css"></style></head>
内联样式：<div style="backgroud-color="red" "></div>

- css语法

h1
{color:#f00}
选择器分组
h1,h2,h3
{color:#f00}
继承如body 中的div可继承body中的样式
注释 /css中注释/

- css样式及其属性

背景样式
背景颜色：background-color：#333333
背景图像：background-image：url（img.jpg）
背景重复：background-repeat：repeat/no-repeat/repeat-x/repeat-y/inherit(继承父元素background的属性)
背景定位：background-position：关键字（top left 默认cnter）/百分比（80% 70% 默认50%）/像素值（200px 300px 默认50%）
背景关联：background-attachment：scroll（页面滚动背景图片移动）/fixed(固定)/inherit

- 文本样式

文本缩进：text-indent：数值/百分比/inherit
对齐方式：text-align：left/right/center/justify/inherit
字间隔(汉字或单词)：word-spacing：normal（默认）/数值/inherit
字符间隔（字符或字母）：letter-spacing：normal（默认）/数值/inherit
字符转换：text-transform：none（默认）/capitalize（大写开头）/uppercase（只有大写）/lowercase（只有小写）/inherit
文本装饰：text-decoration：none/underline/overline/line-through/blink/inherit
处理空白符（处理空格、换行、Tab）:white-space:normal(忽略空白)/pre（保留空白）/pre-wrap/pre-line/no-wrap/inherit
文本方向：direction：ltr/rtl/inherit

- 字体样式

font-style：normal/italic/oblique/inherit
font-variant(大写字母的小型字体，小型字母都会转化为大写，并以小写字母的大小显示):normal/small-caps/inherit
font-weight:bold/bolder/lighter/100.200…900/inherit
font-size:xx-small/x-small/small/medium/large/x-large/xx-large/smaller/larger/length/%/inherit
line-height(行高):normal/number/length/%/inherit
font-family(字体)
font（可结合上面6个）：italic 16pt/20pt/YouYuan

- 链接样式

a:link 普通未被点击
a:visited 已访问的链接
a:hover 鼠标位于链接上方
a:active 鼠标被点击的时刻

- 列表样式

list-style-type（标志类型):disc/circle/square
list-style-image(图片作为标志):url()
list-style-position:inside/outside(默认)/inherit
list-style:合并以上3个

- 表格和轮廓

border-collapse（折叠为单一边框）：separate/collapse
border-style(边框样式）：dashed（虚）/solid（实）/dotted（点）/double（border-width宽的双线）
border-width（边框宽度）：thin/medium/thick/length/inherit
border-color（边框颜色）:4个颜色（上、下、左、右）3个颜色（上、下、左右）2个颜色（上下、左右）1个颜色（上下左右）
caption-side（表格标题的位置）：top/bottom/inherit
empty-cells(是否显示空白边框)：hide/show/inherit
table-layout:算法规则
outline-style（轮廓样式）/outline-color/outline-width