CSS

Cascading Style Sheet 层叠样式表。

CSS应用方式

外部样式表

通过<link>引入CSS。

<link rel='stylesheet' href="index.css">

通过@import引入CSS(不要忘记分号)。

<style>
@import url("index.css");
@import url(index.css);
@import "index.css";
</style>

link和@import的区别

• 加载资源的限制
  • link是XHTML标签，除了加载CSS外还可以定义RSS等事务。
  • @import只能加载CSS。
• 加载方式
  • link同步加载
  • @import异步加载
• 兼容性
  • link没有兼容问题
  • @import不支持低版本浏览器的兼容
• 改变样式
  • link标签是DOM元素，支持JavaScript控制DOM和修改
  • @import不支持

内部样式表

将CSS放在页面的<style>元素中。

<style>
 p {
     background: yellow;
 }
 </style>

内联样式

将内联样式表放入HTML元素的style属性中。

<p style="color: red;">hello world</p>

CSS语句

@charset

定义样式表使用的字符集。

• 它必须是样式表中第一个元素，前面不得有任何字符。
• 若有多个@charset，只有第一个会被使用。

@charset "utf-8"

@import

引入外部样式表。

• 优先于@charset之外的其他规则。
• 缺点：
  1. @import必须放在样式代码最前面
  2. 影响浏览器并行下载
  3. 多个@import导致下载顺序紊乱

@import "style.css";

@media

将一个或多个媒体查询的结果应用于样式表中。

//可视区不小于900px,
@media screen and(min-width: 900px) {
    article {
        padding: 1rem 3rem;
    }
}

@font-face

下载外部字体。

font-face {
    font-family: '';
    src: url();
}

CSS选择器

用于定位我们想要给予样式的HTML元素

简单选择器

实例：jsbin.com/gocunadona/…

元素选择器

p {
    color: red;
}

类选择器

• 多个元素可以拥有一个类名。
• 一个元素也可以拥有多个类名。

.child {
    font-size: 16px;
}

ID选择器

• 一个id名称在文档中时唯一的，只能出现一次。

#one {
    color: yellow;
}

通用选择器

* {
    margin: 0;
    padding: 0;
}

属性选择器

1. [attr]
2. [attr=val]
3. [attr~=val] 以空格隔出多个值中有包含val值的元素
4. [attr*=val]
5. [attr^=val]
6. [attr$=val]
7. [attr|=val] 值为val或val-为前缀的元素

实例：jsbin.com/resefajani/…

伪类选择器

• :link
• :visited
• :hover
• :active
• :focus
• :target
• :first-child
• :nth-of-type(n)
• :nth-child(n)

实例：jsbin.com/nejuhepifo/…

伪元素选择器

• ::before
• ::after
• ::selection
• ::first-letter
• ::first-line

组合选择器

1. A,B
2. A B
3. A > B
4. A + B
5. A ~ B

实例：jsbin.com/luwocubema/…

多重选择器

.child,
.parent {
    color: green;
}

缩写（速记）

font, background, padding, border, and margin

font: 
background: color image position-x position-y repeat scroll;

CSS值与单位

数值

1. px 绝对值
2. em 父元素的字体
3. rem 根元素的字体
4. vw 视窗宽度的1%
5. vh 视窗高度的1%

百分比

父元素字体大小的百分比

数字

.box {
    opacity: 0.6;
}

颜色

1. rgb()
2. rgba()

层叠和继承

层叠上下文

后期补链接

优先级

!important(不建议使用)

// 1，0，0，0
内联样式
// 0，1，0，0
id选择器
// 0，0，1，0
属性选择器
类选择器
伪类
// 0，0，0，1
伪元素
元素选择器

继承

• 继承： -所有元素可继承：visibility cursor
  • 内联元素可继承：与文字文本有关的 color font
  • 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
  • 表格元素可继承：border-collapse
  • 终端块状元素(标题、段落、块状引用、定义词汇、地址和表 格标题都是终端块状元素)可继承：text-indent和text-align。
• 不继承：padding margin border background display width height float position...

一般只有文字文本具有继承性，列表元素可继承。

初始化CSS

因为浏览器的兼容问题，不同浏览器对于有些标签的默认值是不同的，若不初始化会导致页面在不同浏览器之间出现差异。

* {
    margin: 0;
    padding: 0;
}