HTML+CSS（10）

n  组合选择器

• 多元素选择器

n  描述：给多个元素加同一个样式，多个选择器之间用逗号隔开。

n  举例：h1,p,div,body{color:red;}

• 后代元素选择器（最常用）

n  描述：给某个标签的某一个后代元素加样式，选择器之间用“空格”隔开。

n  举例：div .title{color:red;}

• 子元素选择器

u  描述：给某个元素的子元素添加样式。

u  举例：div > h1.title{color:red;}

n  CSS注释

CSS注释：/* CSS注释内容*/

HTML注释：<!—HTML注释 -->

n  CSS尺寸属性

• Width：元素宽度，一定要加px单位。
• Height：元素高度。

n  CSS字体属性

• font-size：文字大小。如：font-size:14px;
• font-family：字体。如：font-family:微软雅黑;
• font-style：斜体，取值：italic。如：font-style:italic;
• font-weight：粗体，取值：bold。如：font-weight:bold;

n  CSS文本属性

• Color：文本颜色
• Text-decoration：文本修饰线，取值：none（无）、underline（下划线）、overline（上划线）、line-through（删除线）
• Text-align：文本水平对齐方式，取值：left、center、right
• Line-height：行高，可以用固定值，也可以用百分比。如：line-height:24px;   line-height:150%;
• Text-indent：首行缩进。如：text-indent:28px;
• Letter-spacing：字间距

n  CSS伪类选择器：给超链接加的样式（链接的不同状态加样式）

• 一个超链接，有四个状态：正常状态：

n  正常状态（:link）：鼠标没放上之前链接的样式。

n  放上状态（:hover）：鼠标放到链接上时的样式。

n  激活状态（:active）：按住鼠标左键不松开的样式。

n  访问过的状态（:visited）：按下鼠标左键，并弹起，这时的样式效果。

在平常工作中，会使用以下写法，来给链接加不同的样式

a:link,avisited{color:#444;textdecoration:none;}    //将“正常状态”和“访问过的状态”合二为一。

a:hover{color:#9900000;text-decoration:underline;}   //鼠标放上去的状态。

n  CSS列表属性

List-style：列表样式，取值：none，去掉项目符号或编号前面的各种符号。

n  CSS边框属性：每个元素都可以加边框线

• Border-left：左边框线。

n  格式：border-left：粗细 线型 线的颜色；

n  线型：none（无线）、solid（实线）、dashed（虚线）、dotted（点状线）

n  举例：border-left:5px dashed red;

• Border-right：右边框线。
• Border-top：上边框线。
• Border-bottom：下边框线。
• Border：同时给四个边加边框线

。

n  CSS内边距属性

注意：平常我们所说的width和height属性，它们指内容的宽度和高度，不含内外边距、边框线。

• Padding-left：左内填充距离，左边线到内容的距离。
• Padding-right：右内填充距离，右边线到内容间的距离。
• Padding-top：上内填充距离，上边线到内容间的距离。
• Padding-bottom：下内填充距离，下边线到内容间的距离
• 缩写形式

n  Padding:10px;   //四边的内填充分别为10px

n  Padding:10px 20px;  //上下为10px，下为20px

n  Padding:5px 10px 20px;   // 上为5px，左右为10px，下为20px

n  Padding:5px 10px 15px 25px;   //顺序一定是“上右下左”

n  CSS外边距属性：边线往外的距离

• Margin-left：左边线往外的距离
• Margin-right：右边线往外的距离
• Margin-top：上边线往外的距离
• Margin-bottom：下边线往外的距离。
• 简写式

n  Margin:10px;   //四个外边距分别为10px

n  Margin:10px 20px;   //上下外边距10px，左右外边距20px

n  Margin:5px 10px 15px;   //上外边距5px，左右外边距10px，下外边距15px

n  Margin:5px 10x 15px 20px;   //顺序一定是“上右下左”