CSS复合选择器、元素显示模式、背景属性、三大特性，盒子模型、圆角边框，阴影

_%d_

已于 2023-04-07 00:32:45 修改

阅读量74

点赞数

文章标签： css 前端 css3

于 2023-03-31 20:11:33 首次发布

本文链接：https://blog.csdn.net/m0_74147144/article/details/129887851

版权

本文介绍了CSS的基础知识，包括Emmet语法如何快速生成HTML标签和CSS规则，详细讲解了各种选择器如后代选择器、子选择器、并集选择器和伪类选择器，以及元素的显示模式。此外，还涵盖了背景属性、盒子模型和CSS的三大特性：层叠性、继承性和优先级。

摘要由CSDN通过智能技术生成

CSS基础（2）

文章目录

CSS基础（2）

Emmet语法生成HTML标签

生成标签：标签名+Tab

生成多个标签：标签名*n

例：div*3

<div></div>
<div></div>
<div></div>

生成父子关系的标签：例：ul>li

<ul>
	<li></li>
</ul>

生成兄弟关系的标签：例：div+p

<div></div>
<p></p>

生成带有类名或id名字的标签：

例：.demo或#two 加Tab键(写.是默认给div添加)

<div class="demo"></div>
<div id="two"></div>

例：p.one Tab

<p class="one"></p>

例：ul>li#two

<ul>
        <li id="two"></li>
    </ul>

生成的div类名有顺序的使用自增符号$

例：.demo$*5

<div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

生成标签内部写内容用{}表示

例：div{这里有内容}*2

<div>这里有内容</div>
<div>这里有内容</div>

快速生成CSS语法

采用简写形式

例：w200 或tac tab

width: 200px;
text-align: center;

CSS复合选择器

后代选择器

包含选择器，可以选择子元素、

父元素1 子元素2{样式声明}

注：元素1和元素2中间一定有空格；

例：选择ol下li中的子元素并改变。

 ol li{
        color:pink;
      } 
   ol li a{
        color:pink;
      }
.nav li{
       color:pink;
}

<ol>
        <li>ol的子元素</li>
        <li><a href="#">子元素</a></li>
    </ol>
<ol class="nav">
        <li>ol的子元素</li>
    </ol>

子选择器

选择最近一级的子元素

元素1>元素2{样式声明}

.nav>a{
        color:pink;
      }

<div class="nav">
        <a href="#">最近一级的子元素</a>
        <p>
            <a href="#">不是最近的</a>
        </p>
    </div>

并集选择器

一同改变并列的标签

元素1,元素2{样式声明}

注：逗号为英文逗号

任何形式的选择器都可以成为并集选择器的一部分。

语法规范：并集选择器一般竖着写；

最后一个选择器不需要逗号。

div,
p,
.pig li{
        color:pink;
      }

<div>元素1</div>
    <p>元素2</p>
    <span>元素3</span>
    <ul class="pig">
        <li>佩奇</li>
        <li>妈妈</li>
        <li>爸爸</li>
    </ul>

伪类选择器

给某些选择器添加特殊效果

书写特点是用冒号（：）表示

链接伪类选择器

a:link{}

把没有点击过的链接选出来

<stlye>
/*未访问的链接*/
      a:link{
        color:black;
        text-decoration: none;
      }
    </style>

a:visited{}

已被访问过的链接

<stlye>
/*访问过的链接*/
      a:visited{
        color:black;
      }
    </style>

a:hover{}

鼠标经过的链接

<stlye>
/*鼠标经过的链接*/
      a:hover{
        color:black;
      }
    </style>

a:active{}

鼠标按下还没有弹起的链接

<stlye>
      a:active{
        color:black;
      }
    </style>

<body>	
	<a href="#">链接 </a>
</body>

注：为确保生效，按照link,visited,hover,active顺序声明

因为a链接在浏览器中具有默认样式，所以需要单独指定样式

a{
        color: #000;
      }

链接伪类选择器实际开发中的写法
/*a是标签选择器 所有链接*/
      a{
        color: #000;
        text-decoration: none;
      }
      /*hover是连接伪类选择器 鼠标经过*/
      a:hover
      {
        color:red;/*鼠标经过由黑变红*/
        text-decoration: underline;
      }

focus伪类选择器

用于选取获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素。

input:focus{
	background-color:yellow;
}
//光标移动到就会变成黄色背景

CSS的元素显示模式

元素显示模式就是元素（标签）以什么方式显示，比如<div>独占一行。

块元素

如：<h1>~<h6>,<p>,<div>,<ul>等

特点：

独占一行。

高度，宽度，外边距以及内边距都可以控制。

宽度默认是容器（父级元素)。

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

注：文字类元素内不能使用块级元素，如：<p>标签主要用于存放文字，因此p标签里不能放块级元素，特别是<div>;<h1>~<h6>同理。

行内元素

行内元素（内联元素）

