CSS进阶-黑马程序员-前端零基础

最新推荐文章于 2025-12-26 23:32:44 发布

原创最新推荐文章于 2025-12-26 23:32:44 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

本文深入探讨了CSS中的选择器高级用法，包括后代选择器、子代选择器、并集选择器和交集选择器，以及hover伪类选择器和Emmet语法的使用。同时，详细介绍了背景图片、平铺和位置的设置方法。此外，还涵盖了元素显示模式的转换，如将元素转换为块级或行内块元素。最后，文章分享了一个实用技巧，利用text-align和line-height实现文字居中显示。

1.选择器进阶

后代选择器：空格	选择器1 选择器2{ CSS }	后代，儿子孙子重孙子
子代选择器：>	选择器1 > 选择器2{ CSS }	儿子
并集选择器	选择器1，选择器2{ CSS }	同时选择多组标签，设置相同的样式（建议每写一个选择器换一行）
交集选择器	选择器1选择器2{ CSS }	p.box

1.1hover伪类选择器

选中鼠标悬停在元素上的状态，设置样式

选择器：hover { CSS }

1.2emmet语法

    <!-- 生成div带类名 -->
    .box
    <div class="box"></div>
    p.box
    <p class="box"></p>
    <!-- div 同级 p + -->
    div+p
    <div></div>
    <p></p>
    <!-- 父子 > -->
    div>p
    <div>
        <p></p>
    </div>
    <!-- ul 有4个li *乘号 -->
    ul>li*4
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    ul>li{111}*3
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>

w300+h500+bgc回车，这个很常用

2.背景相关属性

2.1背景图片

background-image（bgi）

background-image：url（'图片的路径');

这里的引号可以省略

2.2背景平铺

background-repeat (bgr)

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

2.3背景位置

background-position （bgp）

background-position：水平方向位置垂直方向位置；（空格隔开）

属性值	方位名词	水平方向	left center right
		垂直方向	top center bottom
	数字+px（坐标）	坐标系	原点（0，0）盒子的左上角
			x轴水平向右 y轴垂直向下

3.元素显示模式

块级元素	独占一行，可以设置宽高	div,p,h,ul,li,dl,dt,form,header
行内元素	一行可以显示多个，高度和宽度默认由内容撑开，不可以设置高宽	span,a,b,u,i,s,strong,ins,em
行内块元素	一行可显示多个，可以设置宽高	input,textarea,button,select,img

3.1转换

改变元素默认的显示特点，让元素符合布局要求

属性	效果	使用频率
display：block	转化成块级元素	较多
display：inline-block	转化成行内块元素	较多
display：inline	转化成行内元素	较少

一个新的发现

            width: 100px;
            height: 50px;
           
            text-align: center;
            line-height: 50px;
            /* 设置行高还有水平居中，可以让文字在框架中居中显示 */