HTML5学习笔记-2.CSS入门

CSS（Cascading Style Shee,层叠样式表）

三种导入CSS样式方式

• 行内样式，内嵌
  元素全局属性style中添加,例：

• 页内样式
  style元素,在头部中写

    
  

• 外部样式：链接层叠样式表.css文件
  link元素，在头部中写
  
  

CSS层叠样式规则：就近原则、叠加原则

样式表之间导入

• @import “样式表文件.css”
• 声明样式表的字符编码
  • @charset "UTF-8"
  • @import “样式表文件.css”

三个重要概念

• 盒模型
  • 外边距（margin）
  • 边框（border）
  • 内边距（padding）
  • 内容（content）
  • 宽度和高度(内容content的width&height）

Snip20161012_13.png

• 选择器

http://www.w3school.com.cn/cssref/css_selectors.asp

- 通过选择器找到对应的元素设置样式
   - 通配符\*,选择所有元素
   - 标签选择器：直接选择元素
   - 类选择器：元素属性class=“类名”，.类型
   - id选择器：元素属性id=“id号”，#id
   - 属性选择器：元素属性xx=“属性值”，[属性]
- 选择器优先级：important>行内样式>id>（类|属性|伪类|伪元素）>标签>通配符>继承
- 复合选择器优先级：
  - 权值相加，大的优先，相同的话就近原则。
  - 权值：通配符-0，标签选择器-1，（类选择器|属性选择器|伪类|伪元素）-10，id选择器-100，important-1000

• 属性property

CSS属性http://www.w3school.com.cn/cssref/index.asp

动画
背景
边框和轮廓
盒（框）
颜色
内容分页媒体
定位
可伸缩框
字体
生成内容
网格
超链接
行框
列表
外边距
Marquee
多列
内边距
分页媒体
定位
打印
Ruby
语音
表格
文本
2D/3D 转换
过渡
用户界面

如果直接相关的样式中找不到某个属性的值，那么就会求助于继承机制，使用父元素的这个样式的属性值。

属性可继承性

• 可继承属性(父元素属性可被子元素继承，文字控制属性可继承)
• 不可继承属性（父元素属性不可被子元素继承，块级元素标签属性不可继承）

总结：

与元素外观（文字颜色、字体等）相关的样式会被继承；
与元素在页面上的布局相关的样式不会被继承。