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

CSS 概念 & 作用

2016-12-02 18:50 190 查看
http://www.cnblogs.com/moveofgod/archive/2012/09/18/2691101.html

式样定义 如何显示 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 ; }

1 a:link {color: #FF0000}    /* 未访问的链接 */
2 a:visited {color: #00FF00}    /* 已访问的链接 */
3 a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
4 a:active {color: #0000FF}    /* 选定的链接 */


伪类可以与 CSS 类配合使用：

a[code].red
: visited {color: #FF0000}

<a class="
red
" href="css_syntax.asp">CSS Syntax</a>
一般伪类只能作用于 <a> 这个标签使用。[/code]

如何插入式样表

外部式样表: 当式样需要应用于多个页面时, 这种办法很好 , 使用 <link>标签, 来链接到式样表, <link>标签应该在文档头部 : <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /></head> ( 属性值与其单位之间不要有空格 , 例如 20px )

<link rel=”stylesheet” href=”style.css”type=”text/css”>

内部式样表: 当单个文档需要特殊的样式时, 可以使用 <style>标签在文档头部定义内联式样表, 例如 : <head><style type= "text/css" > hr { color : blue ;} </style></head>, 慎用内联式样表.

多重式样 : 如果某些属性在不同的式样表中被同样的选择器定义, 那么属性值将从更具体的样式表中被继承过来. 其实就是重叠的功能, 例如 : 外部式样表 : h3 { color : blue ; text-align : left ; font-size : 8pt ;} 而内部式样表针对 h3的选择器 : h3{ text-aglin:right ; font-size:20pt;} 所以最后得到的结果为 { color : blue ; text-again:right ; font-size : 20pt ;} 即外部式样的内容会先使用, 然后再用内部式样表的进行覆盖, 相同属性覆盖掉了, 外部多余属性保留 .

颜色不同表示法 :

1) red -- 英文单词

2) #ff0000 -- 16进制

3) rgb(255,0,0) --3元色

4) rgb(100%, 0%, 0%) --百分比

CSS 例子

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 区域，和各个区域的细节属性

收尾，查看需要调整的情况。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航