css 基础

1.初识css
CSS：层叠样式表（Cascading Style Sheet）
作用：美化和修饰网页的

基本语法:
选择器{
属性：值l;
…
属性n：值n;
}
2.css的三种引入方式
（1）内嵌式：在HTML的head标签中使用style标签嵌入css样式
（2）行内式：在HTML标签中使用style=“css样式”
（3）外联式：在css文件中书写css样式，然后在HTML中采用link标签引入css文件（建议）

结构与表现分离，提高可维护性。
三种引入方式优先级比较：
行内式>内嵌式>外联式

3.css基本选择器
（1）元素选择器（标签选择器）
h1 body p table form{}
(2)id选择器
在元素中 id=“ID名”
在css样式中 #ID名{ }
【注意】 在HTML网页中要保证每个id名唯一
（3）class选择器（类选择器）
在元素中 class=“clsss名”
在css样式中 .class名{}

通常：使用class选择器频率比较高

通配所有元素 *{}

3.1 css选择器二
（1）复合选择器、群组选择器
用，隔开
h1,p,div{}
(2)后代选择器
用空格隔开
（3)交集选择器
标签名.class名， 标签名#id名

3.2 css继承性
子元素继承父元素的样式

（1）选择器优先级
   id选择器>class选择器>标签选择器   

（2）三种引入方式优先级比较：
行内式>内嵌式>外联式

（3）!important最高权重（优先级）

混合在一起使用时
（1）先看css引入方式，再看选择器的优先级
（2）!important是最高的，不看引入方式
多个选择器中的样式添加!important时，看选择器的优先情况

4.字体样式
font-family: “楷体”;
font-size: 30px;
font-style: italic;/italic斜体 normal正常/
font-weight: bolder;/取值 100 200.。。900 bold bolder/
可简化成：
font:italic bolder 30px “迷你简萝卜”;
注意顺序：先斜体，加粗，大小，字体类型

5.文本样式
color: rgba(255,0,0,1);
/*取值：
英文单词red，
#十六进制6位数，
rgb(0-255，0-255，0-255)模式
rgba(0-255，0-255，0-255,0-1) 模式 0-1表示透明度
hsl() 模式亮度 饱和度
* */

text-align: right;/*文本水平对齐：left center right */
text-indent: 200px;/*首行缩进*/
text-decoration: overline;
/*文本修饰：上划线overline，删除线line-through ,下划线underline,没有文本修饰none*/

line-height: 50px;/行高 行距/

6.伪类样式
所有标签都可以设置的伪类 :hover 鼠标悬停的状态

超链接的伪类样式：
:link 未点击之前的状态
:hover 鼠标悬停的状态
:active 点击时的状态
:visited 访问后的状态

顺序要求：link visited hover active
记忆技巧： LoVe HAte

			a:link{/*未点击*/
			color: red;
			text-decoration: none;
		}
		a:visited{/*访问后*/
			color: yellow;
		}
		a:hover{/*悬停*/
			text-decoration: underline;
		}
		a:active{/*点击时*/
			color: blue;
		}

7.背景样式
background-color :背景色（取值和color同理）
background-image:url(图片路径)
background-repeat:no-repeat;/*背景图是否重复：
repeat重复的（默认）
no-repeat不重复
repeat-x水平重复
repeat-y垂直重复
*/
background-position: 100px 20px;/背景图位置（x点 y点）/
background-position: center;/水平和垂直居中/
background-attachment: fixed;/背景图是否滚动：scroll随滚动条滚动，fixed固定/

8.web字体
（1）在官网下载web字体压缩包http://www.fontawesome.com.cn/
（2）解压，将css文件和fonts文件夹拷贝到项目下
（3）在HTML网页中使用link标签引入css文件
在body中的标签中class=“fa fa-官网提供的图标名”
（4）也可以自定义图标的颜色和大小

首页

邮件