目录
前言
CSS(Cascading Style Sheets) 美化样式。
提示：以下是本篇文章正文内容，下面案例可供参考
一、书写位置
外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
注意： link 是个单标签哦!!!
该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
这是最常用的外部链接方式，在CSS文件中对html进行修饰。最好选择新建一个box，在里面对内容进行填充，然后在css文件对box进行修饰。定位方式接下来会讲。
二、定位方式
1.类选择器
类选择器就是指的一类的标签的东西。就是那些class="box"的东西，box可以改成任何的。然后在css文件中，对其选择为：.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
2.id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
id选择器和类选择器最大的不同在于 使用次数上。
3.通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
这个通配符选择器， 想想它就好了，它不会和你过日子的。
三、 CSS字体样式属性
1.font-size:字号大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px。
2.font-family:字体样式
3.font-weight:字体粗细
字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
小技巧：
数字 400 等价于 normal，而 700 等价于 bold。
4.font:综合设置字体样式 (重点)
font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font: font-style font-weight font-size/line-height font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和
font-family属性，否则font属性将不起作用。
常用技巧：
1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
四、CSS外观属性
1.color:文本颜色
1.预定义的颜色值，如red，green，blue等。
2.line-height:行间距
line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。一般情况下，行距比字号大7.8像素左右就可以了
3.text-align:水平对齐方式
left：左对齐（默认值）
right：右对齐
center：居中对齐
4.text-indent:首行缩进
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度。
5.text-decoration 文本的装饰
6.CSS注释
CSS规则是使用 /* 需要注释的内容 */ 进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。
五、盒子模式
1.盒子边框（border）
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
2.盒子边框写法总结表
3.圆角边框(CSS3)
border-radius: ;
4.内边距（padding）
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
5.外边距（margin）
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
6.文字盒子居中图片
1、文字水平居中是 text-align: center
2、盒子水平居中 左右margin 改为 auto
880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
