CSS Basic
⏱2015-09-01 🔖 CSS FE

CSS Basic

引入 CSS

主要有三种基本的 CSS 引入方式：

外部引入 CSS，<link href="site.css" rel="stylesheet" type="text/css" />
嵌入式 style 标签
内联/inline CSS 样式

CSS 语法规则：CSS 样式由 选择符 selector 和声明 declaration 组成，声明由属性 attribute 和值 value 组成。

选择器

Reference

基础的选择器：

标签选择器 p {}，div {}
类选择器 .container {}
ID 选择器 #id {}
选择器合并 p, div {}
通用选择器 * {}

常用选择器：

Name	Desc
`element > element`	第一代选择器吗，用于选择第一代子元素	`.nav > ul {}`
`element element`	后代选择器，指定所有后代元素	`.container div {}`
`element :active`	伪选择器 pseudo，允许给标签的状态设置样式	`a:hover { color: red; }`

其他选择器：

Name	Desc
`element + element`	选择毗邻元素
`::after`	在每个元素后面插入内容	`p::after {content: "Remember this";}`
`[attribute=value]`	通过 attribute 选择元素	`input[type=checkbox]`
`:nth-of-type(n)`	选择父元素下第 n 个 type 为 element 的元素	`p:nth-of-type(2)`

标签的权值

标签选择符权值为 1
类选择符权值为 10
ID 选择符权值为 100

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
p{color:red!important;}  /* !important 设置为最高权值 */

CSS 元素类型

1. 元素分类

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
转换为其他元素：p {display:inline-block;}

2. 块级元素

每个块级元素都从新的一行开始，并且其后的元素也另起一行。
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

3. 内联元素

和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。

4. 内联块状元素

inline-block 元素特点：

和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置。

CSS 布局模型

在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

1. 流动模型（网页默认为流动模型）

流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

2. 浮动模型

float:left;将block元素在同一行中对齐左浮动；
div{float:left;}将所有div在同一行中对齐左浮动

3. 层模型

层模型像photoshop中的图层一样。能准确定位html元素。通过 position 属性进行定位。

CSS Basic ⏱2015-09-01 🔖 CSS FE