CSS样式

一、CSS的创建方式

       1）内部样式表（内联样式、内嵌样式）

              直接在html文件中通过style标签书写的css

       2）行内样式

              直接写在标签身上的样式

       3）外部样式（外联样式）

              开发最常用，是将所有的样式放在一个或多个以 .css 为扩展名的外部样式文件中，通过<link/>标签将外部样式表文件链接到html文档中

              也可在style标签里，通过 @import 来链接外部样式，格式如下

       <style>

              @import url (css/importStyle.css) 

</style>

       url 内写的是相对于html文档的存放位置用来读取CSS文件的路径

二、CSS选择器

       1、标签选择器

              直接写标签尖括号内的标签名就行，例如：

              p {  }    h1 {   }

       2、id选择器

              在标签身上用id = “id名” 命名后，使用#id名来进行选择

              注意：id名具有唯一性，一个id名只能使用一次

3、类（class）选择器 – 开发中使用频率较高

              在标签身上用class = “class名” 命名后，使用 . class名的方式进行选择

类名的要求

1. 类名不能使用纯数字
2. 不能以纯数字开头
3. 不能使用特殊符号，如：@、&、￥ ……
4. 类名不能使用中文
5. 类名建议有意义，例如：textcolor，最好使用英文，实在不行也可以用拼音

1. 群组选择器 – 使用逗号隔开

例如：

 p，

 strong ，

 h1 {  }

表示同时为p标签，strong标签，h1标签内的内容进行样式更改

1. 通配符选择器

* {  }里面的样式用来通配全局的标签

一般默认使用通配符做如下设置：

* {

 margin：0 ；        // 用来取消标签的间隙

 padding：0 ；

}

1. 包含（后代）选择器

··             使用空格，例如：

              p strong { } 

              表示选择p标签里的strong标签

1. 伪类选择器 - ：hover

任何元素都可以添加这个伪类，但多用在a标签上

Link  链接的初始状态	Hover  鼠标悬停的状态
Visited  链接访问后的状态	Active  激活状态（鼠标按下没松开）

1. CSS样式
   1. color  字体颜色
   2. font-size  字体大小
   3. font-family  字体样式
   4. background-color  背景颜色
   5. background-image  背景图片
   6. background-size  背景尺寸
   7. background-position 背景定位
   8. background-repeat  背景平铺
   9. width 宽度
   10. height 高度
2. 选择器的权重
   1. 类型选择器（元素选择器）——  0001
   2. Class选择器（类选择器）——0010
   3. Id选择器 ——0100
   4. 伪类选择器 ——0010

子代选择符 —— 0000

属性选择符 —— 0010

伪元素选择符 —— 0001

内联样式 —— 1000

继承样式 —— 0000