CSS第九周笔记（2）

一·CSS链接

        1.链接样式

        链接的样式，可以用任何CSS属性（如颜色，字体，背景等）

        四个链接状态：

                a:link - 正常，未访问过的链接

                a:visited - 用户已访问过的链接

                a:hover - 当用户鼠标放在链接上时

                a:active - 链接被点击的那一刻

                

                 当设置为若干链路状态的样式，也有一些顺序规则：

                        a:hover 必须跟在 a:link 和 a:visited后面

                        a:active 必须跟在 a:hover后面

        2.文本修饰

       text-decoration 属性主要用于删除链接中的下划线：

                

        3.背景颜色

         背景颜色属性指定链接背景色：

        

 二CSS列表

        1.作用

        （1）设置不同的列表项标记为有序列表

        （2）设置不同的列表项标记为无序列表

        （3）设置列表项标记为图像

        2.无序列表

       

        3.有序列表

         

        4. 不同的列表项标记

        list-style-type属性指定列表项标记的类型是：

                

        5. 作为列表项标记的图像

        要指定列表项标记的图像，使用列表样式图像属性：

                

        6. 列表 - 简写属性

        在单个属性中可以指定所有的列表属性；

        

        7. 移除默认设置

        list-style-type:none 属性可以用于移除小标记。默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除:

                

         

所有的CSS列表属性

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

 三·CSS表格

        1.表格边框

        指定CSS表格边框，使用border属性。

        

        2. 折叠边框

        border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

                

        3. 表格宽度和高度

        Width和height属性定义表格的宽度和高度。

        

        4. 表格文字对齐

        表格中的文本对齐和垂直对齐属性；

        text-align属性设置水平对齐方式，向左，右，或中心：

        

         垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

        

        5. 表格填充

        如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性：

        

        6. 表格颜色

        指定边框的颜色，和th元素的文本和背景颜色：

        

四·CSS盒子模型

        1.定义及作用

         （1）所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

        （2）CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

        （3）盒模型允许在其它元素和周围元素边框之间的空间放置元素。

        图形说明

                

 

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

 

        2. 元素的宽度和高度

        指定一个 CSS 元素的宽度和高度属性时，设置内容区域的宽度和高度。完整大小的元素，必须添加内边距，边框和外边距。

 元素的总宽度为 450px：

 元素的总宽度计算公式：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度计算公式：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距