15-07-26 HTML--样式基本概念、选择器、样式属性

15-07-26 HTML--样式基本概念、选择器、样式属性

样式表：

CSS（Cascading Style Sheets，层叠样式表）

作用：美化HTML网页，页面布局。

分类：

内联，写在标签里面style=""里面的样式，优点是控制精确，可重用性差。 内嵌，嵌在网页的head里面，可重用性高 外部，样式写在另一个文件里面，如果要用直接附加过来。

优先级：内联>内嵌>外部

选择器：

* 代表所有的元素 一般的网页都需要在写这个样式，去掉有些标签自带的边界，auto代表居中

<style type="text/css">

*  //格式对所有标签起作用
{
    margin: 0px auto;
    padding:0px;
} 

</style>

标签选择器：用标签的名字来选择元素。 如：

<style type="text/css">
div  //格式对div标签起作用
{
    样式；
}
</style>

ID选择器：用标签的ID名来选择元素，ID的名字前面加# 如：

<style type="text/css">
#d  //格式对 id="d" 的标签起作用
{
    样式；
}
</style>

CLASS选择器：用class名来选择元素，class名前面加. 如：

<style type="text/css">
.a  //格式对 class="a" 的标签起作用
{
    样式；
}
</style>

组合选择器：

并列关系：用逗号隔开，代表并列。 后代关系：用空格隔开，空格前面的是后面的父级元素。 筛选关系：用点隔开。

样式：

1.前景与背景

前景：指文本 font：是否倾斜 是否加粗 字体大小 选择字体；

font-family:修改字体 font-size：字体大小 font-style：字体样式，italic倾斜 font-weight：字体粗细，bold加粗

color:字体颜色 text-decoration：文本修饰，none可以去下划线 text-indent：首行缩进

背景： background-color：背景色 background-image：背景图片 background-repeat：平铺方式 background-position：背景图片的位置 background-attachment：背景图片的固定方式

对齐方式 text-align：水平对齐方式 center居中 vertical-align：垂直对齐方式 middle居中 top靠上 bottom靠下 line-height:行高

2.边框和边界

边框： border: 宽度 样式 颜色； border-width:1px; border-style:solid; border-color:#F00;

边界： 外边距： margin：上 右 下 左； margin-top:上边距 margin-right:右边距 margin-bottom:下边距 margin-left:左边距

内边距： padding:上 右 下 左； padding-top:内上边距 padding-right:内右边距 padding-bottom:内下边距 padding-left:内左边距

3.列表与方块 width:宽度 height:高度

list-style:位置 type 图片； list-style-type:列表标示的样式，none去掉 list-style-image:列表图片 list-style-position：列表样式的位置