二、CSS基础语法（复合选择器、显示模式、行高、CSS背景）

最新推荐文章于 2024-05-23 22:59:55 发布

窗台的花花

最新推荐文章于 2024-05-23 22:59:55 发布

阅读量373

点赞数 1

分类专栏： web前端文章标签： css html html5

本文链接：https://blog.csdn.net/qq_40116418/article/details/119967040

版权

web前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1. CSS复合选择器

2. 标签显示模式（display）

3. 行高那些事（line-height）

4. CSS背景（background）

5. CSS三大特性

1. CSS复合选择器

1.1 后代选择器（重点）

概念：

后代选择器又称为包含选择器

作用：

用来选择含素或元素组的子孙后代

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开，先写父级再写子级。

.class h3 {
    color: red;
    font-size: 16px;

}

当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

1.2 子元素选择器

作用：

子元素选择器只能选择作为某元素子元素（亲儿子）的元素。

其语法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
语法：

.class>h3{
    color: red;
    font-size: 14px;
}

这里的子 指的是 亲儿子，不包含孙子重孙之类。

白话：

比如:  .demo > h3 {color: red:} 说明 h3 一定是demo 亲儿子。 demo元素包含着h3。

1.3 交集选择器

条件

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

语法

h3.nav{
    color: red;
    font-size: 16px;
}

记忆技巧：

交集选择器是并且的意思。既...又...的意思

比如： p.one  选择的是：类名为 .one 的段落标签。

用的相对来说比较少，不太建议使用。

1.4 并集选择器（重点）

应用：

如果某些选择器定义的样式完全相同，就可以利用并集选择器为它们定义相同的CSS样式。

并集选择器（CSS选择器分组）是各个选择器通过，连接而成的。
语法：

任何形式的选择器（包括标签选择器、class选择器和id选择器等），都可以作为并集选择器的一部分。
记忆技巧：

并集选择器通常用于集体声明，逗号隔开的，所有的选择器都会执行后面的样式，逗号可以理解为和的意思。

比如  .one, p , #test {color: #F00;}
表示  .one、 p 和 #test  这三个选择器都会执行颜色为红色。
通常用于集体声明。

测试题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小测验</title>
    <!--任务； 1.链接登录的颜色为红色
            2.主导航栏里面所有的链接颜色改为橙色
            3.主导航栏和测导航栏里面字体都是14像素并且都是微软雅黑 -->
    <style>
        /* 1.链接登录的颜色为红色 */
        .site-r a {
            color: red;
        }
        /* 2.主导航栏里面所有的链接颜色改为橙色 */
        .nav ul li a {
            color: orange;
        }
        /* 3.主导航栏和测导航栏里面字体都是14像素并且都是微软雅黑 */
        .nav,
        .sitenav{
            font: 14px "微软雅黑";
        }
    </style>
</head>

<body>
    <!-- 主导航栏 -->
    <div class="nav">
        <ul>
            <li> <a href="#">公司首页</a></li>
            <li> <a href="#">公司简介</a></li>
            <li> <a href="#">公司产品</a></li>
            <li> <a href="#">联系我们</a></li>
        </ul>
    </div>
    <!-- 测导航栏 -->
    <div class="sitenav">
        <div class="site-l">左侧导航栏</div>
        <div class="site-r"><a href="#">登录</a></div>
    </div>
</body>

</html>

1.5 连接伪类选择器（重点）

区别

类选择器：.demo{}

伪类选择器：:link{}

作用：

为了给某些选择器添加特殊的效果。比如给多个链接添加特殊效果，可以选择第1个，第n个元素来给它添加效果。

a:link     /*未访问的链接*/
a:visited  /*已访问的链接*/
a:hover    /*鼠标移动到链接上*/
a:active   /*选定的链接*/

注意

1. 写的时候，他们顺序尽量不要颠倒按照 lvha 的顺序。否则可能引起错误。

2. 记忆法：

○ love hate 爱上了讨厌

