20 Web基础 网页的血肉CSS

什么是CSS

层叠样式表：Cascading Style Sheets

 

这都不重要，重要的是：

CSS决定了如何显示HTML元素

 

基本结构

选择器 + 样式（key: value）

---

p {

color: red;

font-size: 20px;

}

---

 

使用CSS

1. 引入外部.css文件
2. 在html中定义css
3. 在元素中使用内联css

 

常用选择器

• 元素名
• id
• class
• 后代选择器
• 子元素选择器
• 相邻兄弟选择器、普通相邻兄弟选择器
• 伪类

 

常用样式

背景：background-color、background-image、background-repeat、background-size、background-attachment、background-position

大小：width、height

大小单位：px、%、em

文本：color、text-align、text-decoration、text-indent、line-height、font-size、font-family

留白：margin、padding

边框：border、border-radius、box-shadow

显示：display

定位：static、fixed、relative、absolute、float

 

CSS注释

/* 这是一个注释 */

 

CSS3

新属性：渐变、transform（translate、rotate、scale、skew、matrix）、transition、animation（keyframes）

新功能：加载想要的字体

 

实例

美化一个button、添加hover动画效果

 

CSS补充学习

http://www.runoob.com/css/css-intro.html