概述
css
文章目录
- css
- 1.元素显示模式
- 2.元素显示模式的转换
- 3.单行文字垂直居中的代码
- 4.背景图片
- 1.背景图片的位置：
- 2.x，y表示x坐标和y坐标，可以使用方位名词或者精确单位
- 3.left top center right（位置顺序无关）
- 4.还可以混合单位
- 5.背景固定还是滚动
- 6.背景颜色半透明
- 7.背景图片以及不要平铺
- 8.样例
- 5.css三大特性
- 6.行高的继承实例
- 7.优先级
- 8.权重叠加
1.元素显示模式
常见块元素：<h1><p>div><ul><ol><li>
其独占一行， 高度，宽度，外边距，内边距都可以控制，宽度默认是容器（父级宽度）的100%，是一个容器及盒子，里面可以放行内或者块级元素；
注意， <p>里面只放文字，不能放<div>
<h!>同理
行内元素：<a><strong><b><em><i><del><s><ins><u><span>
相邻元素在一行上，一行显示多个，高宽直接设置是无效的，默认宽度就是它本身内容的宽度，行内元素只能容纳文本或者其他行内元素；
注意，链接里面不能再放链接，特殊情况<a>里面可以放块级元素，但是<a>转换一下块级模式最安全；
行内块元素：<img/><input/><td>
他们同时具有块元素和行内元素的特点。
和相邻内元素在一起时在一行， 但是他们之间会有空白缝隙，一行可以显示多个，默认宽度就是它本身内容的宽度，高度，行高，外边距及内边距都可以控制。
2.元素显示模式的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
width: 150px;
height: 50px;
background-color: hotpink;
/* 把行内元素a转化为块级元素 */
display: block;
}
div {
width: 300px;
height: 100px;
background: rgb(196, 112, 189);
/* 把div块元素a转化为行内元素 */
display: inline;
}
span {
width: 100px;
height: 300px;
background: rgb(105, 187, 162);
/* 把行内元素转化为行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<a href="#"> popo~</a>
<div>我是popo！</div>
<span>popo~~~</span>
<span>popo~~~</span>
</body>
</html>
3.单行文字垂直居中的代码
让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中；
div {
width: 300px;
height: 40px;
background: rgb(196, 112, 189);
/* 把div块元素a转化为行内元素 */
display: inline;
line-height: 40px;
}
4.背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
/* 不要拉下url（） */
background-image: url(banner.png);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
背景平铺：如果，背景图片小于盒子大小，那么图片会再次平铺（默认平铺）背景颜色会压住背景图片
background-repeat: repeat;
平铺
background-repeat: no-repeat;
不平铺
background-repeat: repeat-x;
x轴平铺
background-repeat: repeat-y;
y轴平铺
1.背景图片的位置：
background-position: x y;
2.x，y表示x坐标和y坐标，可以使用方位名词或者精确单位
background-position: center top;
水平居中
3.left top center right（位置顺序无关）
或者精准表达（原点在左上角）
background-position: 20px ;（y可以省略，x不能）
4.还可以混合单位
background-position: 20px center;
5.背景固定还是滚动
background-attachment: fixed;
固定
background-attachment: scroll;
滚动
6.背景颜色半透明
background: rgba(0, 0, 0, 0.3);
7.背景图片以及不要平铺
background: url(bg1.jpg) no-repeat;
8.样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav a {
display: inline-block;
width: 120px;
height: 58px;
line-height: 58px;
background-color: rgb(202, 146, 146);
text-align: center;
color: #fff;
text-decoration: none;
}
.nav .bg1 {
background: url(bg1.jpg) no-repeat;
}
.nav .bg1:hover {
background-image: url(bg11.JPG);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bg1">五彩导航</a>
<a href="#">五彩导航</a>
<a href="#">五彩导航</a>
<a href="#">五彩导航</a>
<a href="#">五彩导航</a>
</div>
</body>
</html>
5.css三大特性
层叠性、继承性、优先级
层叠性：样式冲突，遵循就近原则，哪个离样式近，就执行哪个样式。
继承性：子标签会继承父标签中的某些样式，如文本颜色和字号。
6.行高的继承实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
color: pink;
font: 12px/1.5 "Microsoft yaHei";
}
div {
font-size: 14px;
/* 子元素继承了父元素body的行高1.5，这个1.5就是当前元素文字的大小font-size的1.5倍 */
/* 所以，当前div的行高就是14*1.5=21像素 */
}
p {
font-size: 16px;
/* 1.5*16=24 当前的行高 */
}
/* li没有手动指定文字大小，则会继承父亲的文字大小 */
/* body的文字大小是12px所以，li的文字大小12px */
/* 当前li的行高就是12*1.5=18px */
</style>
</head>
<body>
<div>粉色的回忆，粉色的popo小可爱</div>
<p>粉色的回忆，粉色的popo小可爱</p>
<ul>
<li>我没有指点文字大小</li>
</ul>
</body>
</html>
7.优先级
当同一个元素指定多个选择器，就会有优先级的产生
如果选择器相同就会执行层叠性；（就近原则）
选择器不同，则会根据选择器权重执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: pink !important;
}
.test {
color: red;
}
#demo {
color: seagreen;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: snow;">popo笑起来真好看</div>
</body>
</html>
注意： 继承的权重是0，即，如果该元素没有被直接选中，不管父元素权重多高，子元素得到的权重都是0；
a链接浏览器默认指定了一个样式，蓝色的，有下滑线；
8.权重叠加
如果选择的是复合选择器。则会有权重叠加，需要计算权重。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
color: #6e0b0b;
}
/* 权重虽然会叠加，但是不会有进位的问题！ */
/* li的权重是0001 */
ul li {
color: teal;
}
/* ul li 的权重是0001+0001=0002 */
.nav li {
color: yellow;
}
/* .nav li 权重：0010+0001=0011 */
</style>
</head>
<body>
<ul class="nav">
<li>popo</li>
<li>popo宝</li>
<li>popo酱</li>
</ul>
</body>
</html>
最后
以上就是含蓄羽毛为你收集整理的css用法详解整理2，含综合示例，可运行css的全部内容，希望文章能够帮你解决css用法详解整理2，含综合示例，可运行css所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复