特点：相邻行内元素上，一行可以显示多个。

高，宽直接设置是无效的。

默认宽度就是它本身内容的宽度。

行内元素只能容纳文本或其他行内元素。

<p>元素</p><strong>元素</strong>

注：链接里不能再放链接。

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

行内块元素

行内元素中，<img/>,<input/>,<td>,他们同时有块元素和行内元素的特点。

特点：

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

<input type="text">
<input type="text">

默认宽度是他本身内容的宽度（行内元素特点）。

高度，行高，外边距以及内边距都可以控制（块级元素特点）。

元素显示模式转换

一个模式的元素需要另一种的特性，比如想要增加链接<a>的触发范围

a{
/*转换为块级元素*/
	display:block;
}

div{
/*转换为行内元素*/
	display:inline;
}

span{
/*转化为行内块元素*/
	width:100px;
	height:30px;
	display:inline-block;
}

<body>
	<a href="#">元素</a>
	<span>行内元素转换为块级元素</span>
</body>

转化为块元素：display:block;

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

转化为行内元素：display:inline;

单行文字垂直居中的原理

解决方案：让文字的行高(line-height)等于盒子的高度(height)，就可以使其垂直居中。

div{
	width:200px;
	height：40px;
	line-height:40px;
}

原理：上下空隙把文字挤在中间，行高小于盒子的高度，文字偏上。

CSS的背景属性

背景颜色background-color

background-color：颜色值；

一般情况下，背景颜色默认为transparent（透明）

<style>
	background-color：颜色值；
</style>

背景图片background-image

大的图片，小的logo，装饰性图片，便于控制位置。

background-image: none(无背景图）或url(url)（使用绝对或相对地址指定图像。

注不要落下url**

 div{
 	width:200px;
	height：40px;
	background-image: url(images/logo.png);
 }

背景平铺background-repeat

参数：

repeat:图像在纵向和横向平铺

no-repeat:背景图像不平铺

repeat-x:背景图像在横向上平铺

repeat-y:背景图像在纵向上平铺

默认情况下，背景都是平铺的：

背景位置background-position

background-position:x y;

x,y代表x坐标,y坐标，可以使用方位名词或精确单位。

方位名词

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

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐(center)。

精确单位

如果参数值是精确单位，则第一个一定是x坐标，第二个一定是y坐标。

background-position:20px 50px;

如果只指定了一个参数，那该数值一定是x坐标，另一个默认垂直居中和。

混合单位

如果两个值是精确单位和方位名词混合使用的，则第一个是x坐标，第二个值是y坐标。

background-position:20px center;

背景图像固定（背景附着）

background-attachment属性设置图像是否固定或随着页面的其余部分滚动。可以制作视差滚动的效果。

background-attachment：scroll(随着内容滚动) | fixed（固定，图像不随着内容走）

背景属性复合写法background

没有特定书写顺序，习惯上按颜色，图片地址，平铺，图像滚动，背景图片位置书写。

例：

background: black url(images/logo.png) no-repeat fixed center top;

背景半透明

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

最后一个参数是alpha透明度，取值范围在0~1之间，1是黑色，0是透明。

0.3前面的0可以省略：

background: rgba(0,0,0,.3)

盒子背景变为半透明，盒子内容不变。

CSS三大特性

层叠性

相同选择器设置相同样式，此时一个样式会覆盖另一个冲突的样式。

原则：就近原则，哪个样式离结构近，就执行哪个。

若有字体等不冲突属性，则可以执行不会覆盖。

继承性

子标签会继承父标签的一些样式，如文本颜色和字号。

<style>
        body{
          color:pink;
          font:12px/1.5;
        }
        div{
          font-size:14px;
        }
    </style>

<body>
    <div>元素</div>
    <p>元素</p>
</body>

子元素div继承了父标签body的行高1.5

这个1.5就是当前元素文字大小font-size的1.5倍，所以当前div行高是21像素。

 font:12px/1.5;

注：行高可以跟单位也可以不跟单位。

如果子元素没有设置行高，则会继承父元素的行高为1.5；

此时元素的行高是：当前元素的文字大小*1.5。

优先级

选择器相同，执行层叠性。

选择器不同，根据选择器的权重执行。

<style>
        .text{
          color:red;
        }
        div{
          color:pink;
        }
        #demo{
          color:green;
        }
    </style>
</head>
<body>
    <div class="text" id="demo">优先级</div>
</body>
</html>

结果为绿色字体。

如果在pink后加上：

div{
          color: pink !important;;
        }

结果为粉色字体。

注：

权重是由4位数字组成的，但是不会有进位。

类选择器>元素选择器，id选择器>类选择器。

等级判断从左向右，如果某一位数值相同，正则判断下一位数值。

继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0.

#father{
          color:red;
        }
        /*p继承的权重为0*/
        /*p这个标签被直接选出来了，所以结果为粉色*/
        p{
          color:pink;
        }

