css-02-优快云博客

1. CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

1.1 并集选择器

并集选择器）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器，id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

<style>

/* 还有个需求是两个名字都加粗,字体大小都是32px */

/* 并集选择器 */

con1,

con2{

font-size: 32px; /*不同标记组成的并集选择器*/

font-weight: 700;

}

</style>

</head>

<body>

<div class="con1 common">陈同学</div>

<div class="con2 common">郭同学</div>

<div class="con3"></div>

</body>

1.2 后代选择器(重点)

后代选择器用来选择元素或元素组的后代。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标记发生嵌套时,内层标记就可以成为外层标记的后代。

<style>

/* 后代选择器->用来选择元素或则元素的子孙后代->精准选择

中间用逗号隔开 */

ul li div span{

color: pink;

}

</style>

</head>

<body>

<ul>

<li>

<div>

<span>胡同学</span>

</div>

</li>

<li>

<span>陈同学</span>

</li>

</ul>

</body>

1.3 子元素选择器（重点）

子元素选择器只能选择作为某元素子元素的元素。子元素选择器只能选择作为某元素子元素(亲儿子)的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

<style>

/* 某元素**子元素(亲儿子)**元素

选择最近一级元素用>隔开*/

ul li>span{

color: aliceblue;

}

</style>

</head>

<body>

<ul>

<li>

<div>

<span> 胡同学</span>

</div>

</li>

<li>

<span>陈同学</span>

</li>

</ul>

</body>

2.标签显示模式（display）（重点）

2.1 块级元素(block-level)

块元素在页面中以区域块的形式出现，其特点，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

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

2.2 行内元素(inline-level)

行内元素（内联元素）不占有独立的区域，其特点是，不必在新的一行开始，同时，也不强迫其他元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行，它们不占有独立的区域。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

2.3 行内块元素（inline-block）

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

<style>

div{

height: 200px;

width: 200px;

}

span{

height: 200px;

width: 200px;

}

.img{

height: 20px;

width: 20px;

}

</style>

</head>

<body>







<div>Hello word</div>

<div>Hello word</div>





<span>今天周五,明天干点啥?</span>

<span>在宿舍睡觉</span>





<img src="./img/微信图片_20240614100800.jpg" alt="">







</body>

2.4元素的转换(display)

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

div{

height: 200px;

width: 200px;

background-color: red;

/* 显示模式转换 */

display:inline ;

/* display:inline-block; */

} /* 显示模式转换 */

span{

/* 显示模式转换 */

display:block;

height: 200px;

width: 200px;

background-color: #0f0;

}

</style>

</head>

<body>







<div>内容1</div>

<div>内容2</div>

<span>行内元素</span>









<a href="">

<img src=".img\微信图片_20240614100800.jpg" alt="">

</a>

</body>

3.背景样式

3.1背景颜色

.box {
/* 下面3种写法是等价的 */
background-color: red;
background-color: rgb(255, 0, 0); /*RGB 值*/
background-color: #ff0000; /*十六进制值*/
}

3.2 背景图片

background-image: url(./img/微信图片_20240614100800.jpg);

3.3 图片重复方式

.box {

/* repeat 默认值，默认情况下，在水平和垂直方向上都重复*/

background-repeat: repeat;

background-repeat: repeat-x; 

background-repeat: repeat-y; 

background-repeat: no-repeat; 

}

3.4 图片位置(重点)

/*
水平：left center right
垂直：top center bottom
*/

.box {
background-position: 40px 40px;（水平位置、垂直位置）
background-position: 20% 20%; /*百分比 */
background-position: right bottom; /* 表示方位的单词*/
}

4.精灵图

<style>

span{

/* 选择工具直接框大小 */

width: 25px;

height: 25px;

/* 背景图片 */

background-image: url(./img/背景图.png);

/* 背景定位 */

background-position: 0 -106px;

}

</style>

</head>

<body>

<span></span>

</body>