标签：
1,：内联样式表 即写在标签内部
solid表示实线，得到效果
修改语句加宽高（注意分号隔开）
得到效果
当新设置行高（line-height:""）与外边框一样高的时候
123出现垂直居中
之后想让123再出现水平居中则添加text-align：center （align 属性规定 div 元素中的内容的水平对齐方式）
出现效果
再让整个div居中，则设置边距margin:0px 再设置左右边距自动调整：auto
2：内嵌样式表 （必须写在head标签里，因为程序先读取head标签）style标签
注意，type标签可以不写，只写style
比如只针对p标签起作用，就直接使用p写样式 ，比如设置背景颜色和文字大小，如下
此时需要body中添加一个相对应的P标签，如下
显示如下
若在body中设置多个P标签，都执行内嵌样式
显示如下
总结：
3：外部样式表
注意写外部样式表的时候会首先默认写一个星号*
margin间距设为0
padding间距设为0 间距：P标签与P标签之间的距离
比如此时*号标签等于对于所有标签去除边距和间距
新建一个外部样式表，新建css
新建如下
然后把*标签与p标签剪切过来
注意因为本身是css，所以不需要放置style标签，可直接写样式表
所以保存后，出现效果如下
在HTML当中引用css样式表，鼠标右键·····如下
·············································
之后出现对应CSS的link语句
此时保存刷新，则又出现之前出现过的样式，如图
二 选择器
1.标签选择器，就是上面说过的
2.class选择器
class表示类，以点“.”开头，以class引用，可多次引用
举例：
比如在css中设置一个.aa标签
接下来用class在HTML中的第二个p标签中引用.aa 。如下所示：
显示效果：
小结：.class选择器在css中以点开头设置标签，以class=“”在HTML的P标签中引用
3.ID选择器 以#开头以ID引用，可以多次引用吗？不可以，注意ID是唯一引用
例如在css中写入一个ID标签
在html中引用，如下
效果如下：
不能两个p标签引用同一个ID标签，ID只能引用一次，class可以多个引用
4.复合选择器
例如P标签和span标签同时执行此样式：
同时HTML中：0
效果如图：0
（2）：
其中.main表示在class=main所引用的标签内部（即两个尖括号中间的位置），如果有P标签存在，则这个P标签执行以下的样式。后代指被包围的。
例如：
同时css中如下
显示效果
其中黄色内容为p标签
（3）筛选：
此表示：p标签当中class等于sp的 执行以下此样式
例如：
同时HTML中
显示如下
注：可以理解为前面的P标签的规则没起作用···p标签只是起到了一个导向性的作用
二.样式属性★★★★
1. 样式属性之背景与前景
1.背景：
2.前景字体：
（二）边界和边框
border（表格边框、样式等）、margin（表外间距）。padding（内容与单元格间距）。
显示如图：
（三）列表与方块
width、height、（top、bottom、left、right）只有在绝对坐标情况下才有用。
效仿360浏览器中网站链接样式的写法
链接的style：
a:link 超链接被点前状态
a:visited 超链接点击后状态
a:hover 悬停在超链接时
a:active 点击超链接时
在定义这些状态时，有一个顺序l v h a 一定要按照顺序来
例如：
显示如图
此时访问过后默认浏览痕迹为紫色，如图
然后在css中写入一个link标签，让此链接没有x下划线（text-decoration：none），如图
再写visited
再写hover（鼠标指在上方时，即鼠标悬浮在上方），此时出现下划线与文字颜色：
再写active（行动），即点击时显现的颜色：
之后保存刷新后出现360浏览器链接样式效果，不附图
但是如下图中不同颜色的链接：
则需要分类，写法如下
l v h a 中分别加标签“.a1”,如下：
再在HTML中 class="a1" 如下：
再回到css中 复制一组lvha改标签为a2 ， 并改变初始颜色 如下：
4
在HTML中再引用a2，如下
效果如下
注：其中hover还可以在其他div中使用
例如：
显示效果：鼠标指向时div区域变为绿色，鼠标离开变为蓝色。如下
最后思维导图总结：
CSS样式表
标签：
原文地址：http://www.cnblogs.com/Ivan99999/p/5856401.html