<div id="father">
      <p>你</p>
    </div>

以后看标签执行哪个样式，先看这个标签有没有被直接选出来

body{
          color:red;
        }
        a{
          color:green;
        }

<a href="#">单独的样式</a>

a继承过来的权重为0，执行浏览器默认样式，结果不是绿色。

注：a链接浏览器默认指定了一个样式，蓝色的，有下划线。

权重叠加

ul li{
          color:red;
        }
li{
		color:green;
}

li的权重是0，0，1；

ul li的权重是0，0，1+0，0，1；

结果是红色字体。

权重虽然会叠加，但是不会进位

继承来的权重是0

盒子模型

组成

border边框，content内容，padding内边距，margin外边距

border边框

边框粗细（px），边框样式，边框颜色

border: border-width || border-style || border-color

border-style

solid:实线边框

dashed:虚线边框

dotted:点线边框

边框的复合写法

border:1px solid red；
/*没有顺序*/

边框分开写

border-top:1px solid red;
/*只设定上边框，其余同理，bottom*/

border:1px solid blue;
border-top:1px solid red;

利用层叠性，**上下颠倒不可以遵循就近原则。**层叠了上边框，其余边框为蓝色。

表格的细线边框

引例：

table{
          border:1px solid pink;
        }

table就是一个盒子，所以只能改变最外圈边框。加上td才能是全部边框线。

table,
   td,th{
          border:1px solid pink;
        }

把单元格交界处较粗线条变细。

border-collapse:collapse;

collapse合并，相邻边框合并在一起。

边框会影响盒子的实际大小

解决方案：

测量盒子大小时，不量边框。

如果测量时包含了边框，则需要width/height减去边框宽度。

padding内边距

设置内边距，即盒子边框和内容的距离。

padding-left:20px;

padding复合属性

padding会影响盒子实际大小

如果盒子已经有了宽度和高度，此时再指定内边框，就会撑大盒子，（可以利用撑开盒子使表格整齐）。

div{
          width: 200px;
          height: 200px;
          background-color:pink;
          padding:20px;
        }

解决方法：

让width/height减去多出来的内边距大小(左右/上下各20)。

如上：width:160px;

height:160px;

padding不会撑开盒子的情况

如果盒子本身没有指定宽高，就不会被撑大。

div{
          width: 160px;
          height: 160px;
          background-color:pink;
          padding:20px;
        }
        div p{
          padding:30px;
        }

div为p的父标签，p没有指定宽高，它继承了父标签的宽高。

margin外边距

盒子与盒子之间的距离

margin-left/right/top/bottom(左右上下外边距)

margin复合属性

margin简写方式与padding完全一致

外边距可以让块级盒子水平居中

必须满足：盒子指定了宽度。

盒子左右的外边距都设置为auto.

width:960px;
margin:0 auto;(常用)
/margin:auto;
/margin-left:auto;
margin-right:auto;

行内元素和行内块元素水平剧中

行内元素和行内块元素没有宽度。

方法：给其父元素添加text-align:center

.header{
          width:900px;
          height: 200px;
          margin:100px auto;
          text-align: center;
        }

<div class="header">
  <span>文字</span>
  <img src="down.jpg" alt="">
</div>

外边距合并

使用margin定义块元素的垂直外边距时，会出现外边距的合并。

相邻块元素垂直外边距的合并

解决方案：尽量只给一个盒子添加margin。

取两个值中较大的。

嵌套块元素垂直外边距的塌陷

 .father{
          width: 400px;
          height: 400px;
          background-color:pink;
          margin-top:50px;
        }
        .son{
          width: 200px;
          height: 200px;
          background-color:red;
          margin-top:100px;
        }

<div id="father">
      <div class="son"></div>
    </div>

对于两个嵌套关系的块元素，父元素上边有外边距同时子元素也有上边距，此时父元素会塌陷较大的上边距值。

解决方案：可以为父元素定义上边框；

.father{
          width: 400px;
          height: 400px;
          background-color:pink;
          margin-top:50px;
          border:1px solid red;
        }

可以为父元素定义上内边距；

.father{
          width: 400px;
          height: 400px;
          background-color:pink;
          margin-top:50px;
          padding:1px;
        }

可以为父元素添加overflow:hidden。

.father{
          width: 400px;
          height: 400px;
          background-color:pink;
          margin-top:50px;
          overflow:hidden;
        }

清除内外边距

不同网页有不同的内外边距，在布局前首先去除网页内外边距。

*{
	padding：0；/*清除内边距*/
	margin:0;/*清除外边距*/
}

注：行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距，需要时转换为块级和行内元素就可以。

圆角边框

border-radius:length;

border-radius:20px 10px 30px 40px;

盒子阴影

box-shadow增添阴影

box-shadow:h-shadow v-shadow blur spread color inset;

文字阴影

text-shadow给文字加阴影

text-shadow:h-shadow v-shadow blur color;