Html第五天
一 css进阶
1.1选择器
CSS选择器 是CSS中的一种语法 用来更好更快的选取页面元素
第一种 统配符选择器
语法规则： * {}
选取内容： 全部标签
代码示例：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {color: red;}
</style>
</head>
<body>
<div>123</div>
<p>345</p>
<span>789</span>
</body>
应用场景： 经常用来清除标签的 默认的外边距 和 内填充
* {margin: 0;padding: 0;}
这是以前的写法 现在换成了这种写法 blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
第二种 标签选择器
语法规则： 标签名 {}
选取内容： 该标签名对应的所有标签
代码示例：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {color: red;}
</style>
</head>
<body>
<div>123</div>
<div>123</div>
<div>123</div>
<p>345</p>
<span>789</span>
<ul>
<li>123123</li>
<li>123123</li>
<li>123123</li>
</ul>
</body>
应用场景：用来对某一种标签进行样式设定 例如 a标签集体去掉下划线
a {text-decoration: none;}
ul,ol { list-style: none;}
第三种 类选择器
语法规则： .类名 {}
选取内容： 该类名对应的所有标签
代码示例：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
a {text-decoration: none;}
ul,ol { list-style: none;}
div {color: red;}
.haha {background-color: yellow;}
</style>
</head>
<body>
<div>123</div>
<div>123</div>
<div class="haha">123</div>
<p>345</p>
<span class="haha">789</span>
<a href="">123123123</a>
<ul>
<li>123123</li>
<li>123123</li>
<li>123123</li>
</ul>
</body>
注意一个标签可以有多个类 多个标签可以属于同一个类
应用场景： 用来对同一类标签进行样式的设定
第四种 id选择器
语法规则： #id名 {}
选取内容： 该id名对应的标签 因为id是唯一标识符 相当于身份证号 所以标签的id不能重复 （CSS中如果id重复能行 但是js就会出问题）
代码示例：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
a {text-decoration: none;}
ul,ol { list-style: none;}
div {color: red;}
.haha {background-color: yellow;}
.hehe {font-size: 66px;}
#foo {color: blue;}
</style>
</head>
<body>
<div id="foo">123</div>
<div>123</div>
<div class="haha hehe">123</div>
<p>345</p>
<span class="haha">789</span>
<a href="">123123123</a>
<ul>
<li>123123</li>
<li id="foo">123123</li>
<li>123123</li>
</ul>
</body>
应用场景： css中有的时候使用 主要在js中使用
高级选择器： 高级选择器就是基本选择器再按照不同的规则组合
后代选择器
语法规则： 选择器1 选择器2 { }
选取内容： 选取再选择器1下面符合选择器2标准的内容
代码示例：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 需求 只对 123 456 操作 */
#foo .bar span {color: red;}
#foo span {background-color: blue;}
</style>
</head>
<body>
<div id="foo">
<div class="bar">
<span>123</span>
<span>456</span>
</div>
<span>789</span>
</div>
<span>159</span>
</body>
应用场景： css中有的时候使用 主要在js中使用
1.2选择器的优先级
CSS称之为 层叠样式表
在css设定样式的时候 如果遇到
1 多个选择器对同种标签添加不同样式 ： 叠加性原则
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#foo{color: red;}
.bar{background-color: blue;}
</style>
</head>
<body>
<div id="foo" class="bar">123</div>
</body>
2 多个选择器对同种标签添加相同样式： 权值大的优先 权值一样 就近原则
* 0
标签 1
类 10
id 100
行内
!important
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.haha{color: red;}
.bar{color: orange;}
#a1 {color: green !important ; }
</style>
</head>
<body>
<span id="foo" class="bar haha" >123</span>
<div id="a1" style="color: blue;">123</div>
</body>
1.3 背景属性
background 以前我们设定背景颜色
背景颜色：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>
你好世界
</div>
</body>
颜色的赋值 可以有三种形式：
1 英文单词
2 rgb red green blue 三原色
其他的颜色都可以通过这三种颜色按照不同的比例调和出来
background-color: rgb(255,255,0); 0-255
rgba a代表透明度 0-1 1代表不透明 0 全透明
background-color: rgba(255,255,255,0.3);
3 十六进制
background-color: #124578;
#124578 代表 12 红色 45 绿色 78 蓝色
特殊情况 如果是aabbcc的情况 可以简写成 abc
背景图片
我们在html中 要显示图片可以有两种方式： 1 img标签 2 任意标签设定背景图
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
width: 500px;
height: 500px;
border: 2px solid red;
background-image: url(img/bdbri.png);
background-repeat: no-repeat;
/* 300px 100px center center 30% 30%*/
background-position: 50% 50%;
/* 100px 100px*/
background-size: 100% 100%;
}
</style>
</head>
<body>
<div>你好 世界</div>
</body>
复合属性： 一个属性可以设定多个值 background
background: red url(img/bdbri.png) no-repeat center center / 100% 100% ;
多背景设定： 注意此时就不能设定颜色
background: url(img/bdbri.png) no-repeat center center / 10% 10% ,
url(img/01.jpg) no-repeat top left / 10% 10% ;
1.4 精灵图
精灵图： 特殊的图片 将一些小图标集中到一张图片中
为什么要将一群小图标 集中一张图片中？
这是为了网络请求更加快 所做的操作。例如 如果每个图标都是一个图片 此时一个网页需要大量图标 此时就需要发送多次请求 ，如果集中到一张图片中 则只请求一次即可。
精灵图片的使用：
1 测量图片的大小和位置
2 在代码中创建一个div标签 宽高是图标大小 调整背景图在标签的位置
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 15px;
height: 15px;
background: url(img/1.png) no-repeat -137px -126px;
}
</style>
</head>
<body>
<div></div>
</body>
二 盒子模型
1.1 什么是盒子模型
box model 翻译成中文叫做 盒子模型
盒子模型就是将标签 视为一个二维的盒子 包含的设定有 外边距 边框 内填充 内容
1.2 外边距
盒子模型的外边距指的是边框以外占据的空白区域
例如：黄色部分就是
使用 margin属性进行调整 可以设定四个位置
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 150px;
height: 150px;
background-color: blue;
margin-top: 100px;
margin-bottom: 200px;
margin-left: 60px;
margin-right: 80px;
}
</style>
</head>
<body>
<div></div>
<span>123123</span>
</body>
复合属性
margin： 上 右 下 左;
margin： 上 左右 下;
margin： 上下 左右;
margin： 上右下左;
实际应用场景：
1 调整标签之间的位置关系
2 位置居中 注意 能居中的才有居中一说
块级标签居中 margin: 0 auto;
行内标签 设定父标签的text-algin：center
外边距冲突
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 300px;
height: 200px;
background-color: black;
}
#foo{
margin-bottom: 150px;
}
#bar{
margin-top: 100px;
}
</style>
</head>
<body>
<div id="foo">123</div>
<div id="bar">123</div>
</body>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
span{
width: 300px;
height: 200px;
background-color: black;
}
#foo{
margin-right: 150px;
}
#bar{
margin-left: 100px;
}
</style>
</head>
<body>
<span id="foo">123</span>
<span id="bar">123</span>
</body>
上下冲突 取最大值 左右冲突 叠加
1. 3 边框
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
background-color: red;
width: 300px;
height: 300px;
border-top: 20px solid blue;
border-bottom: 30px dashed orange;
border-left: 40px double gray;
border-right: 50px groove black;
}
</style>
</head>
<body>
<div>123</div>
</body>
应用：
1 单独边框 下划线
2 输入框
1.3 内填充
内填充叫做 padding
指的是 内容到边框之间的空白区域 并且设定被填充会增大标签面积
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 5px solid green;
padding-top: 66px;
padding-left: 55px;
padding-bottom: 22px;
padding-right: 33px;
}
</style>
</head>
<body>
<div>123</div>
</body>
内填充也可以写一个值：
复合属性： padding 写多个值和margin一样的位置
实际应用：
1 让内容不贴边
2 设定居中
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
a{
background-color: black;
padding: 5px 10px;
border-radius: 5px;
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<a href="">你好世界</a>
</body>
三 总结
1.选择器
2. 背景的一些属性
3. 精灵图
4. 盒子布局
这篇博客主要介绍了HTML学习的第五天内容，涵盖了CSS的进阶知识，包括选择器及其优先级、背景属性和精灵图的使用。同时详细讲解了盒子模型的概念，探讨了外边距、边框和内填充等关键概念。
扫一扫
8491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
