css入门
css分类
根据css样式所放置的位置：分为三种：行间样式、内部样式、外部样式。
行间样式：把样式写在标签里的style属性。例子：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>行间样式</title> 6 </head> 7 <body> 8 <!-- 把样式放在标签内的css叫做行间样式 --> 9 <div style="width:100px;height:100px;background:red"></div> 10 </body> 11 </html>
内部样式（头部样式）：在head标签里添加style标签，style标签包着样式。例子：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>内部样式</title> 6 <style type="text/css"> 7 .box{ 8 width: 100px; 9 height: 100px; 10 background: red; 11 } 12 </style> 13 </head> 14 <body> 15 <!-- 把样式放在头部的style标签内--> 16 <div class="box"></div> 17 </body> 18 </html>
外部样式：使用link标签引入层叠样式表。例子：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>外部样式</title> 6 <link rel="stylesheet" type="text/css" href="外部样式.css"> 7 </head> 8 <body> 9 <!-- 在头部使用link标签引用css的文档--> 10 <div class="box"></div> 11 </body> 12 </html>
常用选择器：
id选择器：#id名，同一个页面不能出现重复的id名。例子
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>id选择器</title> 6 <style type="text/css"> 7 #box{ 8 width: 100px; 9 height: 100px; 10 background: red; 11 } 12 </style> 13 </head> 14 <body> 15 <!-- id选择器： #id名 选择id为XXX标签--> 16 <!-- 在一个页面里id名只能出现一次 --> 17 <div id="box"></div> 18 </body> 19 </html>
class选择器：.class名 class名在同一个页面可以重复多次。例子：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>class选择器</title> 6 <style type="text/css"> 7 .box{ 8 width: 100px; 9 height: 100px; 10 background: red; 11 } 12 </style> 13 </head> 14 <body> 15 <!-- class选择器： .class名 选择class名为xxx的标签--> 16 <!-- 在一个页面里class名可以出现多次 --> 17 <div class="box"></div> 18 </body> 19 </html>
标签选择器：标签名，例子：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>标签选择器</title> 6 <style type="text/css"> 7 div{ 8 width: 100px; 9 height: 100px; 10 background: red; 11 } 12 </style> 13 </head> 14 <body> 15 <!-- 标签选择器： 标签名 选择该页面的所有标签名为XX的标签--> 16 <!-- 在一个页面里id名只能出现一次 --> 17 <div></div> 18 </body> 19 </html>
群组选择器：id选择器/class选择器/标签选择器，id选择器/class选择器/标签选择器，其实群组选择器只是中间多了一个逗号隔开，用于选择一组元素。例子：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>群组选择器</title> 6 <style type="text/css"> 7 div,p,#head{ 8 width: 100px; 9 height: 100px; 10 background: red; 11 } 12 </style> 13 </head> 14 <body> 15 <!-- 群组选择器： id选择器/clas选择器/标签选择器,id选择器/clas选择器/标签选择器--> 16 <!-- 群组选择器 每个基本选择器之间有个逗号隔开，它控制一组元素的样式 --> 17 <div></div> 18 <p></p> 19 <h1 id="head"></h1> 20 </body> 21 </html>
包含选择器(后代选择)：id选择器/class选择器/标签选择器 id选择器/class选择器/标签选择器，其实群组选择器只是中间多了一个空格隔开，用于选择子、孙级的标签。例子：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>后代选择器</title> 6 <style type="text/css"> 7 div p{ 8 width: 100px; 9 height: 100px; 10 background: red; 11 } 12 </style> 13 </head> 14 <body> 15 <!-- 后代选择器： id选择器/clas选择器/标签选择器 id选择器/clas选择器/标签选择器--> 16 <!-- 后代选择器 每个基本选择器之间空格隔开，选择某些元素的子元素 --> 17 <div> 18 <p></p> 19 <div> 20 <p></p> 21 </div> 22 </div> 24 </body> 25 </html>
组合选择器：id选择器/class选择器/标签选择器id选择器/class选择器/标签选择器，他们之间没有空格，把两个选择器连接起来。例子：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>锚点</title> 6 <style type="text/css"> 7 div.box{ 8 width: 100px; 9 height: 100px; 10 background: red; 11 } 12 </style> 13 </head> 14 <body> 15 <div class="box">s</div> 16 </body> 17 </html>
css样式优先级（只和样式的权重和书写顺序有关）
同等优先级情况下，默认后者覆盖前者
标签选择器（权重1） < class（权重10） < id （权重100） < 行间样式（权重1000）
常见样式
css样式写法 属性：属性值；（例如width：400px；）
width： 宽度
height: 高度
background: 背景
backgound-color 背景颜色
语法：
background-color: red | #ffffff；
red : 英文颜色名称关键字
#ffffff : 是一个RGB数字。
background-image 背景图片
语法：
background-image: none | url ( url )；
none : 是无背景图
url : 里面跟的图片的路径。
背景图片默认平铺。
background-repeat ：
background-repeat: repeat | no-repeat | repeat-x | repeat-y；
repeat : 重复默认选项
no-repeat : 不重复
repeat-x : 横向重复。
repeat-y : 纵向重复。
background-attachment 值有scroll（背景图将随着屏幕滚动）、fixed（背景图不会随着屏幕滚动）
background-position:
background-position: x轴坐标值 y轴坐标值；
x轴 y轴坐标值：
可以是像素值。background-position：10px 30px；
可以是具体的方位。left | right | center | top | bottom
可以是百分比。background-position：30% 50%；
border 边框
border-width 边框宽度
border-style 边框样式
border-color 边框颜色
边框样式
solid 实体
dashed 虚线
文本设置
1.font-family
font-family用于设置字体，语法为：
font-family:字体1，字体2，字体3
当浏览器没有找到第一个字体时会，寻找第二个字体，一直下去，如果没有找到可用的字体，则浏览器会使用默认的字体（每个浏览器都有自己的默认处理，风格可能不一致）。
例子：
Font-family:”宋体”,Arail,Tabhoma;
注意： 1.中文页面建议以宋体
2.英文页面建议以Arail/Tahoma
3.中英结合网站建议最好使用英文字体
4.特殊字体一律使用图片
2.font-size
font-size用于设置字体的大小，语法：
Font-size;px|百分比|em
1em=浏览器默认字体大小
(页面文字大小最小12像素，文字大小都取偶数)
例子：
font-size:14px;
注意：建议以px设置文字的大小，一般网页最小的字号是12px
3.font-style
font-style用于定义字体的风格，语法:
font-style:normal | italic | oblique
normal:常规字体 italic:斜体 oblique：倾斜
此属性不常用
4.font-weight
font-weight;normal | bold | bolder | lighter | number
normal:表示正常 bold:表示加粗 bolder:表示更粗的字符 lighter:表示更细的字符 number:100、200、...900d定义由粗到细的字符，400等同于normal,700等同于bold.
normal、bold这两个的较常用。
5.font
font是复合属性控制字体，它是font-style,font-weight,font-size,font-family的组合
语法是:
font:font-style|font-weight|font-size|font-family;
例子：
font:italic bold 12px “宋体”;
6.color
color用于设置文本的显示颜色,语法;
color:颜色值
第一种：使用关键字，如color;red;
第二种：使用16进制数字，如color：#ffffff;
使用16进制书写时，如果两位数字相同，可以进行缩写。例如#ffffff可以写成#fff.
第三种；使用rgb的颜色书写，如：color:rgb(255,0,0);
7.text-decoration
text-decoration用划线，语法：
text-decoration:none|underline|overline|line-through
none:无文本修饰
underline；表示有下划线
overline;表示有上划线
line-through:表示有贯穿线/删除线
none与underline这两个属性值比较常用。
例子：
text-decoration:underline;
8.line-height
line-height用于设置行高，语法;
line-height:normal|lenght;
normal;浏览器默认的行距
length:长度值，值越大，行距越大，可以设置负值。
例子：
line-height:30px;
注意：在实际中line-height主要用在单行的垂直居中。
9.text-indent
text-indent用于控制文字或行内标签的缩进，语法：
text-indent:length;
length为长度值，单位是px或者em，允许为负值。
例子
text-indent：20px;
10.text-align
text-align用于文字或者行内元素的水平居中。语法：
text-align:left | center | right | justify;
left:左对齐 center水平居中 right 右对齐 justify两端对齐文本,其中justify并不常用
例子：
text-align:center;
11.vertical-align
vertical-align用于设置元素的垂直对齐方式，语法：
vertical-align;top | bottom | middle;
top:顶部
bottom:底部
middle:中间对齐
注意：此属性除了table支持的比较好，其他标签不建议使用该属性。
12.word-spacing
word-spacing改变字（单词）之间的标准间隔。语法：
word-spacing;normal | length;
normal:默认值
length:一个长度值，可以设置负值。单位可以是px或者em。
13.letter-spacing
改变字符之间的标准间隔
letter-spacing: normal | length；
normal : 默认间隔
length : 接受一个正长度值或负长度值。如果提供一个正长度值，那么字符之间的间隔就会增加。设置一个负值，会把它拉近。
