CSS基础简介及其他(持续更新)
- 在学习css之前应该对HTML和XHTML 有基本了解。
CSS概述
- css指层叠样式表(Cascading Style Sheets)
- 样式定义如何显示HTML元素
- 样式通常存储在样式表中
- 外部样式表可以极大提高工作效率,他解决了内容与表现分离的问题
- 多个样式定义可层叠为一
出现契机
- HTML标签原本设计为用于定义文档的内容,文档的布局由浏览器自动完成。但随着新的HTML标签和属性添加到HTML规范中,创建文档内容清晰独立与文档表现层的站点变得越来越困难。顺应需求
<style>
出现。
样式表极大得提高了工作效率
- 样式表定义如何显示HTML元素,样式通常保存在外部的.css文件中。仅通过编辑一个简单的CSS文档,外部样式表就可以改变所有页面的布局和外观。
- 除了可以同时改变网站的所有元素css还可以控制任意标签改变样式,这极大的提高了工作效率。
多重样式层叠为一个
- 样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中,在HTML页的头部,或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表
层叠次序
-
一般而言,所有的样式会根据下面的规则层叠与一个新的样式表中,其中 数字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;
}
p {
color: #f00;
}
p {
color: rgb(255,0,0);
}
p {
color: rgb(100%,0%,0%);
}
注意:当使用RGB百分比时,即使当值为0时也要血百分比符号,像素形式则不用写单位。