文章目录
0.谷歌浏览器开发者工具
快捷键F12 进入开发者工具
Elements 中可以查看当前页面的所有代码。
1. CSS三大特性
1.1继承性
给父元素设置的属性，后代元素也可以使用。
注意：
1.并不是所有的数学都可以继承，
只有以color、font-、text-、line开头的属性踩可以继承。
2.继承性中的特殊性
a标签文字颜色，下划线，不会继承。
h标签的文字大小不会继承。
应用场景：
一般用于设置网页上工性信息，如文字、颜色、字体，文字大小等。
body{
属性：值}
div标签：一般用于配合css完成网页的基本布局。一个div为一个区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承性</title>
<style>
div {
color: red;
font-size: 20px;
background: #848b8b;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<p>xxx</p>
</div>
<div>
<ul>
<li>
<p>xxx</p>
</li>
</ul>
</div>
<div>
<a href="">xxx</a>
</div>
<div>
<h1>大标题</h1>
</div>
</body>
</html>
Inherited from div 继承自div
颜色鲜艳的是继承
灰暗 删除线是不继承
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3qcyD51l-1638928899348)(C:/Users/13600/AppData/Roaming/Typora/typora-user-images/image-20211016151350210.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lc8W90sG-1638928899349)(C:/Users/13600/AppData/Roaming/Typora/typora-user-images/image-20211016151446909.png)]
1.2层叠性
CSS处理选择器冲突的一种能力。
注意：
层叠性只有在多个选择器选中同一个标签，然后设置了相同的属性，才会发生层叠性。
CSS全称为Cascading StyleSheet 层叠式样式表、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠性</title>
<style>
p {
color: red;
}
.colorR {
color: aqua;
}
</style>
</head>
<body>
<p class="colorR">段落</p>
</body>
</html>
1.3优先级
层叠性需要优先级来确定。
优先级判断的三种方式：
1.是否直接选中
直接选中：通过标签，id,类名 通配符 查找。
间接选中：继承、
如果是间接选中，那么谁离目标标签比较近就谁优先。
2.相同选择器(直接选中)
如果都是直接选中的，选择器相同，那么写在后面的优先。
3.不同选择器(直接选中）
如果都是直接选中，选择器不相同，那么按选择器的优先级来层叠。
id>类>标签>通配符>继承>浏览器默认
1.间接选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优先级(间接选中))</title>
<style>
li {
color: aqua;
}
ul {
color: red;
}
</style>
</head>
<body>
<ul>
<li>
<p>xxx</p>
</li>
</ul>
</body>
</html>
2相同选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相同选择器</title>
<style>
p {
color: red;
}
p {
color: aqua;
}
</style>
</head>
<body>
<p>xxx</p>
</body>
</html>
3不同选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不同选择器</title>
<style>
ul {
color: red;
}
* {
color: aqua;
}
p {
color: orange;
}
.c1 {
color: blue;
}
#d1 {
color: greenyellow;
}
</style>
</head>
<body>
<ul>
<li>
<p id="d1" class="c1">xxx</p>
</li>
</ul>
</body>
</html>
4提升优先级
!important优先级提升
用与提升某个直接选中标签的选择器中的某个属性的优先级，提升为最高。
注意：
只能用于直接选中，不能用于间接选中。
只提升被指定的属性优先级，其它的属性优先级不会被提升。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提升优先级</title>
<style>
ul {
color: red;
}
* {
color: aqua !important;
font-size: 10px;
}
p {
color: orange;
}
.c1 {
color: blue;
}
#d1 {
color: greenyellow;
font-size: 60px;
}
</style>
</head>
<body>
<ul>
<li>
<p id="d1" class="c1">xxx</p>
</li>
</ul>
</body>
</html>
5优先级的权重
当多个选择器混合在一起使用，需要通过计算权重来判断谁的优先级高。
权重计算：
1.先后计算选择器中的id,id多的优先
2.id个数一样，计算类名的格式，类名多的优先
3.类名个数一样，计算标签名称的格式，标签名称多的优先
4.如果id/类名/标签名称都一样，不会再计算，谁在后面，谁优先。
注意：
只能用于直接选中。
1.id多的优先
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id多的优先</title>
<style>
#d1 #d2 {
color: red;
}
.c1 .c2 {
color: orange;
}
div p {
color: greenyellow;
}
</style>
</head>
<body>
<div id="d1" class="c1">
<ul>
<li>
<p id="d2" class="c2">xxx</p>
</li>
</ul>
</div>
</body>
</html>
2.类名多优先
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类名多优先</title>
<style>
#d1 .c2 {
color: red;
}
#d1 p {
color: orange;
}
</style>
</head>
<body>
<div id="d1" class="c1">
<ul>
<li>
<p id="d2" class="c2">xxx</p>
</li>
</ul>
</div>
</body>
</html>
3.标签名多优先
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签名多优先</title>
<style>
#d1 ul li p {
color: red;
}
#d1 p {
color: orange;
}
</style>
</head>
<body>
<div id="d1" class="c1">
<ul>
<li>
<p id="d2" class="c2">xxx</p>
</li>
</ul>
</div>
</body>
</html>
4.个数都相等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个数都相等</title>
<style>
#d1 ul .c2 {
color: red;
}
.c1 ul #d2 {
color: orange;
}
</style>
</head>
<body>
<div id="d1" class="c1">
<ul>
<li>
<p id="d2" class="c2">xxx</p>
</li>
</ul>
</div>
</body>
</h
2.div/span标签
div标签：一般用于配合css完成网页的基本布局。
span标签： 一般用于配合css完成网页中的局部信息。
div会独占一行，span不会独占一行。
div标签是一个容器级标签，span是一个文本级标签。
容器级标签中可以嵌套其它所有标签。
容器级标签：div h ul ol li ···
文本级标签中只能嵌套文字/超超链接/图片标签。
文本级标签：span p em ins del ···
2.1div标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div标签</title>
<style>
.header {
height: 100px;
width: 1900px;
background: red;
}
.content {
height: 750px;
width: 1900px;
background: aqua;
}
.footer {
height: 100px;
width: 1900px;
background: blue;
}
.logo {
height: 50px;
width: 200px;
background: #000;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
</div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
2.2span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span标签</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
<p>今天天气 <span>晴</span>，<span>18°</span></p>
</body>
</html>
2.3错误示范
文本级标签p嵌套容器级标签h。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>错误示范</title>
</head>
<body>
<p>
段落1
<h1>标题</h1>
</p>
</body>
</html>
可以正常显示，但是层级结构该表了。使用开发者工具查看：
<p>段落1</p>
<h1>标题</h1>
3.元素的显示模式
HTML将所有的标签分为：容器级标签 与 文本级标签。
CSS将所有的标签分为：块级元素 与 行内元素、行内块元素。
块级元素：独占一行。（所有的容器级标签都是块级元素， p标签为块级标签）
如果没有设置宽，那么默认和父元素一样宽。
如果设置宽高，那么按设置的来显示。
行内元素：不独占一行。（所有的文本级标签都是行内元素，p标签除外）
行内元素无法设置宽，默认和内容一样宽。
行内块元素：不独占一行可以设置宽高。（img标签）
每个标签都有一个display属性，
设置display属性，可以让元素的模式转换。
值：
inline; 行内元素
block; 块级元素
inline-block; 行内块元素
快捷键：
d+tab disolay:block;
h100+tab height:100px;
w100+tab width:100px;
3.1块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级元素</title>
</head>
<body>
<div>div标签</div>
<h1>h标题</h1>
<p>p标签</p>
<ul>
<li>
ul>li标题标签
</li>
</ul>
</body>
</html>
3.2行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素</title>
</head>
<body>
<ins>aaa</ins>
<del>bbb</del>
<em>ccc</em>
<a href="#">网址</a>
<img src="" alt="图片">
</body>
</html>
3.3行内块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内块级元素</title>
<style>
img {
height: 300px;
width: 200px;
}
</style>
</head>
<body>
<img src="image/panda.jpg" alt="图片">
</body>
</html>
3.4元素显示模式转换
1.元素显示模式转换(转行内)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素显示模式转换(转行内)</title>
<style>
div {
display: inline;
height: 100px;
width: 100px;
background: red;
}
</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
</body>
</html>
2.元素显示模式转换(转块级)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素显示模式转换(转块级)</title>
<style>
span {
display: block;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
3元素显示模式转换(转行内块级)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素显示模式转换(转行内块级)</title>
<style>
div,span {
display: inline-block;
height: 100px;
width: 100px;
background: red;
}
</style>
</head>
<body>
<div>div标签</div>
<span>span标签</span>
</body>
</html>
4.练习(百度首页)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度首页</title>
<style>
body {
font-size: 18px;
color: #666;
}
div {
text-align:center;
}
.header {
height: 300px;
}
.content {
height: 300px;
}
.footer {
height: 300px;
}
.logo {
height: 250px;
width: 500px;
}
.location {
height: 15px;
width: 20px;
}
.logoH {
height: 250px;
}
input[type=text] {
width: 400px;
height: 30px;
}
input[type=submit] {
width: 100px;
height: 30px;
}
.bd {
height: 60px;
}
.bk {
height: 170px;
}
.footerH {
height: 60px;
}
</style>
</head>
<body>
<div class="header">
<div class="logoH">
<img src="image/logo.jpg" alt="" class="logo">
</div>
<div>
<a href="#">新 闻</a>
<strong>网 页</strong>
<a href="#">贴 吧</a>
<a href="#">知 道</a>
<a href="#">音 乐</a>
<a href="#">图 片</a>
<a href="#">视 频</a>
<a href="#">地 图</a>
</div>
</div>
<div class="content">
<div class="bd">
<form action="">
<input type="text">
<input type="submit" value="百度一下">
</form>
</div>
<div class="bk">
<a href="">百科</a>
<a href="">hao123</a>
|
<a href="">更多>></a>
</div>
<div>
<img src="image/location.png" alt="" class="location">
<a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>
</div>
</div>
<div class="footer">
<div class="footerH">
<a href="#">把百度设为首页</a>
<a href="#">安装百度卫士</a>
</div>
<div class="footerH">
<a href="#">加入百度推广</a>
|
<a href="#">搜索风云榜</a>
|
<a href="#">关于百度</a>
|
<a href="#">About Baidu</a>
</div>
<div class="footerH">
©2016 Baidu 使用百度前必读 京ICP证666号
</div>
</div>
</body>
</html>