(内联样式,写在标签内部)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式。
如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式
权重 计算:
内联样式表的权值最高 1000; ID 选择器的权值为 100 Class 类选择器的权值为 10 HTML 标签选择器的权值为 1
CSS中,颜色值通常以以下方式定义:
十六进制 - 如:”#ff0000”
RGB - 如:”rgb(255,0,0)”
颜色名称 - 如:”red”
文本属性

text-decoration: none;
用来设置a连接标签的下划线样式
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
下面是三个设置的样式:

{text-transform:uppercase;}
{text-transform:lowercase;}
{text-transform:capitalize;}

{text-indent:50px;}文本缩进 letter-spacing: 5px; 每个字或者每个字母之间的距离,可以有负值。默认为0 word-spacing:30px; 每个单词之间的间距,不能使用于汉字。
字体样式

常用字体
{font-style:normal;}
{font-style:italic;}
{font-style:oblique;}

CSS链接
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
当设置为若干链路状态的样式,也有一些顺序规则:
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
有序和无序列表样式
{list-style-type:circle;}
{list-style-type:square;}
{list-style-type:upper-roman;}
{list-style-type:lower-alpha;}

所有的列表样式
盒子模型

Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域,内边距是透明的。 Content(内容) - 盒子的内容,显示文本和图像。
最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
兼容性问题
一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。
解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。
边框样式
