CSS进阶

最新推荐文章于 2024-07-26 15:05:55 发布

NoFear1015

最新推荐文章于 2024-07-26 15:05:55 发布

阅读量33

点赞数

分类专栏：前端文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_44697506/article/details/129746140

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、复合选择器

后代选择器：

<!--后代选择器格式 -->
父选择器 后代选择器{
}

<html lang="en">
<head>
    <style>
        div p{
            color: blue;
        }
    </style>
</head>
<body>
    <!-- 后代:儿子，孙子，重孙 -->
    <p>这是div外的p标签</p>
    <div>
        <p>这是div里的p标签(儿子)</p>                    <!--子标签会变成蓝色 -->
        <span>
            <p>这是div里的p标签(重孙)</p>                <!--孙子标签也会变成蓝色 -->
        </span>
    </div>
</body>
</html>

子代选择器：

<!--子代选择器格式: 只选择儿子 -->
父选择器>子选择器{
}

<html lang="en">
<head>
    <style>
        div>p{
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是div外的p标签</p>
    <div>
        <p>这是div里的p标签(儿子)</p>                        <!--子标签会变成蓝色 -->
        <span>
            <p>这是div里的p标签(重孙)</p>                    <!--孙子标签不会变成蓝色 -->
        </span>
    </div>
</body>
</html>

二、并集选择器

<!--并集选择器格式 -->
选择器1,子选择器2,选择器3{
}

<html lang="en">
<head>
    <style>
        div,p{
            font-style: italic;
            color: brown;
        }
    </style>
</head>
<body>
    <p>这是p里的内容</p>      <!--字体颜色变棕色、且为斜体 -->
    <div>
        这是div里的内容       <!--字体颜色变棕色、且为斜体 -->
    </div>
    
</body>
</html>

三、交集选择器

<!--交集选择器格式 -->
选择器1.子选择器2{
}

<html lang="en">
<head>
    <style>
        p.box{
            font-style: italic;
            color: rgb(255, 0, 0);
        }
    </style>
</head>
<body>
    <p class="box">这是p标签:有类box</p>      <!--字体颜色变红、且为斜体 -->
    <p>这是p标签:没有类box</p>
    <div class="box">
        这是div标签:有类box
    </div>
    
</body>
</html>

四、hover伪类选择器

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

<!--hover伪类选择器格式 -->
选择器:hover {
}

<html lang="en">
<head>
    <style>
        a:hover{
            color: red;
            background-color: black;
        }
    </style>
</head>
<body>
    <a href="https://baidu.com">百度一下</a>    <!--鼠标悬停时:字变为红色，背景变为黑色 -->  
    
</body>
</html>

五、emmet语法

简写语法，快速生成代码

html：

语法	示例	效果
标签名	div	<div></div>
类选择器	.red	<div class="red"></div>
id 选择器	#one	<div id="one"></div>
交集选择器	p.red#one	<p class="red" id="one"></p>
子代选择器	ul>li	<ul><li></li></ul>
内部文本	ul>li{内容}	<ul><li>Hello</li></ul>
创建多个	ul>li*3	<ul><li></li><li></li><li></li></ul>
创建自增	ul>li{$}*3	<ul><li>1</li><li>2</li><li>3</li></ul>
同级	div+p	<div></div><p></p>

CSS：

单词首字母	效果
fw	font-weight
w	width
h	height
bgc	backgroud-color
lh	line-height
w300+h200	width: 300px;height: 200px;

六、背景

属性	表示	取值
背景颜色	background-color(bgc)	英文(red)、RGB(255,234,0)等
背景图片	background-image(bgi)	url(' 图片路径')
背景平铺	background-repeat(bgr)	repeat(水平方向和竖直方向都平铺),no-repeat(不),repeat-x(水平),repeat-y(竖直)
背景位置	background-position(bgp)	两种方式：二维坐标——>(左中右，上中下)、像素(15px,45px)

<html lang="en">
<head>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color:pink;      /* 背景色:背景色在背景图之下 */
            background-image: url('./images/1.jpg');    /* 背景图 */
            background-repeat: no-repeat;          /* 背景图是否平铺 */  
            background-position:100px 100px;       /*背景图的位置*/
        }
        p{
            width: 400px;
            height: 400px;
            background: pink url('./images/1.jpg') no-repeat center;   /* 顺序可以改变 */
        }  
    </style>
</head>
<body>
    <div>div</div>
    <p>p标签</p>
</body>
</html>

img标签和背景图片区别：

img：不设置宽高会默认显示；重要的图使用img。

背景图：需要设置尺寸元素；装饰性图片使用背景色

七、元素显示模式

7.1 元素类型及特点

元素类型	代表标签	特点
块级元素	div,p,h系列,ul,li,dl,dt,dd,form,header,nav,footer	独占一行、宽度默认为父元素宽度，高度由内容撑开、可以设置宽高
行内元素	a,span,b,u,i,s,strong,ins,em,del	一行显示多个、宽度和高度默认都由内容撑开、不能设置宽高
行内块	input,textarea,button,select,img	一行可以显示多个、可以设置宽高