二、CSS基础语法
1.如何应用CSS样式
- 行内样式(内联样式):在开始标签内添加style样式属性
- 内部样式表(嵌入样式)
- 外部样式表
- 导入式
2.样式的优先级
行内样式>内部样式>外部样式
说明!!
(1)链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
(2)最后定义的优先级最高,就近原则
3.CSS选择器
- 标签选择器
- 类选择器
- ID选择器
- 全局选择器
- 群组选择器
- 后代选择器
4.伪类
-伪类选择器定义特殊情况状态下的样式
-无法用标签、id、class以及其他属性实现
-伪类链接的四种状态:激活(:active)、已访问(:visited)、未访问(:link)和鼠标悬停状态(:hover)
-:hover用于访问鼠标经过某个元素时,:active用于一个元素被激活时(按下鼠标之后放开鼠标之前的时间)
-ie6以及更早版本,支持a元素的4种状态
-ie6浏览器不支持其他元素的:hover和:active
-链接伪类的顺序是link>visited>hover>active
说明:hover必须置于link和visited之后才有效;active必须置于hover之后才有效;伪类名称对大小写不敏感。
5.css层叠
- 可以定义多个样式
- 不冲突的时候,多个样式可层叠为1个
- 冲突时,按不同样式规则优先级来应用样式
6.css优先级
- 同一样式表中:
(1)权值相同-就近原则(离被设置元素越近优先级越高)
(2)权值不同-根据权值来判断CSS样式/哪种CSS样式权值高,就用哪种样式
(3)选择器权值 - 标签选择器:权值为1
- 类选择器和伪类:权值为10
- ID选择器:权值为100
- 通配符选择器:权值为0
- 行内样式:权值为1000
(4)权值规则 - 统计不同选择器的个数
- 每类选择器的个数乘以相应权值
- 把所有的值相加得出选择器的权值
#main div.warning h2{…}
选择器 | 权值 |
---|---|
id:1 | 1*100=100 |
class:1 | 1*10=10 |
标签:2 | 2*1=2 |
权值 | 100+10+2=112 |
(5)!important规则
- 可以调整样式规则的优先级
- 添加样式规则之后,中间用空格隔开
(6)css优先级总结 - !important声明最高
- css使用样式的优先级:行内样式>内部样式>外部样式 注意:link链入外部样式和style内部样式优先级,取决于先后顺序。
- 样式表中的优先级:id选择器>class选择器>标签选择器>通配符
- 权值相同->就近原则;权值不同->使用权值高的
7.css样式命名规则
- 采用英文字母、数字以及”-“和”_“命名
- 以小写字母开头,不能以数字和“-”、“_”开头
- 命名形式:单字、连字符、下划线和驼峰
- 使用有意义的命名
8.常用的css样式命名
(1)页面结构
- 页头:header
- 页面主题:main
- 页尾:footer
- 内容:content/container
- 容器:container
- 导航:nav
- 侧栏:sidebar
- 栏目:column
- 页面外围控制:wrapper
- 左右中:left、right、center
(2)导航 - 导航:nav
- 主导航:mainnav
- 子导航:subnav
- 顶导航:topnav
- 边导航:sidebar
- 左导航:leftsidebar
- 右导航:rightsidebar
- 菜单:menu
- 子菜单:submenu
- 标题:title
- 摘要:summary
(3)功能 - 标志:logo
- 广告:banner
- 登录:login
- 登录条:loginbar
- 注册:register
- 搜索:search
- 功能区:shop
- 标题:title
注意:id不能滥用,谨慎使用;适当的使用class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪类选择器</title>
<style type="text/css">
/* a:link{color:blue}/*未访问状态*/
/*a:visited{color: gray;}/*已访问状态*/
/*a:hover{color:green}/*鼠标悬浮状态*/
/*a:link{color: orange;}/*激活状态*/
/* a.one:link{color: rgb(0, 102, 255);}
a.one:visited{color:rgb(51, 128, 0);}
a.one:hover{color: palevioletred;}
a.one:active{color:darkgrey;}
a.two:link{color: blue;}
a.two:visited{color: green;}
a.two:hover{color: red;}
a.two:active{color: gray;} */
p a:link{color: rgb(0, 102, 255);}
p a:visited{color:rgb(51, 128, 0);}
p a:hover{color: palevioletred;}
p a:active{color:darkgrey;}
div a:link{color: blue;}
div a:visited{color: green;}
div a:hover{color: red;}
div a:active{color: gray;}
p:hover{color: red;}
p:active{font-size: 20px;}
</style>
</head>
<body>
<p><a href="http://www.imooc.com" target="_blank" class="one">css使用方法</a></p>
<div><a href="http://coding.imooc.com" target="_blank" class="two">css选择器</a></div>
<p>慕课</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css选择器</title>
<style type="text/css">
/*全局选择器*{color: pink;}*/
p,special,#three,h1{font-size: 30px;}
p{color: crimson;}/*通过标签选择器设置样式,使用该标签的内容都引用该样式0*/
.special{color: darkgreen;}
/*p.special{font-size: 30px;}*/
.one{text-decoration: underline;}/*文字修饰样式属性*/
#two{color: darkslateblue;}
/*#three{font-size: 15px;}
h1{font-size: 30px;}*/
p em{color: plum;}
h1.special em{color: orange;}
#two em{color:yellow}
h1 em{color: tomato;}
</style>
</head>
<body>
<h1 class="special">css使用方法</h1>
<p><em>css</em>叠层样式</p>
<P class="special one">用于定义HTML内容在浏览器中显示样式</P>
<P><em>css</em>样式由选择器和声明组成</P>
<div>
<h1 id="two"><em class="two1">css</em>使用方法</h1>
<ul id="three">
<li>行内样式</li>
<li>内部样式</li>
<li>外部样式</li>
<li>导入式</li>
</ul>
<h1><em>css</em>选择器</h1>
<ul>
<li>类型选择器</li>
<li>ID选择器</li>
<li>class选择器</li>
<li>后代选择器</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css使用方法优先级</title>
<style type="text/css">
/**{color:black}*//*0*/
b{color: purple;}/*权值1*/
p b{color: yellow !important;}/*权值2,!important优先级最高*/
.classblue{color: blue;}/*10*/
#test1 p b {color: orange;}/*10*10+2*/
div p.classblue{color: red;}/*10+2*/
div #test2 b{color: green;}/*2标签2id=102*/
/*权值相同采用就近原则*/
/* div{color: greenyellow;}
#idgreen{color: green;}
.classblue{color: blue;}
.classyellow{color: yellow;} */
/*@import url("demo1.css");/*依旧是行内>内联>导入*/
/*p{color: crimson;}/*行内优先级内联*/
</style>
<!--<link rel="stylesheet" type="text/css" href="demo2.css"><--外部式-->
<!--外部链接导入和行内优先级取决哪个离body更近,就近原则-->
</head>
<body>
<p>派生选择器优先级</p>
<div id="test1">
<h1>css样式优先级</h1>
<p id="test2">所谓<b class="classblue">css优先级</b>,指css样式在浏览器中被解析的先后顺序</p>
<div><b>权值相同</b>,就近原则;<b>权值不同</b>,哪个权值高,使用哪个</div>
</div>
<!-- <p>单独使用</p>
<div>使用标签选择器样式</div>
<div id="idgreen">使用ID样式"绿色"</div>
<div class="classblue">使用class样式"蓝色"</div> -->
<!--id>class>标签-->
<!-- <div class="classblue classyellow">蓝色在前,黄色在后</div>
<div class="classyellow classblue">黄色在前,蓝色在后</div> -->
<!--class发生冲突的时候采用就近原则,显示黄色-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css继承和层叠</title>
<style type="text/css">
/* p{color: hotpink;} */
/* div{font-size: 12px;border: 1px solid palevioletred;} */
/* body,table,tr,td{font-size: 12px;} */
h1{color: palegreen;}
h1{color: palevioletred;}/*就近原则,显示此颜色*/
h1{font-size: 12px;}
</style>
</head>
<body>
<!-- <div>
<p><span>css继承</span></p>
<div>css层叠</div>
</div> -->
<h1>css继承和层叠</h1>
<!-- <table border="1">
<tr>
<td>css继承</td>
<td>css层叠</td>
</tr>
</table> -->
</body>
</html>