css3学习day03

最新推荐文章于 2024-07-19 15:16:23 发布

sep.17

最新推荐文章于 2024-07-19 15:16:23 发布

阅读量986

点赞数 31

分类专栏： css3 背景样式选择器标签文章标签： css3 学习前端

本文链接：https://blog.csdn.net/2201_75646248/article/details/139690952

版权

css3 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

背景样式

1 篇文章 0 订阅

订阅专栏

选择器标签

1 篇文章 0 订阅

订阅专栏

一. CSS复合选择器

1.1 并集选择器

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

.con1,
        .con2 {
            font-weight: 700;
            font-size: 32px;
        }
<div class="con1">胡为</div>
<span class="con2">沈妙</span>

1.2 后代选择器(重点)

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

用来选择元素或元素组的子孙后代。
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写爷爷父亲，在写儿子孙子。

ul li div span {
            color: pink;
        }

<ul>
        <li>
            <div>
                <span>哈迪</span>
            </div>
        </li>
        <li>
            <span>刘炼</span>
        </li>
</ul>

1.3 子元素选择器（重点）

子元素选择器只能选择作为某元素子元素的元素。

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

ul li>span {
            color: pink;
        }

<ul>
        <li>
            <div>
                <span>哈迪</span>
            </div>
        </li>
        <li>
            <span>刘炼</span>
        </li>
</ul>

1.4 复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	是选择所有的子孙后代	较多	符号是空格 .nav a
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
子元素选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p

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

2.1 块级元素(block-level)

块级元素的特点：

（1）总是从新行开始。

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

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

（4）可以容纳内联元素和其他块元素。

常见的块级元素:p div h1-h6 li ul ol hr

2.2 行内元素(inline-level)

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

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

（4）行内元素只能容纳文本或者其他行内元素。（a特殊）

常见的行内元素:span a b strong i u ins s del

注意:

只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
链接里面不能再放链接。

2.3 行内块元素（inline-block）

行内块元素的特点：

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

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

常见的行内块元素:img input button

2.4 标签显示模式转换 display

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

3. 背景样式（重点）

3.1 背景颜色(background-color )

.box {
    width: 500px;
    height: 500px;
    /* 下面3种写法是等价的 */
    background-color: red;
    background-color: rgb(255, 0, 0);
    background-color: #ff0000;
}

<div class="box"></div>

3.2 背景图片(background-image )


width: 5000px;
height: 5000px;
background-image: url(../day0612/img/girl.jpeg);

<div class="box"></div>

3.3 图片重复方式(background-repeat )

width: 5000px;
height: 5000px;
background-image: url(../day0612/img/girl.jpeg);
/* 背景重复 默认值repeat 不重复 no-repeat 水平方向 repeat-x 垂直方向 repeat-y*/
            background-repeat: no-repeat;
            border: 1px solid #ccc;

<div class="box"></div>

3.4背景定位(background-position )

.box {
    /*
    水平：left center right
    垂直：top  center bottom
    */
    /* 水平位置、垂直位置 */
    background-position: 40px 40px;
    /* 默认值 0% 0% */
    background-position: 20% 20%;
    /* 右下位置 */
    background-position: right bottom;
}

<div class="box"></div>