CSS学习<1>
2015-11-13 15:37
351 查看
一、CSS（cascading style sheets）
CSS指层叠样式表
1.1、定义如何显示HTML元素
1.2、样式通常存储于样式表中。
1.3、把样式添加到HTML中，是为了解决内容和表现分离的问题
1.4、外部样式表可以极大的提高工作效率
1.5、外部样式表通常存储在CSS文件中
1.6、多个样式定义可层叠为一
多个样式定义的优先级顺序：
浏览器缺省设置 < 外部样式表 < 内部样式表（位于<head>标签内部） < 内联样式表（位于HTML元素内部）
二、CSS语法
CSS规则由两个主要的部分构成：选择器 + 一条或多条声明
selector {declaration1;declaration2;...declarationN;}
选择器通常是您需要改变样式的HTML元素（标签）。
每条声明都是有一个属性和一个对应的值组成。
如：
h1 {color:red; font-size:14px;}
代码结构如图：
三、值的不同写法和单位
3.1、除了英文单词red，还可以使用十六进制颜色值
p {color : #ff0000;}
3.2、为了节约字节，还可以使用缩写形式
p {color : #f00;}
3.3、还可以使用RGB值
p {color : rgb(255,0,0);}
p {color : rgb(100%,0%,0%);}
在使用RGB百分比时，即使值为0仍然要写百分比符号。
3.4、如果值为若干单词，要加引号
p {font-family : "sans serif"}
四、CSS高级语法
4.1、选择器的分组
对选择器进行分组，选择器就能够分享相同的声明。用逗号把需要分组的选择器分开，如下：
h1,h2,h3,h4,h5,h6 {
color : green;
}
4.2、继承
实例如：
body {
font-family : "verdana";
}
假定本例中body是最高级元素，其子元素是：p,td,ul等。
body的元素使用verdana字体，其所有子元素p，td，ul也都是verdana字体。
但是对于旧的浏览器而言，他们不支持继承或者是无法理解继承。此时，我们就要单独来写：
body{
font-family : "verdana";
}
p,td,ul {
font-family : "verdana";
}
如果不希望继承父类属性的话，也是分开独立设置：
body{
font-family : "verdana";
}
p,td,ul {
font-family : "sans serif";
}
CSS指层叠样式表
1.1、定义如何显示HTML元素
1.2、样式通常存储于样式表中。
1.3、把样式添加到HTML中，是为了解决内容和表现分离的问题
1.4、外部样式表可以极大的提高工作效率
1.5、外部样式表通常存储在CSS文件中
1.6、多个样式定义可层叠为一
多个样式定义的优先级顺序：
浏览器缺省设置 < 外部样式表 < 内部样式表（位于<head>标签内部） < 内联样式表（位于HTML元素内部）
二、CSS语法
CSS规则由两个主要的部分构成：选择器 + 一条或多条声明
selector {declaration1;declaration2;...declarationN;}
选择器通常是您需要改变样式的HTML元素（标签）。
每条声明都是有一个属性和一个对应的值组成。
如：
h1 {color:red; font-size:14px;}
代码结构如图：
三、值的不同写法和单位
3.1、除了英文单词red，还可以使用十六进制颜色值
p {color : #ff0000;}
3.2、为了节约字节，还可以使用缩写形式
p {color : #f00;}
3.3、还可以使用RGB值
p {color : rgb(255,0,0);}
p {color : rgb(100%,0%,0%);}
在使用RGB百分比时，即使值为0仍然要写百分比符号。
3.4、如果值为若干单词，要加引号
p {font-family : "sans serif"}
四、CSS高级语法
4.1、选择器的分组
对选择器进行分组，选择器就能够分享相同的声明。用逗号把需要分组的选择器分开，如下：
h1,h2,h3,h4,h5,h6 {
color : green;
}
4.2、继承
实例如：
body {
font-family : "verdana";
}
假定本例中body是最高级元素，其子元素是：p,td,ul等。
body的元素使用verdana字体，其所有子元素p，td，ul也都是verdana字体。
但是对于旧的浏览器而言，他们不支持继承或者是无法理解继承。此时，我们就要单独来写：
body{
font-family : "verdana";
}
p,td,ul {
font-family : "verdana";
}
如果不希望继承父类属性的话，也是分开独立设置：
body{
font-family : "verdana";
}
p,td,ul {
font-family : "sans serif";
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css float属性
- 使用CSS3 will-change提高页面滚动、动画等渲染性能
- 关于网页设计的css+html相对定位和决定定位的理解
- css相关笔记
- CSS3自定义滚动条样式 -webkit-scrollbar
- CSS基础学习八：派生选择器
- 8.1.4 CSS3文字(1)( 文字阴影和描边、文字排版、自定义文字 )
- 【小窍门】浏览器兼容圆角Border-radius的问题
- 认识CSS3—更容易的网页细节border-radius属性
- DOM与CSS操作
- 动态修改css文件中，具体的class中的个别属性值。
- 从”JAVA“而终 22：CSS讲解
- CSS3新属性(上菜中.....)
- python编程开发之textwrap文本样式处理技巧
- Web学习篇之---css基础知识（二）
- js实现class样式的修改、添加及删除的方法
- DIV水平居中显示CSS代码
- 根据IE和FF加载不同css样式文件
- css实现浏览器导航功能
- 常见CSS注意问题