CSS
CSS简介
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
css特点
在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程度的缩减了页面的体积,减少下载的时间。
css工作原理
名称CSS中的“层叠(cascading)”表示样式单规则应用于HTML文档元素的方式。具体地说,CSS样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果。
一,css四种引入方式
1:行内间引用
直接将css代码写在指定标签内部。
<!--第一种引入方式:--> <div style="color: darkred;font-size: 50px">hello kelvin</div>
2:内嵌式
在head标签内添加一个style标签,在style标签内写css代码。
<head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p{ color:#f40; background-color: gray; } a{ text-decoration: none; } </style> </head>
3:导入式
导入外部样式单的功能与链接外部样式单的功能差不多,只是语法上存在差别。导入外部样式单主要通过@import方式导入CSS文件,有两种导入方式 。
a、在style元素中导入CSS文件
<style type="text/css"> @import "CSS样式文件的绝对地址"; @import url("样式文件的绝对地址"); </style>
url可省略,所以只需指定样式单地址即可,在标准CSS的语法中,@import还有sMedia属性,用于指定CSS的可作用的设备,目前还没得到广泛的支持,所以sMedia可以不写。
b、在CSS文件中再导入CSS文件
/*某个CSS文件*/ @import "另一个CSS文件的地址"; .test{ 100px; height: 100px; line-height: 20px; background-color: red; }
在CSS文件中再导入CSS文件,会给服务器造成太大的文件请求压力,最好不要这样做。 @import是由CSS提供的一种导入样式的方式,当页面被加载时,@import会等到页面全部被加载完成时再加载CSS样式,所以在页面还未加载完成期间,页面还没有CSS样式效果,会导致“屏闪”,通过@import导入的CSS样式是无法用DOM去控制的。
4:链接式
就是将一个.css文件引入到HTML文件中,但它与导入式不同的是链接式使用HTML规则引入外部CSS文件,它在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件。
<link type="text/css" rel="stylesheet" href="CSS样式文件的地址">
**必须有href属性,用于指定需要引入的CSS文件的路径 。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。
使用CSS样式时,尽量将CSS代码与HTML代码分离,css的引入最好使用链接式,即最好使用引入外部CSS文件的方式。
二,css选择器
1:基本选择器
1:* 表示匹配所有标签 例:*{ color: red; } 效果:所有标签内容字体颜色变红。 2:标签名 表示匹配指定名称的标签 例:p{ color:red; } 效果:所有p标签内的字体颜色变红。 3:"#"+id 表示匹配指定id的标签。 例:#div1{ color: red; } 效果:id名为div1的标签内容字体颜色变红。 4:"."+class名 表示匹配指定类名的标签。 例:.class1{ color: red; } 效果:class名为class1的标签内容字体颜色变红。 注:基本选择器可以组合使用。例如:div.div1{color:red} 选择div标签中id为div1的标签。
2:组合选择器
E,F表示基本选择器 1:E,F(并列选择器) 表示筛选E和F两个或两类标签,对其进行同样的操作。 例: p,#div1{ color:green; } 效果:p标签和id为div1的标签内容字体颜色变红。 2:E F(后代选择器)表示筛选E下面的F标签。 例: div .goods{ color:green; } 效果:div标签内部的class名为goods的标签内容字体颜色变红。 3:E>F (父子选择器) 筛选E的下一级的F标签 例: div>.goods{ color:green; } 效果:div标签下一级的class名为goods的标签内容字体颜色变红。 4:E+F(毗邻选择器) 筛选紧随E之后的同级元素F 例:.div1>.div2{ color: red; } 效果:只会选择class=div1子代的class=div2的标签。
注意(嵌套规则):
1:块级标签可以嵌套块级标签和行级标签,但是行级标签只能嵌套行级标签。
2:特殊的块级标签只能嵌套行级标签,不能嵌套块级标签。h* p dt
3:li内可以嵌套div
4:块级标签与块级标签并列,行级标签与行级标签并列。
3:属性选择器
E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。) p[title] { color:#f00; } E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; } E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; } E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;} E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;} E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
4:伪类
CSS伪类是用来给选择器添加一些特殊效果。
anchor伪类:专用于控制链接的显示效果
a:link(没有接触过的链接),用于定义了链接的常规状态。 a:hover(鼠标放在链接上的状态),用于产生视觉效果。 a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。 a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。 伪类选择器 : 伪类指的是标签的不同状态: a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
示例:当鼠标移入div盒子内,上半部分背景色变红。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #outer{ 100px; height: 200px; background-color: green; } #top{ 100px; height: 100px; background-color: green; } #bottom{ 100px; height: 100px; background-color: green; } #outer:hover #top{ background-color: red; } </style> </head> <body> <div id="outer"> <div id="top"></div> <div id="bottom"></div> </div> </body> </html>
before after伪类 :
:before p:before 在每个<p>元素之前插入内容 :after p:after 在每个<p>元素之后插入内容 p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red} p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello";color:red}
5:css优先级和继承
CSS优先级:
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是: 1 内联样式表的权值最高 style=""-------------------1000; 2 统计选择符中的ID属性个数。 #id -------------100 3 统计选择符中的CLASS属性个数。 .class -------------10 4 统计选择符中的HTML标签名个数。 p --------------1
按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body { color: #ff4400; } </style> </head> <body> <p>hello</p> </body> </html>
p标签中的文字会继承body{color:#ff4400},然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。
我们只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见:任何显示申明的规则都可以覆盖其继承样式。
此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。
注意:
1、文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式,而外部定义指经由<link>或<style>卷标定义的规则。 2、有!important声明的规则高于一切。 3、如果!important声明冲突,则比较优先权。 4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。 5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
三,css常用属性
1:颜色属性
*背景颜色*/ background:transparent; /*透视背景*/ background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置 background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/ background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/
2:css文字属性
color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/
3:css边框空白
padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白
4:css符号属性
list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/ list-style-type:circle; /*空心圆形符号*/ list-style-type:square; /*实心方形符号*/ list-style-image:url(/dot.gif); /*图片式符号*/ list-style-position: outside; /*凸排*/ list-style-position:inside; /*缩进*/
5:css链接属性
a /*所有超链接*/ a:link /*超链接文字格式*/ a:visited /*浏览过的链接文字格式*/ a:active /*按下链接的格式*/ a:hover /*鼠标转到链接*/ 鼠标光标样式: 链接手指 CURSOR: hand 十字体 cursor:crosshair 箭头朝下 cursor:s-resize 十字箭头 cursor:move 箭头朝右 cursor:move 加一问号 cursor:help 箭头朝左 cursor:w-resize 箭头朝上 cursor:n-resize 箭头朝右上 cursor:ne-resize 箭头朝左上 cursor:nw-resize 文字I型 cursor:text 箭头斜右下 cursor:se-resize 箭头斜左下 cursor:sw-resize 漏斗 cursor:wait 光标图案(IE6) p {cursor:url(“光标文件名.cur”),text;}
6:css框线一览表
border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/ 以上是建议书写方式,但也可以使用常规的方式 如下: border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/ 其他框线样式 solid /*实线框*/ dotted /*虚线框*/ double /*双线框*/ groove /*立体内凸框*/ ridge /*立体浮雕框*/ inset /*凹框*/ outset /*凸框*/
7:css边界样式
margin-top:10px; /*上边界*/ margin-right:10px; /*右边界值*/ margin-bottom:10px; /*下边界值*/ margin-left:10px; /*左边界值*/
8:最常用!
一:字体 1 字体样式{font:font-style font-variant font-weight font-size font-family} 2 字体类型{font-family:"字体1","字体2","字体3",...} 3 字体大小 {font-size:数值|inherit| medium| large|larger| x-large| xx-large| small| smaller| x-small| xx-small} 4 字体风格{font-style:inherit|italic|normal|oblique} 5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;} 6 字体颜色 {color:数值;} 7 阴影颜色{text-shadow:16位色值} 8 字体行高 {line-height:数值|inherit|normal;} 9 字间距 {letter-spacing:数值|inherit|normal} 10 单词间距{word-spacing:数值|inherit|normal} 11 字体变形{font-variant:inherit|normal|small-cps } 12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase} 13 字体变形 {font-size-adjust:inherit|none} 14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider} 15 行间距 {line-height:数值|inherit|normal;} 16 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink} 17 段首空格 {text-indent:数值|inherit} 18 水平对齐{text-align:left|right|center|justify} 19 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super} 20 书写方式{writing-mode:lr-tb|tb-rl} 二:背景样式 1 背景颜色{background-color:数值} 2 背景图片{background-image: url(URL)|none} 3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定{background-attachment:fixed|scroll} 5 背景定位 {background-position:数值|top|bottom|left|right|center} 6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置} 三:框架样式(BoxStyle) 1 边界留白{margin:margin-top margin-right margin-bottom margin-left} 2 补 白{padding:padding-top padding-right padding-bottom padding-left} 3 边框宽度{border-border-top-width border-right-width border-bottom-widthborder-left-width} 宽度值:thin|medium|thick|数值 4 边框颜色{border-color:数值数值数值数值} 数值:分别代表top、right、bottom、left颜色值 5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove} 6 边 框{border:border-width border-style color} 上边框{border-top:border-top-width border-style color} 右边框{border-right:border-right-width border-style color} 下边框{border-bottom:border-bottom-width border-style color} 左边框{border-left:border-left-width border-style color} 7 宽 度 {长度|百分比| auto} 8 高 度 {height:数值|auto} 9 漂 浮{float:left|right|none} 10 清 除{clear:none|left|right|both} 四:分类列表 1 控制显示{display:none|block|inline|list-item} 2 控制空白{white-space:normal|pre|nowarp} 3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none} 4 图形列表{list-style-image:URL} 5 位置列表{list-style-position:inside|outside} 6 目录列表 {list-style:目录样式类型|目录样式位置|url} 7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}