您的位置：首页 > Web前端 > CSS

CSS 概念 & 作用

2012-09-18 18:10 267 查看

CSS作用 & 介绍

式样定义如何显示 HTML内容

通常存储在式样表中

作用 : 解决内容与表现分离的问题 ( MVC 模型 , model : html , view : css , control : JavaScript )

外部式样表可以极大的提高效率 , 例如要修改网页中标题的表现形式 , 如果网页中有100个标题, 如果使用HTML进行修改, 则需要修改100次, 如果使用CSS进行修改, 则只需要修改1次就OK了, 因为内容与表现分离了, 所以可以将表现(式样表)保存起来, 未了以后使用

式样表可以层叠出现 , 后边的式样会将前边的式样覆盖 , 比如规定标题式样为 a , 而其中几个页面想改变这种式样, 就可以再加入式样表, 只是针对这些进行修改 .

层叠次序 : 1. 浏览器默认

2. 外部式样表

3. 内部式样表(位于 <head>标签内部 )

4. 内联式样(在 html元素内部)

基本格式

css规则是由两部分组成 : 选择器以及一条或多条声明. selector { declaration1 , declaration2 ......} 选择器通常是一个html元素, 每条属性是一个属性和一个值组成.属性和值用:号分开.例如 : h1{ color:red ; font-size:14px ; }

转型 例子body {				/* 元素 */
color:blue;
}

h1,h2,h3,h4,h5,h6 {
color: blue;
font-size: 20px;
}
p {
color: green;
font-size: 15px;
font-family: "sans serif";
text-align: center;
background-color: gray; 	/*背景色*/
padding: 10px;			/*向外延伸 , 宽了*/
}
#myid p {			/* id + 元素 */
color: red;
}

.center {			/* class */
text-align: center;

}

h1.center {			/*表示h1这个元素的class属性*/
color: red;    /*按照优先级,所以没有变化*/
}
[dir] {				/* 属性*/
color: yellow;
}

CSS 框模型概述

块级元素( 例如 div , p )

浮动和定位( 布局 )

实施

首先定义基本的CSS，例如统一的小标题，html标签，body标签，p标签，等等，还有比如统一的鼠标内容 a:hover，a:active 等等

然后定义 div 区域，和各个区域的细节属性

收尾，查看需要调整的情况。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航