目录
语法: 元素名称{属性: 属性值; }如: div,p,h1,img,a,span,i,em,strong.b,ul,li,ol,li等
说明: 当有多个选择符应用相同的声明时，可以将选择符用“,”分隔的方式，合并为一组.
用法: 当我的元素存在父圾元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式辉决.
0027 CSS-内部样式表
- 英文全名: cascading style sheets(百度百科)=== cascading style sheet层叠样式表WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制简单说就是如何修饰网页信息的显示样式
- 目前推荐遵循的是W3C发布的CSS3.0
- 用来表现XHTML或者XML等样式文件的计算机语言。
- 1998年5月21日由w3C正式推出的css2.0
CSS语法
每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值
2) 属性必须放在花括号中，属性与属性值用冒号连接。
3) 每条声明用分号结束。
4) 当一个属性有多个属性值的时候，属性值与属性值不分先后顺序用空格隔开
5) 在书写样式过程中，空格、换行等操作不影响属性显示
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
h1{
color: red;
}
h2{
color: green;
}
h3{
color: blue;
}
</style>
</head>
<body>
<h1>1111111</h1>
<h2>22222222</h2>
<h3>33333333</h3>
</body>
</html>0028 CSS-外部样式表
扩展知识点: link和import之间的区别?
- 差别1: 本质的美别: link属于XHTML标签，而@import完全是CSS提供的一种方式
- 差别2: 加载顺序的差别: 当一个页面被加载的时候(就是被浏览者浏览的时候)，ink引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式 (就是闪烁)，网速慢的时候还挺明显。
- 差别3:兼容性的差别: @impot是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
0029 CSS-行内样式表
0030 样式表的优先级
- 就近原则：行内>内部>外部
- 可以在其样式后分号或其他符号前加”!important”来提高优先级。
0031 标签选择器
为什么要用选择器?
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器
元素选择符/类型选择符 (element选择器) 如: div{width:10px; height:100px; background:red;}
语法: 元素名称{属性: 属性值; }如: div,p,h1,img,a,span,i,em,strong.b,ul,li,ol,li等
说明:
- 元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例body、div、p,img,em,strong,span....等.
- 所有的页面元素都可以作为选择符;
用法:
1)如果想改变某个元素得默认样式时，可以使用类型选择符:
(如:改变一个div、p、h1样式)
2）当统一文档某个元素的显示效果时，可以使用类型选挥符
(如: 改变文档所有p段落样式)
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div{
background-color: yellow;
color: red;
}
h1{
color: blue;
}
</style>
</head>
<body>
<div>1111111111</div>
<div>2222222222</div>
<h1>111111111</h1>
<p>1111111111</p>
</body>
</html>
0032 类选择器
class选择器/类选择器
语法:class名{属性: 属性值:}
说明:
A)当我们使用class选择符时，应先为每个元素定义一个class名称
B)class选挥符的语法格式是:
如:<div class="top"></div>
.top{width:200px; height:100px; background:green;}
用法: class选择符更适合定义一类样式;
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.ibm{
background-color: blue;
}
.qianfeng{
color: red;
}
</style>
</head>
<body>
<div>1111</div>
<div class="ibm qianfeng">22222</div>
<div class="ibm">333333333</div>
<div class="ibm">444444</div>
<div>5555</div>
<div>6666</div>
</body>
</html>0033 id选择器
id选择器
语法: #id名{属性: 属性值;}
说明:
A)当我们使用id选择符时，应该为每个元素定文一个id属性
如: <div id="box”></div>
B) id选择符的语法格式是“#”加上自定义的id名
如: #box{width:300px; height 300px;}
C)起名时要取英文名，不能用关键字:(所有的标记和属性都是关键字)
如: head标记
- 一个id名称只能对应文档具体的元素对象。(唯一性)
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
#box1{
background-color: yellow;
}
#box2{
background-color: red;
}
#box3{
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">11111111</div>
<div id="box2">2222222222</div>
<div id="box3">3333333333</div>
</body>
</html>0034 通配符选择器
*通配符/通配选择器
语法:*{属性: 属性值;}
说明: 通配选择符的写法是“*” ，其含文就是所有元素.
*{margin:0; padding;0;}代表清除所有元素的默认边距值和填充值;
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
*{
/* 外边距 */
margin:0;
padding: 0;
/* 内边距 */
}
</style>
</head>
<body>
<h1>标题</h1>
<div>1111111</div>
<ul>
<li>1111</li>
<li>22222222</li>
<li>333333</li>
</ul>
</body>
</html>0035 群组和后代选择器
群组选择器
语法: 选择符1，选择符2，选择符3.....{性: 性值} 例: #top1,#nav1, h1{width:960px;}
说明: 当有多个选择符应用相同的声明时，可以将选择符用“,”分隔的方式，合并为一组.
margin:0 auto;实现盒子的水平居中
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* div{
background-color: yellow;
}
p{
background-color: yellow;
}
h1{
background-color: yellow;
} */
div,p,h1{
background-color: yellow;
}
</style>
</head>
<body>
<div>1111111</div>
<p>1111111111111</p>
<h1>11111111111</h1>
</ul>
</body>
</html>包含选择器/后代选择器
语法: 选择符1 选择符2 {属性: 属性值;}
说明: 含义就是选择符1中包含的所有选择符2:
用法: 当我的元素存在父圾元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式辉决.
如: 结构: <ul class="list”>
<li></li>
<li></li>
<li></Ii>
</ul>
样式 : .list li{background:red;}
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div p{
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>1111111111111</p>
</div>
<p>1111111111</p>
</ul>
</body>
</html>0036 伪类选择器
伪类选择器
语法
a:link{属性:属性值;}超链接的初始状志;
a:visited{属性: 属性值;}超链接被访问后的状态;
a:hover{属性: 属性值;}鼠标悬停，即鼠标划过超链接时的状态
a:active{属性: 属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
Link--visited--hower--active.
说明:
A)当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为:a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链授的样式失效;
B)为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中;
例如: a{color:red;} a:hover{color:green;} 表示超链接的切始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* 未访问过的 */
a:link{
color: yellow;
}
/* 访问之后的 */
a:visited{
color: red;
}
/* 鼠标移上去的 */
a:hover{
color: orange;
}
/* 点击激活 */
a:active{
color: green;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>0037新闻导航案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* a:link{
background-color: black;
color: white;
}
a:visited{
background-color: black;
color: white;
}
a:hover{
background-color: red;
}
a:active{
background-color: red;
} */
a{
background-color: black;
color: white;
}
a:hover{
background-color: red;
}
.home{
background-color: red;
}
</style>
</head>
<body>
<a href="" class="home">首页</a>
<a href="">国内</a>
<a href="">国际</a>
<a href="">军事</a>
<a href="">财经</a>
</body>
</html>0038 选择器的权重
当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择权重高的来执行
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
#iddiv{
background-color: blue;
}
.cdiv{
background-color: red;
}
div{
background-color: yellow;
}
/* Id选择器的权重>class选择器的权重>元素选择器的权重 */
</style>
</head>
<body>
<div class="cdiv" id="iddiv">11111111111111111111</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