○ lv 包包非常 hao

3. 因为叫链接伪类，所以都是利用交集选择器 a:link a:hover

4. 因为a链接浏览器具有默认样式，所以我们实际工作中需要给链接单独指定样式。

5. 实际开发中，我们很少写全四个状态，一般写法如下：

/* a是标签选择器 指所有链接 */
a {
    font-weight: 700px;
    font-size: 16px;
    color: gray;
}
/* :hover是链接伪类选择器 鼠标经过 */
a:hover {
    /*鼠标经过的时候，由原来的灰色变为红色 */
    color: red;
}

1.6 复合选择器总结

2. 标签显示模式（display）

2.1 标签显示模式

什么是标签显示模式

标签以什么方式进行显示，比如div自己占一行，比如 span一行可以放很多个。

作用

网页的标签非常多，在不同的地方会用到不同类型的标签，一遍更好的完成网页。

标签的类型

HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素。

2.2 块级元素（block-level）

例：

    常见的块元素有<h1>~<h5>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>是最典型的块元素。

块级元素的特点

（1）比较霸道，自己独占一行。

（2）高度、宽度、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%。

（4）是一个容器及盒子，里面可以放行内或者块级元素。

注意

○ 只有文字才能组成段落因此 p 里面不能放块级元素，特别是 p 不能放div。

○ 同理还有这些标签h1~h6、dt，他们都是文字类块级标签，里面不能放其他块级元素。

2.3 行内元素（inline-level）

例：

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中
<span>是最典型的行内元素。有的地方也称内联元素。

特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽高就是它本身内容的宽高。

（4）行内元素只能容纳文本或者其它行内元素。

注意：

（1）链接里面不能再放链接。

（2）特殊情况 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。

2.4 行内块元素

例：

在行内元素中，有几个特殊的标签 <img/>、<input/>、<td>，可以对它们设置宽高和对齐属性，有些资料
可能会称它们为行内块元素。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙，一行可以显示多个。

（2）默认高度就是它本身内容的高度。

（3）高度、行高、外边距以及内边距都可以控制。

2.5 三种模式总结和区别

2.6 标签显示模式转换 display

块转行内：display: inline;
行内转块：display: block;
块、行内元素转换为行内块：display: inline-block;

3. 行高那些事（line-height）

3.1 行高测量

行高的测量方法：

测量工具：

3.2 单行文本垂直居中

文字的行高等于盒子的高度。

行高 = 上距离 + 内容高度 + 下边距

行高和高度的三种关系

如果行高等于高度，文字会垂直居中
如果行高大于高度，文字会偏下
如果行高小于高度，文字会偏上

4. CSS背景（background）

4.1 背景颜色（color）

语法

    background-color: 颜色值;  默认的值是transparent 透明的

4.2 背景图片(image)

语法

    background-image:none | url (url)

    background-image: url(images/dabai.png);

小技巧：我们提倡背景图片后面的地址，url不要加引号。

4.3 背景平铺(repeat)

语法

    background-repeat: repeat | no-repeat | repeat-x | repeat-y

4.4 背景位置（position）重点

语法

    background-position: length || length
    background-position: position || position

参数	值
length	百分数 \| 由浮点数字和单位标识符组成的长度值
position	top \| center \| bottom \| left \| center \| right 方位名词

注意：

○ 必须指定background-image属性。

○ position 后面是x坐标和y坐标。可以使用方位名词或者精准单位。

○ 如果指定了一个方位名词，另一个值默认居中，为50%。

○ 如果只指定一个数值，那该数值用于x坐标，另一个默认是y坐标，默认居中。

○ 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left，top 和 top，left效果一致。

○ 如果指定两个值，精准单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标。

