Web前端开发【四】CSS总结

1. CSS，指的是“Cascading Style Sheet（层叠样式表）”，是用来控制网页外观的一门技术。

2. CSS引入方式：

• 外部样式表<link rel="stylesheet" type="text/css" href="文件路径" />
• 内部样式表<style type="text/css"> …… </style>
• 行内样式表

说明：内部样式表的CSS是在“style标签”内定义的，而行内样式表的CSS是在“标签的style属性”中定义的。

3.元素的id和class
id只允许出现一次，而class允许出现多次。（id就像你的身份证号，而class就像你的名字）

4. CSS选择器（常用）：
语法：
选择器 { 属性1 : 取值1; …… 属性n : 取值n; }

• 元素选择器：div{……}
• id选择器：#box{……}
• class选择器：.box{……}
• 后代选择器：father div{……}
• 群组选择器：h3,p{……}

5. 字体样式：

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
color	字体颜色

说明：

• font-family属性如果不指定字体，则会采用浏览器默认字体（即宋体）来显示。如果指定多种字体，则多个字体将按从左到右的优先顺序生效；在实际开发中，常用的中文字体有微软雅黑、宋体，常用的英文字体有Times New Roman、Arial、Verdana；
• font-size属性取值一般是“像素值”，不会采用“关键字”。在实际开发中，常用字体大小为12px、14px，很少用13px、15px等。
• font-weight属性 在实际开发中，我们只会用到“font-weight:bold;”这一个属性值，其他的几乎用不上。
• color属性取值有2种，一种是关键字，如red、green、blue等；另外一种是“16进制RGB值”，如#EEEEEE、#FBF9D0等。

6. CSS注释

/* 注释的内容 */

7.文本样式：

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修饰
line-height	行高
text-transform	大小写
letter-apacing、word-spacing	字母间距、词间距

说明：

• text-indent属性技巧：想要实现段落首行缩进2个汉字的距离，text-indent值应该是font-size值的2倍
• text-align属性取值有left，center，right
• text-decoration属性取值有none（去除所有划线效果，默认），underline（下划线） ，line-through（中划线），overline（顶划线）。“text-decoration:none;”一般用于去除a元素的下划线
• line-height属性用来控制一行文本的高度
• 一般来说，text-transform、letter-spacing、word-spacing这3个在实际开发几乎用不上

8. 边框样式：

属性	说明
border-width	边框宽度
border-style	边框外观
border-color	边框颜色

• 边框的简写形式：border:1px solid red;
• 局部边框样式：border-top（上边框），border-bottom（下边框），border-left（左边框），border-right（右边框）。
• 技巧：去除某一条边框（3种写法） border-bottom:0px\0\none;

9. 列表样式：

属性	说明
list-style-type	定义列表项符号
list-style-image	定义列表项图片

说明：

• list-style-type属性是针对ol或者ul元素的，而不是li元素
• 在实际开发中，我们一般用“list-style-type:none;”来去除列表项符号。（经常用）
• 列表项图片语法：list-style-image:url(图片路径); 在实际开发中，对于列表项图标，更多的是使用“字体图标iconfont”来实现，而不是list-style-image属性。

10. 表格样式：

属性	说明
caption-side	表格标题位置（top、bottom）
border-collapse	表格边框合并（separate、collapse）
border-spacing	表格边框间距（像素值）

说明：一般情况下我们都只在table元素中定义caption-side、border-collapse、border-spacing。

11. 图片样式：

属性	说明
width	定义图片的宽度
height	定义图片的高度
border	定义图片的边框
text-align	定义图片水平对齐方式 （left、center、right）
vertical-align	定义图片垂直对齐方式（top、middle、baseline、bottom）
float	定义文字环绕效果（left、right）

12. 背景样式：

属性	说明
background-color	定义背景颜色
background-image	定义背景图片样式
background-repeat	定义背景图片重复
background-position	定义背景图片位置
background-attachment	定义背景图片固定（scroll、fixed，几乎用不上）

说明：

• background-image语法：background-image: url(图片路径);
• background-repeat取值有repeat（两个方向同时平铺，默认）、repeat-x（只在水平方向平铺）、repeat-y（只在垂直方向平铺）、no-repeat（不平铺）
• 在实际开发中，background-position一般用于实现CSS Spirit（精灵图片）

14. 超链接样式：
（1）超链接伪类：

伪类	说明
a:link	定义a元素未访问时的样式
a:visited	定义a元素访问后的样式
a:hover	定义鼠标经过a元素时的样式
a:active	定义鼠标点击激活时的样式

说明：对于超链接伪类来说，我们只会用到2种状态：未访问时状态和鼠标经过状态a{……} a:hover{……}

（2）:hover伪类：可以定义任何一个元素在鼠标经过时的样式！注意，是任何元素！应用非常广泛，任何一个网站都会大量用到它，需要重点掌握。

（3）鼠标样式：

• 浏览器鼠标样式：cursor:取值;，在实际开发中，我们一般只会用到default（默认）、pointer、text这三个取值。
• 自定义鼠标样式：cursor: url(图片地址), 属性值;，其中鼠标图片后缀名一般都是**.cur**，可以使用Photoshop来制作。

15. 盒子模型：
（1）CSS盒子模型的组成部分：

属性	说明
content	内容，可以是文本或图片
padding	内边距，用于定义内容与边框之间的距离
margin	外边距，用于定义当前元素与其他元素之间的距离
border	边框，用于定义元素的边框

说明：所有的元素都可以视为一个盒子，盒子模型是由内容区（content）、内边距（padding）、边框（border）以及外边距（margin）4大部分组成。

（2）宽高：元素的宽度（width）和高度（height）是针对内容区而言的。只有块元素才可以设置width和height，行内元素是无法设置width和height的。

（3）内边框（padding）与外边框（margin）：

• 局部样式：

padding\margin-top: 像素值;
padding\margin-right: 像素值;
padding\margin-bottom: 像素值;
padding\margin-left: 像素值;

• 简写形式：

padding\margin:像素值;
padding\margin:像素值1 像素值2;
padding\margin:像素值1 像素值2 像素值3 像素值4;

• 区别：padding体现的是元素的“内部结构”，而margin体现的是元素之间的相互关系。

16. 正常文档流与脱离文档流：
（1）正常文档流，又称为“普通文档流”或“普通流”，是指将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。
（2）脱离文档流，指的是脱离正常文档流。如果我们想要改变正常文档流，可以使用2种方法：浮动和定位。

17. 浮动布局：
（1） float属性取值：

属性值	说明
left	元素向左浮动
right	元素向右浮动

（2）浮动最常用于实现水平方向上的并排布局，例如两列布局、多列布局。
（3）清除浮动：clear:both;，清除该元素的兄弟元素浮动之后带来的影响。我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义“clear:both;”来清除浮动。

18.定位布局：
（1）position属性取值：

属性值	说明
fixed	固定定位
relative	相对定位
absolute	绝对定位
static	静态定位（默认值），了解即可

（2）说明：

• top、bottom、left和right这四个属性不一定全部都用到，一般只会用到其中两个。
• 默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。