林峰博客 +
豆 知 G W M

CSS 笔记

2020-01-05

样式表定义如何显示 HTML 元素。

readme

refer

什么是 CSS?

样式解决了一个很大的问题 HTML 标签原本被设计为用于定义文档内容，如下实例：

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。


CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器 + 声明 + 声明

h1 {color:blue; font-size:12px;}

p {
	color:red;
	text-align:center;
}

选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。 每个属性有一个值。属性和值被冒号分开。

选择器

分组选择器：

h1,h2,p
{
    color:green;
}

嵌套选择器:
它可能适用于选择器内部的选择器的样式。

在下面的例子设置了三个样式：

p { }:  为所有 p 元素指定一个样式。
.marked { }:  为所有 class="marked" 的元素指定一个样式。
.marked p { }:  为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked { }:  为所有 class="marked" 的 p 元素指定一个样式。


p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

选择级

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

多重样式优先级

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式） External style sheet > 浏览器默认样式

<!-- 内联样式 inline style  -->
<p style="color:sienna;margin-left:20px">这是一个段落。</p>

<!-- 内部样式  -->
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

<!-- 外部样式 -->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

下列是一份优先级逐级增加的选择器列表：

通用选择器（*）
元素选择器 (p)
class 类选择器 (.)
属性选择器
伪类
ID 选择器 (#)
内联样式

point

CSS 盒子模型(Box Model)

CSS3

CSS3 模块 CSS3 被拆分为”模块”。旧规范已拆分成小块，还增加了新的。便于浏览器厂商按CSS节奏快速创新。

W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂 。

一些最重要CSS3模块如下：

选择器
盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面

CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。

p 
{
margin:2cm 4cm 3cm 4cm;
margin:10px 5px 15px 20px;
}

Blog