CSS基础简介及其他（持续更新）

CSS基础简介及其他（持续更新）

---

• 在学习css之前应该对HTML和XHTML 有基本了解。

---

CSS概述

• css指层叠样式表（Cascading Style Sheets）
• 样式定义如何显示HTML元素
• 样式通常存储在样式表中
• 外部样式表可以极大提高工作效率，他解决了内容与表现分离的问题
• 多个样式定义可层叠为一

---

出现契机

• HTML标签原本设计为用于定义文档的内容，文档的布局由浏览器自动完成。但随着新的HTML标签和属性添加到HTML规范中，创建文档内容清晰独立与文档表现层的站点变得越来越困难。顺应需求<style>出现。

---

样式表极大得提高了工作效率

• 样式表定义如何显示HTML元素，样式通常保存在外部的.css文件中。仅通过编辑一个简单的CSS文档，外部样式表就可以改变所有页面的布局和外观。
• 除了可以同时改变网站的所有元素css还可以控制任意标签改变样式，这极大的提高了工作效率。

---

多重样式层叠为一个

• 样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头部，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表

层叠次序

• 一般而言，所有的样式会根据下面的规则层叠与一个新的样式表中，其中 数字4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内联样式表（位于标签内部）
  4. 内联样式（在HTML元素内部）

---

CSS语法

• css规定有两个主要部分构成：选择器，以及一条或多条声明。

selector {
	declaration1;
	declaration2; 
	... 
	declarationN; 
}

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

selector {	
	property: value;
}

• 请用花括号来包围声明
• 如果值为多个，则要给值加分号
• 为了提高可读性，每行应该只描述一个属性
• css在浏览器工作时不会受到空格和大小写影响，但是在涉及与HTML一起工作时，class和id名称是对大小写敏感的。

例子：

• 下面代码的作用是将h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素。

h1 {
	color:red; 
	font-size:14px;
}

值的不同写法和单位

• 十六进制的颜色值

p { 
	color: #ff0000; 
}

• css缩写形式

p {
	color: #f00; 
}

• 两种方法使用RGB值

p { 
	color: rgb(255,0,0); 
}

p { 
	color: rgb(100%,0%,0%); 
}

注意：当使用RGB百分比时，即使当值为0时也要血百分比符号，像素形式则不用写单位。

---