前端必备之CSS(一)
CSS 是 Cascading Style Sheet 的缩写,翻译为 “层叠样式表”。CSS定义如何显示HTML的标签样式,用于呈现网页效果。使用CSS可以实现网页内容与表现的分离,极大地提高了工作效率。
【学习重点】
- 掌握基本语法与用法
- 能够正确使用CSS选择器
1.1 CSS基本用法
1.1.1 css样式
样式是CSS最小的结构单元,每个样式包含两部分内容,选择器和声明(规则),如图所示。
1.1.2 CSS注释
html 的注释是 //行注释 快捷键 ctrl+?
css 注释方式仅有 /* 被注释的内容 */ 快捷键 ctrl+?
注释可以用来调节 bug,注释一行,调试一行
1.1.3 CSS应用
CSS样式代码必须保存在.css 类型的文本文件中,或者放在网页内<style>标签中,或者插在网页标签的 style 属性值中。CSS样式应用方法主要包括4种:行内样式、内嵌样式、链接样式以及导入样式。
1、行内样式
行内样式就是把CSS样式直接放在代码内的标签中,一般都放入标签的style 属性中,由于行内样式直接插入标签中,故是一种最直接的方式,同时也是修改最不方便的样式。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> <h1 style='color:#f00;'>linux is very much!</h1> <h1 style='color:#00f;'>linux is very much!</h1> </body> </html>
2、内嵌样式
内嵌样式通过将CSS写在网页源文件的头部,即在<head>中,通过使用HTML的<style>标签中将其包围,其特点是:该样式只能在此页面中应用,解决行内样式多次书写的弊端。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <!-- style标签中专门用来放置样式 --> <style> /*标签选择器*/ *{ font-family: 微软雅黑; } h1{ color:#f00; } </style> </head> <body> <h1>linux is very much!</h1> <h1>linux is very much!</h1> </body> </html>
3、链接样式
链接样式通过HTML的<link>标签,将外部样式表的文件链接到HTML文档中,这也是网站应用最多的方法,同时也是最实用的方式。这种方法将HTML文档和CSS文件完全分离,实现结构层和表示层的彻底返利,增强网页结构的扩展性和CSS样式的可维护性。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="index.css"> </head> <body> <h1>linux is very much!</h1> <h1>linux is very much!</h1> </body> </html>
4、导入样式
导入样式使用@import命令,在内部样式表中导入外部样式表。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> @import url(index.css); h1{ color:#aaf; } </style> </head> <body> <h1>linux is very much!</h1> <h1>linux is very much!</h1> </body> </html> 注意:@import url(index.css);必须写在h1{}前面,不然无效,要置顶
提示:
两种导入样式表的方法比较:
link属于HTML标签,而@import是css提供的。
页面被加载时,同时下载link链接的css文件与html结构(异步),而@import引用的CSS会等到页面被脚在完成再加载(同步)。
@import 在IE5以上才能识别,而link是html标签,我兼容性问题。
link权重高于@import
以上四种样式的优先级为:行内样式>内嵌样式>链接样式>导入样式;
1.1.4 CSS权重
根据上面计算规则,计算下面权重值
1 <style type="text/css"> 2 h3{color:#ff7300;} /*加权值=1分*/ 3 .f14{font-size:14px;} /*加权值=10分*/ 4 #head{width:960px;} /*加权值=100分*/ 5 h3 .f14{font-weight:bold;} /*加权值=1分+10分=11分*/ 6 #head h2{border:1px solid #ff73;} /*加权值=100分+1分=101分*/ 7 div p{padding:0 10px;} /*加权值=1分+1分=2分*/ 8 div #head{margin:0 auto;} /*加权值=1分+100分=101*/ 9 #head h2 span{float:right;} /*加权值=100分+1分+1分=102分*/ 10 #head .f14 em{float:right;} /*加权值=100分+10分+1分=111分*/ 11 #head .f14 span em{float:right;} /*加权值=100分+10分+1分+1分=112分*/ 12 #head div h2 .f12 span em{color:#000;} /*加权值=100分+1分+1分+10分+1分+1分=114分*/
2.1 CSS选择器
CSS通过选择器控制html元素,CSS选择器对网页对象可以实现一对一、一对多或者多对一的匹配。
2.1.1 基本选择器
1、标签选择器
标签选择器直接引用HTML标签名称,也称为类型选择器,类型选择器规定了网页元素在页面默认的显示样式。因此,标签选择器可以快速,方便的控制页面标签的默认样式效果。
p { font-size: 12px; /* 字体大小为12像素 */ color: red; /* 字体颜色为红色 */ }
2、类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。
在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作。为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。
<style type="text/css"> .font18px {/* 字体大小类 */ font-size:18px; /* 字体大小为18像素 */ } .underline {/* 下划线类 */ text-decoration:underline; /* 字体修饰为下划线 */ } .italic {/* 斜体类 */ font-style:italic; /* 字体样式为斜体 */ } </style> <p class="underline">问君能有几多愁,恰似一江春水向东流。</p> <p class="font18px italic underline">剪不断,理还乱,是离愁。别是一般滋味在心头。</p> <p class="italic">独自莫凭栏,无限江山,别时容易见时难。流水落花春去也,天上人间。</p>
3、ID选择器
ID选择器以井号(#)作为前缀,然后是一个自定义的ID名。应用ID选择器可以使用id属性来实现。只要在标签中定义id属性,然后把改属性设置为事先定义好的ID选择器名称即可。
<style type="text/css"> #box {/* ID样式 */ background:url(images/2.jpg) center bottom; /* 定义背景图像并居中、底部对齐 */ height:200px; /* 固定盒子的高度 */ width:400px; /* 固定盒子的宽度 */ border:solid 2px red; /* 边框样式 */ padding:100px; /* 增加内边距 */ } </style> <div id="box">问君能有几多愁,恰似一江春水向东流。</div>
4、通配符选择器
如果HTML 所有元素都需要定义相同的样式,这是不妨使用通配符选择器。通配符选择器是固定的,用(*)来表示。
<style type="text/css"> * { margin: 0; padding: 0; } </style>
2.1.2 组合选择器
当把两个或多个基本选择器组合在一起,就形成了一个复杂的选择器,通过组合和选择器可以精确匹配页面元素,CSS提供了多种组合基本选择器的方式。
1、包含选择器
包含选择器通过空格标识符来表示,前面的一个选择器表示包含框对象的选择器 , 而后面表示为被包含的选择器。
<style type="text/css"> #header p { font-size:14px;} #main p {font-size:12px;} </style> <div id="header"> <p>头部区域第1段文本</p> <p>头部区域第2段文本</p> <p>头部区域第3段文本</p> </div> <div id="main"> <p>主体区域第1段文本</p> <p>主体区域第2段文本</p> <p>主体区域第3段文本</p> </div>
2、子选择器
子选择器是指父元素所包含的子元素。子选择器使用尖括号(>)表示。
<style type="text/css"> span { /* span元素的默认样式 */ font-size:12px; } div > span { /* div元素包含的span子元素的默认样式 */ font-size:24px; } </style> <h2> <span>HTML文档树状结构</span> </h2> <div id="box"> <span class="font24px">问君能有几多愁,恰似一江春水向东流。</span> </div>
3、相邻选择器
相邻选择器,通过加号(+)分隔符进行定义。其前后选择符的关系是兄弟关系,即在HTML中,两个标签前为兄后为弟,否则样式无法应用。
<style type="text/css"> p+h3 { background-color: #0099FF; /* 设置背景色 */ } </style> <div class="header"> <p>相邻选择器</p> #p同级后面的h3就只有相邻的一个 <h3>通过p控制h3</h3> </div>
4、兄弟选择器
CSS3增加的一种新的选择器,它通过波浪号(~)分隔符进行定义。其基本结构是第一个选择器指定同级前置元素,后面的选择器指定指定其后所有匹配元素,前后选择符关系必须是兄弟关系。
<style type="text/css"> p ~ h3 { background-color: #0099FF; /* 设置背景色 */ } </style> <div class="header"> <p>兄弟选择器</p> #p同级后面所有的h3 <h3>11111111</h3> <h3>22222222</h3> <h3>33333333</h3> </div>
5、分组选择器
分组选择器通过逗号(,)进行分割定义。其基本结构是第一个选择器指定的匹配元素,后面的的选择器指定另一个匹配元素,最后把前后选择器匹配的元素都取出来。
<style type="text/css"> h1, h2, h3, h4, h5, h5, h6 { background-color: #99CC33; /* 设置背景色 */ margin: 0; /* 清除标题的默认外边距 */ margin-bottom: 10px; /* 使用下边距拉开各个标题之间的距离 */ } </style> <h1>h1元素<span>这里是span元素</span></h1> <h2>h2元素<span>这里是span元素</span></h2> <h3>h3元素<span>这里是span元素</span></h3> <h4>h4元素<span>这里是span元素</span></h4> <h5>h5元素<span class="S1">这里是span元素</span></h5> <h6>h6元素<span class="S2">这里是span元素</span></h6>
2.1.3 属性选择器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> *{ font-family: 微软雅黑; } h1[class]{ #指定了属性名,但没有确定属性值 color:#aaf; } h1[id][class]{ #指定了多个属性名,但都没有确定属性值 background: #aaf; } h1[id ^= "f1"]{ #id属性以f1开头的 background: #aaf; } h1[id $= "id2"]{ #id属性以id2结尾的 background: #aaf; } h1[id *= "f2"]{ #id属性包含f2的 background: #aaf; } h1[id |= "f3"]{ #id属性值是f3或者以f3- 开头的值 background: #aaf; } </style> </head> <body> <h1 id='f1-id1'>111111111111111111111</h1> <h1 id='f2-id2' class='h1-class2'>222222222222222222222</h1> <h1 id='f3-id3'>333333333333333333333</h1> <h1>444444444444444444444444</h1> </body> </html>
2.1.4 伪类选择器
CSS伪类是用来添加一些选择器的特殊效果。
语法:selector:pseudo-class {property:value;}
其中selector表示选择器,pseudo-class 为伪类名称,property是CSS属性,value为CSS的属性值。
1、动态伪类
动态伪类是一类行为类样式,这些伪类并不存在HTML中,只有当用户与页面进行交互时才能体现出来,动态伪类选择器包括两种形式:
锚点伪类,这是一种在链接中常见的的样式,如 :link,:visited.
行为伪类,也称为用户操作伪类,如 :hover 、:active、:focus.
:focus用于元素成为焦点时的样式效果,常用于表单元素上
a:link {color:gray;} /* 链接未访问时前景色为灰色 */ a:visited {color:yellow;} /* 链接被访问后前景色为黄色 */ a:hover {color:green;} /* 鼠标悬浮在链接上时前景色为绿色 */ a:active {color:blue;} /* 鼠标点击链接那一下前景色为蓝色*
提示:对于这四个伪类要想全部生效,那么就要设置它们的先后顺序,要让他们遵循一个爱恨原则 l(:link)ov(:visited)e-h(hover)a(:active)te
2、结构伪类
- :first-child 选择某个元素的第一个子元素
- :last-child 选择某个元素的最后一个子元素
- :nth-child() 选择某个元素的一个子或多个特定的子元素
- :nth-last-child 选择某个元素的一个子或多个特定的子元素,从这个元素的最后一个子元素开始计算
- :nth-of-child 选择指定的元素
- :nth-last-of-child 选择指定的元素,从元素的最后一个开始计算
- :fist-of-type 选择一个上一级元素下的第一个同类子元素
- :last-of-type 选择一个上一级元素下的最后一个同类子元素
- :only-child 选择的元素是它的父元素的唯一一个子元素
- :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素
- :empty 选择的元素里面没有任何内容
更新中。。。