今天我们来了解一下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;}意思是将这些元素背景设置为蓝色

这是p

我是h1标题

②后代选择器：给子类元素加属性;

把外层的标记写在前面，内层的标记写在后面，之间用空格分隔,可以隔代选择。

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标签

下面我们通过一个小例子感受一下

• list red
• list pink

③指定标签选择器：给指定的子元素加属性；

由标签选择器和类选择器或者id选择器构成的复合选择器，中间没有任何符号

tips:

不管标签身上有类选择器也好，或者id选择器也好，直接在标签选择器后面连着写，别的什么都不加

例：div#nav{..} - 选择id为nav的div

ul.list{...} - 选择class为list的ul

li.pink{...} - 选择 class为pink的li

• list red
• list pink

2.注释

CSS注释 –/*注释内容*/

HTML注释 –

作用：能够使加了注释的代码不被浏览器渲染。一般工作中，利用添加注释的方式给工作人员添加帮助信息

tips:

CSS注释可以单独放在一行使用，也可以在样式条里面使用

清晰的注释有利于开发人员读懂代码，便于后期维护

大家也可以试试f12查看一下网页的源代码，看看各大网站都有什么隐藏小秘密哦

我是一个html注释

• list red
• list pink

3.border

这里为什么要把border单独拿出来讲一下是因为border有很多妙用，border是一个很有意思的css属性，巧妙使用border有些效果就不需要用图片实现。下面我们先看一下border的属性。

border属性是复合属性 – 允许链接多个属性值的属性即是复合属性

允许书写3个属性值，分别是：边框线粗细、线条样式、边框线颜色。CSS要求复合属性各个属性值之间用空格隔开（属性值不分先后顺序）

tips：当border没有设置颜色值的时候，跟字体颜色保持一致

下面我们通过几个小例子体验一下border的妙用吧

①利用border画个圆border-style:dotted

我们要实现圆角效果想到的就是border-radius:50%。然而该属性ie8是不支持的，而在IE浏览器下点线是由小圆点组成的。所以我们可以巧妙运用该属性来实现圆角效果，而不用借助图片。

②利用border制作三杠icon效果 border-style:double

我们要实现圆角效果想到的就是搞个图标上去？切图还是font图标，其实这个我们完全可以利用border属性来实现（:border-style:double的表现规则：双线宽度永远相等，中间间隔±1）

③利用border实现+号效果 border-color

因为border的颜色是和字体颜色一致，所以hover的时候+号跟随虚线边框的颜色改变，所以不用担心hover时颜色不一致的问题，我们可以利用这个特点做一些效果。比如：具有边框的a标签，正常状态下边框和字体颜色为灰色，鼠标经过时为蓝色

④利用border画个三角形

如何实现的，为何会有这样的效果，不急，take it easy!

⑤实际的应用，不说话直接看图

实现这些效果的关是“覆盖”，另外一个边框形成的尖角覆盖之前的一个，只要控制好覆盖的位置，然后就形成了实际上的不规则尖角或是尖角边框。您还可以发挥您的创造力，实现更多其它的效果。

4.css属性层叠与继承

①层叠性 – 覆盖

在权重相同的情况下，后写的css属性覆盖先写的css属性；后写css样式条覆盖先写的css样式条

例如：

div{background:red;} div{background:green;background:pink;}

最终结果div背景色为pink。

②继承性

某些css属性会从父级继承给子级，某些则不会继承

文字控制属性可以被继承，区块控制属性不可以被继承。

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;}

6.文字修饰属性与行高

①文字线段 ： text-decoration

none – 无线段

overline – 顶划线

line-through – 删除线/贯穿线

underline – 下划线

②加粗属性 ： font-weight

normal– 正常

bold– 加粗

③字体风格 ： font-style

italic – 倾斜

normal– 正常

超链接

这是需要下划线的

顶划线

删除线

④行高：line-height

从文字中心基线出发，向上向下同时延伸，这段距离其实就是行高

只针对于单行：保证div的height和line-height的属性值一致。

例如：

div{ width:400px; height:50px; line-height:50px; }

作用：文字垂直居中

7.超链接的伪类

伪类其实就一个状态，超链接有4个状态供我们学习：

访问前（默认状态） – ：link

访问后 – ：visited

鼠标移上 – ：hover

点击状态 – ：active

注意：当要同时修改超链接的四个状态的时候，一定要遵循顺序：L~V~H~A

link,visite,active必须配合a标签的href属性一起使用。

没有href属性，a标签就不是超链接，就谈不上访问前后这些状态。

只存在鼠标移上去之前和移上去之后的不同。

超链接

tips：

一般工作中，超链接的默认状态和访问后状态样式完全相同，可以并集选择器放到一起书写，也有一种最优的写法：直接书写a标签选择器，代表的是同时选中超链接的所有状态，万一哪个状态特殊，再单独设置样式；一般情况下，默认状态的超链接都没有下划线，目的就是想要让页面干净整洁

其他元素也有hover这个伪类

其他元素也有hover这个伪类，但是由于兼容性不是很好，所以不推荐使用，除非公司明确说了，就是不管那些低版本的浏览器，那可以放心的使用。

利用border实现+号效果 border-color也可以用下面这种方法实现

tips学习小技巧:

学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。。。既然学习这么痛苦，为什么不快乐一点学呢？anyway~希望大家可以成为一个优秀的前端！资历有限，错误难免，欢迎大力指正。

【WEB前端大作战】火热进行中：https://bbs.huaweicloud.com/blogs/255890

CSS HTML web前端 容器

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。