例子：

 
        .bg {
            width: 800px;
            height: 500px;
            background-color:pink;
            /* 背景图片 1.必须加url 2.url里面的地址不要加 引号 */
            background-image: url(../images/reba.jpg);
            color: violet;
            /* 默认的是平铺图 repeat */
            /* background-repeat: repeat; */
            /* 背景图片不平铺 */
            background-repeat: no-repeat;
            /* 背景图横性平铺 */
            /* background-repeat: repeat-x; */
            /* 背景图纵性平铺 */
            /* background-repeat: repeat-y; */
            /* background-position: x坐标 y坐标 */
            /* background-position: right top; */
            /* 靠左 水平居中 */
            /* background-position: left center; */
            /* 如果只指定一个值，另一个值默认居中对齐 */
            /* background-position: right; */
            /* 跟精确坐标 x值  y值 */
            background-position: 80px 120px;
        }

4.5 背景附着

背景附着就是解释背景是滚动的还是固定的
语法：

    background-attachment : scroll | fixed

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

4.6 背景简写

background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议如下写：
background：背景颜色背景图片地址背景平铺背景滚动背景位置；
语法：

    background: transparent url(image.jpg) repeat-y scroll center top;

4.7 背景透明（CSS3）

语法

    background: rgba(0,0,0,0.3);

最后一个参数是alpha透明度取值范围 0 ~ 1之间。
我们习惯把0.3 的 0 省略，这样写 background: rgba(0,0,0,.3);
注意：背景半透明是盒子背景半透明，盒子里面的内容不受影响。
因为是CSS3，所以低于ie9 的版本是不支持的。

4.8 背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat / no-repeat / repeat-x / repeat-y
background-position	背景位置	length/position 分别是x 和y 坐标，切记，如果有精准数值单位，则必须按照先x 后y 的写法
background-attachment	背景固定还是滚动	scroll / fixed
背景简写	更简单	背景颜色背景图片地址背景平铺背景滚动背景位置；它们没有顺序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是4个值

5. CSS三大特性

5.1 CSS层叠性

概念：

所谓层叠性就是指多种CSS样式的叠加。是浏览器处理冲突的一中能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另外一个属性层叠掉。

原则：

○ 样式冲突，遵循的原则是就近原则。哪个样式离着结构近，就执行哪个样式。

○ 样式不冲突，不会层叠。

5.2 CSS继承性

概念：

字标签会集成父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。最简单的理解就是：子承父业。

注意：

○ 恰当的使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。

○ 子元素可以继承父元素的样式（text-, font-, line- 这些元素开头的可以继承，以及color属性）

5.3 CSS优先级（重点）

概念：

定义CSS样式时，经常出现两个或者多个规则应用在同一元素上，此时，

○ 选择器相同，则执行层叠性

○ 选择器不同，就会出现优先级的问题。

1).权重计算公式

关于CSS权重，我们需要一套计算公式来计算，这个就是CSS Specificity（特殊性）

specificity用一个四位的数，更像四个级别。
值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

2).权重叠加

简单的加法计算

div ul li ——> 0,0,0,3
.nav ul li ——> 0,0,1,2
a:hover ——> 0,0,1,1
.nav a ——> 0,0,1,1

注意：

1. 数位之间没有进制，比如说：0,0,0,5 + 0,0,0,5 = 0,0,0,10 而不是 0,0,1,0，所以不会存在10个div能赶上一个类选择器的情况。

2. 继承的权重是0。

3. 如果权重是相同，则会根据层叠性，就近原则。

4. 两个特殊标签链接和 h 标题，他们浏览器有自己默认的样式，继承的权重为0，所以，我们还是要单独给链接和标题一个样式。

窗台的花花

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
二、CSS基础语法（复合选择器、显示模式、行高、CSS背景）

1. CSS复合选择器1.1 后代选择器（重点）概念：后代选择器又称为包含选择器作用：用来选择含素或元素组的子孙后代其写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开，先写父级再写子级。.class h3 { color: red; font-size: 16px;}当标签发生嵌套时，内层标签就成为外层标签的后代。子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。1.2 子元素选择器作用：...
复制链接

扫一扫