小花带你一周入门html+css（三）CSS进阶之常用属性丨【WEB前端大作战】
今天我们来了解一下css的常用属性
复合选择器、注释、border、css属性层叠与继承、background、文字修饰属性与行高、伪类等
CSS看似比较繁杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本上掌握了大半啦~这时我们就已经能够对网页中各个元素进行精准的排版，做出符合我们意愿的网页啦！
关于CSS的各种属性，我们还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。我们需要改变边框，那就是“border”，那我们需要右侧边框做一些改变，那就是“border-right”。很明显，接下来按照我们的需求还有“右边框的宽度——border-right-with”，”右边框颜色——border-right-color”等等等，诸如此类~
完全就是我们需要什么，只要凭着需求去寻找。~follow me~
1.复合选择器
复合选择器是将基础选择器连在一起使用，也可以称为高级选择器。复合选择器常用的几种分别为：分组选择器，后代选择器，指定标签选择器等。下面我们来分别认识一下这些选择器。
①分组选择器（并集选择器，多元选择器）：用来给多个元素加同一个样式；
作用：
控制页面中样式相同的盒子
一个逗号表示合并关系，
用逗号连接所有的选择器，可以是基础选择器也可以是复合选择器
例：.one,#one,a,span{color:red;font-size:14px;}意思是类one,#one,a标签，span标签有共同属性;div,p,h1,span{ background:blue;}意思是将这些元素背景设置为蓝色
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>华为云论坛_云计算论坛_开发者论坛_技术论坛-华为云</title>
<meta name="keywords" content="论坛,开发者,技术,云计算,云原生,AI,物联网,软件开发,鲲鹏,数据库,视频,安全,华为云论坛,华为云">
<meta name="description" content="华为云论坛是开发者和华为云产品交流主阵地，邀你共享云计算使用和开发经验，汇聚云上智慧，共赢智慧未来。 ">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<title>css进阶</title>
<style type="text/css">
div,p,h1,span{ background:blue;color:#fff}
</style>
</head>
<body>
<div class="box">这是div，我是个块级元素</div>
<p class="box">这是p</p>
<h1>我是h1标题</h1>
<span>我是行内块span</span>
</body>
</html>
②后代选择器：给子类元素加属性;
把外层的标记写在前面，内层的标记写在后面，之间用空格分隔,可以隔代选择。
tips：
一个空格表示包含（嵌套）关系，不管空格前后是哪种基础选择器，只要有空格就是后代选择器
例：.one a{text-decoration:none;}意思是类one的后代a标签修饰的内容无下划线;
ul li{...} - 选择ul标签里面的li标签
ul .list{...} - 选择ul标签里面class为list的标签
.list li{...} - 选择class为list的标签里面li标签
.box .list{...} - 选择class为box的标签里面的class为list的标签
.nav .list{...} - 选择class为nav的标签里面的class为list的标签
.nav .list li{...} - 选择class为nav的标签里面class为list的标签里面的li标签
下面我们通过一个小例子感受一下
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>华为云论坛_云计算论坛_开发者论坛_技术论坛-华为云</title>
<meta name="keywords" content="论坛,开发者,技术,云计算,云原生,AI,物联网,软件开发,鲲鹏,数据库,视频,安全,华为云论坛,华为云">
<meta name="description" content="华为云论坛是开发者和华为云产品交流主阵地，邀你共享云计算使用和开发经验，汇聚云上智慧，共赢智慧未来。 ">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<title>css进阶</title>
<style type="text/css">
.box ul{background:#eee;} /*选择class为box里面的ul*/
.box li{width:200px;height:50px;background:green;} /* 选择class为list里面的li，隔代选择，也可以写.box ul li{...}*/
.list .red{background:red;} /*选择class为list里面class为red的标签*/
.nav{background:#FFC;}/*选择class为nav的标签*/
.nav li{width:500px;height:30px;background:pink;}/*选择class为nav里面的li*/
.nav .red{background:#F39;}/*选择class为nav里面class为red的标签*/
</style>
</head>
<body>
<div class="box">
<ul class="list">
<li class="red">list red</li>
<li>list green</li>
</ul>
</div>
<ul class="nav">
<li class="red">list red</li>
<li>list pink</li>
</ul>
</body>
</html>
③指定标签选择器：给指定的子元素加属性；
由标签选择器和类选择器或者id选择器构成的复合选择器，中间没有任何符号
tips:
不管标签身上有类选择器也好，或者id选择器也好，直接在标签选择器后面连着写，别的什么都不加
例：div#nav{..} - 选择id为nav的div
ul.list{...} - 选择class为list的ul
li.pink{...} - 选择 class为pink的li
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>华为云论坛_云计算论坛_开发者论坛_技术论坛-华为云</title>
<meta name="keywords" content="论坛,开发者,技术,云计算,云原生,AI,物联网,软件开发,鲲鹏,数据库,视频,安全,华为云论坛,华为云">
<meta name="description" content="华为云论坛是开发者和华为云产品交流主阵地，邀你共享云计算使用和开发经验，汇聚云上智慧，共赢智慧未来。 ">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<title>css进阶</title>
<style type="text/css">
.box ul{background:#eee;} /*选择class为box里面的ul*/
.box li{width:200px;height:50px;background:green;} /* 选择class为list里面的li，隔代选择，也可以写.box ul li{...}*/
.list .red{background:red;} /*选择class为list里面class为red的标签*/
.nav{background:#FFC;}/*选择class为nav的标签*/
.nav li{width:500px;height:30px;background:pink;}/*选择class为nav里面的li*/
.nav .red{background:#F39;}/*选择class为nav里面class为red的标签*/
ul.list{background:#F90;width:300px;height:100px;}/*class为list的ul*/
li.pink{background:#F70;width:900px;height:40px;}/*选择class为pink的li，注意这里写的会覆盖上面写的属性哦*/
</style>
</head>
<body>
<div class="box">
<ul class="list">
<li class="red">list red</li>
<li>list green</li>
</ul>
</div>
<ul class="nav">
<li class="red">list red</li>
<li class="pink">list pink</li>
</ul>
</body>
</html>
2.注释
CSS注释 –/*注释内容*/
HTML注释 – <!--注释内容-->
作用：能够使加了注释的代码不被浏览器渲染。一般工作中，利用添加注释的方式给工作人员添加帮助信息
tips:
CSS注释可以单独放在一行使用，也可以在样式条里面使用
清晰的注释有利于开发人员读懂代码，便于后期维护
大家也可以试试f12查看一下网页的源代码，看看各大网站都有什么隐藏小秘密哦
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>css进阶</title>
<style type="text/css">
.box ul{background:#eee;} /*选择class为box里面的ul*/
.box li{width:200px;height:50px;background:green;} /* 选择class为list里面的li，隔代选择，也可以写.box ul li{...}*/
.list .red{background:red;} /*选择class为list里面class为red的标签*/
.nav{background:#FFC;}/*选择class为nav的标签*/
.nav li{width:500px;height:30px;background:pink;}/*选择class为nav里面的li*/
.nav .red{background:#F39;}/*选择class为nav里面class为red的标签*/
/*我写的内容会覆盖上面的哦*/
ul.list{background:#F90;width:300px;height:100px;}/*class为list的ul*/
li.pink{background:#F70;width:900px;height:40px;}/*选择class为pink的li*/
</style>
</head>
<body>
<!-->我是一个html注释</-->
<div class="box">
<ul class="list">
<li class="red">list red</li>
<li>list green</li>
</ul>
</div>
<ul class="nav">
<li class="red">list red</li>
<li class="pink">list pink</li>
</ul>
</body>
</html>
3.border
这里为什么要把border单独拿出来讲一下是因为border有很多妙用，border是一个很有意思的css属性，巧妙使用border有些效果就不需要用图片实现。下面我们先看一下border的属性。
border属性是复合属性 – 允许链接多个属性值的属性即是复合属性
允许书写3个属性值，分别是：边框线粗细、线条样式、边框线颜色。CSS要求复合属性各个属性值之间用空格隔开（属性值不分先后顺序）
tips：当border没有设置颜色值的时候，跟字体颜色保持一致
下面我们通过几个小例子体验一下border的妙用吧
①利用border画个圆border-style:dotted
我们要实现圆角效果想到的就是border-radius:50%。然而该属性ie8是不支持的，而在IE浏览器下点线是由小圆点组成的。所以我们可以巧妙运用该属性来实现圆角效果，而不用借助图片。
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
/* 实现原理，先设置一个正方形，盒子宽高和边框宽一样，
里面盒子直接有点样式，宽度和父盒子宽度一样，
超出部分隐藏，就得到一个点 */
.box{
width:50px;
height:50px;
overflow:hidden;
margin:100px auto;
}
.dotted{
width:100%;
height:100%;
border:50px dotted #e82433;/*注意border宽度和box的宽相同*/
}
</style>
</head>
<body>
<div class="box">
<div class="dotted"></div>
</div>
</body>
</html>
②利用border制作三杠icon效果 border-style:double
我们要实现圆角效果想到的就是搞个图标上去？切图还是font图标，其实这个我们完全可以利用border属性来实现（:border-style:double的表现规则：双线宽度永远相等，中间间隔±1）
<!doctype html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>css进阶</title>
<style type="text/css">
/* 利用上border双杠 下border单线 实现三道杠 */
.box{
width:100px;
height:20px;
border-top:60px double #e82433;
border-bottom:20px solid #e82433;
margin:100px auto;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
③利用border实现+号效果 border-color
因为border的颜色是和字体颜色一致，所以hover的时候+号跟随虚线边框的颜色改变，所以不用担心hover时颜色不一致的问题，我们可以利用这个特点做一些效果。比如：具有边框的a标签，正常状态下边框和字体颜色为灰色，鼠标经过时为蓝色
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
a {
position: relative;
display: inline-block;
padding: 50px 40px;
color:#ccc;
border:2px dashed;
}
a:hover {
color: #0ba3f1;
}
a:before,a:after {
content: '';
display: block;
}
a:after {/*加号横线*/
border-top: 2px solid;
width: 30px;
}
a:before { /*加号竖线*/
position: absolute;
top: 36px;
left: 54px;
border-left: 2px solid;
height: 30px;
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
④利用border画个三角形
如何实现的，为何会有这样的效果，不急，take it easy!
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
.box{
width:0;
border:100px solid;
border-color:#f30 transparent transparent;
margin:100px auto;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
⑤实际的应用，不说话直接看图
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
.test{width:300px; padding:30px 20px; border:5px solid #f30; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
border-width:20px;
border-style:solid dashed dashed;
border-color:#f30 transparent transparent;
left:80px;
bottom:-40px;
}
.test span.top{
border-width:20px;
border-style:solid dashed dashed;
border-color:#ffffff transparent transparent;
left:80px;
bottom:-33px;
}
</style>
</head>
<body>
<div class="test">
<span class="bot"></span>
<span class="top"></span>
CSS “边框法”实现气泡对话框效果
</div>
</body>
</html>
实现这些效果的关是“覆盖”，另外一个边框形成的尖角覆盖之前的一个，只要控制好覆盖的位置，然后就形成了实际上的不规则尖角或是尖角边框。您还可以发挥您的创造力，实现更多其它的效果。
4.css属性层叠与继承
①层叠性 – 覆盖
在权重相同的情况下，后写的css属性覆盖先写的css属性；后写css样式条覆盖先写的css样式条
例如：
div{background:red;}
div{background:green;background:pink;}
最终结果div背景色为pink。
②继承性
某些css属性会从父级继承给子级，某些则不会继承
文字控制属性可以被继承，区块控制属性不可以被继承。
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
.father{ font-size:30px; color:#fff; font-weight:bold; border:1px solid #f00; background:#f70;}
</style>
</head>
<body>
<div class="father">
<p>我是文字</p>
</div>
</body>
</html>
5.background
background属性是一个复合属性，允许连接多个属性值，属性值之间用空格隔开
background：背景色 背景图 平铺方式 背景图定位；
各个属性不分先后顺序，但是一般在工作中按这个顺序书写就好。
背景色 background-color
背景图 background-image
平铺方式 background-repeat
背景图定位 background-positon
①平铺方式
平铺 – repeat（默认值）
x轴平铺 – repeat-x
y轴平铺 – repeat-y
不平铺 – no-repeat
background-position取值为坐标，是先左右（水平）方向，后上下（垂直）方向。中间用空格隔开。
tips：
可以取值为数字(整数)
可以是正数，也可以是负数
可以取值为英文
水平方向取值为left 和right,垂直方向取值为top和bottom,居中为center。
②背景图定位
取值：1.具体像素单位数值；2.方向英文（left，top，right，bottom，center）
注意：背景图定位取值：水平方向位置 垂直方向位置，且顺序不可以颠倒
body{ background:#f70 url(...) no-repeat left bottom; height:700px;}
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
*{margin:0;padding:0}
body{ background:#f70 url(bg.gif) no-repeat left bottom; height:700px;border:1px solid #f00;}
.father{ font-size:30px; color:#fff; font-weight:bold; border:1px solid #f00; background:#f70;}
</style>
</head>
<body>
<div class="father">
<p>我是文字</p>
</div>
</body>
</html>
6.文字修饰属性与行高
①文字线段 ： text-decoration
none – 无线段
overline – 顶划线
line-through – 删除线/贯穿线
underline – 下划线
②加粗属性 ： font-weight
normal– 正常
bold– 加粗
③字体风格 ： font-style
italic – 倾斜
normal– 正常
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
a{ text-decoration:none;}
h1{ text-decoration:underline;}
h2{ text-decoration:overline;}
h3{ text-decoration:line-through; font-weight:normal; font-style:italic;}
em{ font-style:normal;}
</style>
</head>
<body>
<a href="#">超链接</a>
<h1>这是需要下划线的</h1>
<h2>顶划线</h2>
<h3>删除线</h3>
<em>倾斜</em>
</body>
</html>
④行高：line-height
从文字中心基线出发，向上向下同时延伸，这段距离其实就是行高
只针对于单行：保证div的height和line-height的属性值一致。
例如：
div{
width:400px;
height:50px;
line-height:50px;
}
作用：文字垂直居中
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
div{ width:300px; height:200px; background:pink; text-align:center; line-height:200px;}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
7.超链接的伪类
伪类其实就一个状态，超链接有4个状态供我们学习：
访问前（默认状态） – ：link
访问后 – ：visited
鼠标移上 – ：hover
点击状态 – ：active
注意：当要同时修改超链接的四个状态的时候，一定要遵循顺序：L~V~H~A
link,visite,active必须配合a标签的href属性一起使用。
没有href属性，a标签就不是超链接，就谈不上访问前后这些状态。
只存在鼠标移上去之前和移上去之后的不同。
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
a:link{ color:red;}
a:visited{ color:green;}
a:hover{ color:blue;}
a:active{ color:pink;}
</style>
</head>
<body>
<a href="#">超链接</a>
</body>
</html>
tips：
一般工作中，超链接的默认状态和访问后状态样式完全相同，可以并集选择器放到一起书写，也有一种最优的写法：直接书写a标签选择器，代表的是同时选中超链接的所有状态，万一哪个状态特殊，再单独设置样式；一般情况下，默认状态的超链接都没有下划线，目的就是想要让页面干净整洁
其他元素也有hover这个伪类
其他元素也有hover这个伪类，但是由于兼容性不是很好，所以不推荐使用，除非公司明确说了，就是不管那些低版本的浏览器，那可以放心的使用。
利用border实现+号效果 border-color也可以用下面这种方法实现
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
.add{
width:76px;
height:76px;
color:#ccc;
border:2px dashed;
position:relative;
}
.add:hover{
color:#0ba3f1;
cursor:pointer;
}
.add:before,.add:after{
content:'';
position:absolute;
top:50%;
left:50%;
}
.add:before{
width:20px;
border-top:4px solid;
margin:-2px 0 0 -10px;/*此处是为了居中，-2px为border宽度的一半，向上偏移2实现垂直方向居中，-10px是元素宽度的一半，向左偏移10像素，实现水平方向居中*/
}
.add:after{
height:20px;
border-left:4px solid;
margin:-10px 0 0 -2px;
}
</style>
</head>
<body>
<div class="add">
</div>
</body>
</html>
tips学习小技巧:
学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。。。既然学习这么痛苦，为什么不快乐一点学呢？anyway~希望大家可以成为一个优秀的前端！资历有限，错误难免，欢迎大力指正。
【WEB前端大作战】火热进行中：https://bbs.huaweicloud.com/blogs/255890
- 点赞
- 收藏
- 关注作者
评论（0）