前端学习记录---CSS基础（选择器+背景+显示模块）

最新推荐文章于 2024-04-13 12:25:41 发布

俩小歪

最新推荐文章于 2024-04-13 12:25:41 发布

阅读量303

点赞数

文章标签：前端学习 css

本文链接：https://blog.csdn.net/m0_69483514/article/details/131251701

版权

一、CSS选择器

复合选择器（父代选择器、子代选择器）
并集选择器
交集选择器

1.复合选择器：父代选择器、子代选择器

（1）父代选择器

后代包括：儿子、孙子、重孙子
选择器之间用空格隔开

父选择器后代选择器: {

属性名：属性值

}

<style>      
        /* 1.父代选择器  */
        /* 格式：父选择器 后代选择器{} */  
        div p{
            color: #a52828;
        }
</style>

<body>
    <!-- 1.父代选择器实验 -->
    <p>与div同级的p标签</p>
    <div>
        父级
        <p>
            p是div的儿子
        </p>
    </div>
</body>

（2）子代选择器

只选儿子
选择器之间用>隔开

父选择器 > 子代选择器: {

属性名：属性值

}

<style>      
        /* 2.子代选择器  */
        /* 格式：父选择器 后代选择器{} */
        /* 只想选中儿子改变 >只选择子代 */
        div>a{
            color: #a52828;
        }
</style>

<body>
    <!-- 2.子代选择器实验 -->
    <div>
        <a href="#">这是div里的a</a>
        <p>
            p是div的儿子
            <a href="#">div里的p的a</a>
        </p>
    </div>
</body>

2.并集选择器

选择器之间用，隔开

选择器1, 选择器2: {

属性名：属性值

}

<style>      
        /* 3.并集选择器, */
        /* 选择器1,选择器2{} */
        div,
        p{
            color: #a52828;
        }
</style>

<body>
     <!-- 3.并集选择器实验 -->
     <div>kkk</div>
     <p>aaa</p>

     <span>span</span>
</body>

3.交集选择器

选择器之间用.隔开

<style>      
        /* 4.交集选择器, */
        /* 选择器1.选择器2{} */
        p.box{
            color: red;
        }
</style>

<body>
     <!-- /* 4.交集选择器实验 */ -->
     <p class="box">这是p</p>
     <p>ppp</p>
     <div class="box">这是div-box</div>
</body>

4.hove 伪类r选择器

鼠标悬停就改变状态

<style>      
        /* 5.hover伪类选择器 */
        /* 选择器:hover{css} */
        a:hover{
            color: brown;
            background-color: aqua;
        }
        div:hover{
            color: blue;
        }

</style>

<body>
     <!-- /* 5.hover伪类选择器 */ -->
     <a href="#">link---</a>
     <div>
        divhhhh
     </div>
</body>

5.emmet语法

简写语法，快速生成代码
VS Code 等代码编辑器自带
table>(tr*4>td*4) 创建

语法	示例	效果
标签名	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>`

二、背景相关属性

1.背景颜色：background-color （默认值是透明）

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red、green、blue
rbg 表示法	红绿蓝三原色，取值 0-255	rgb(0,0,0)
rgba 表示法	红绿蓝三原色+透明度，取值 0-1	rgba(0, 0, 0, 0.5)
十六进制表示法	#开头	#000000 简写 #000

2.背景图片：background-image

背景图片的大小：background-size：--px
设置背景图之前一定要设置标签宽高：否则只显示一行（div）

3.背景平铺：background-repeat

默认为平铺：repeat
其他属性值：no-repeat、repeat-x 、repeat-y

<style>      
        /* 2.背景图  backgroun-image*/
        div{
            /* 有背景图要设置宽高 不然无法显示 */
            width: 400px;
            height: 250px;
            color: rgb(240, 239, 241);
            background-color: pink;
            background-image: url(./222.jpg);
            background-size: 200px;            
            background-repeat: no-repeat;
            /* background-repeat: repeat-x;
            background-repeat: repeat-y; */
        }
</style>

<body>
      <!-- 2.背景图 -->
     <div>背景图可以写文字--subtle</div>
</body>

4.背景图位置 background-position

方位名词：水平：left/center/right 垂直方向：top/center/botttom
两个center可省略一个就是都居中
数字+px：从左上角（0，0）开始取值可以为正也可以为负
背景图不能穿越盒子出了范围不显示

5.背景属性复合

/* 不分先后顺序 */

background: color image repeat position;

补充font属性复合

font：style weight size/line-height family;

6.img与背景图的区别

img

不设置高宽会默认显示
重要突出的图使用 img

background-image

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

三、显示模块

元素显示模式：块级、行内、行内块

1.块级元素

独占一行
宽度默认为父元素 100%；高度默认由元素撑开
可以设置宽度和高度
div、 p 、h、 tr、 ul 、li、 dl 、dt、 form 、header 、nav 、footer

<style>      

        /* 1.块级显示模块 */
        div{
            width: 100px;
            height: 100px;
            background-color: palegoldenrod;
        }
</style>

<body>
     <!-- 三、元素显示模式 -->
     <!-- 1.块级：独占一行/可以设置高宽/宽默认父元素宽度、高度默认内容撑开 -->
     <!-- div p h tr ul li dl dt form header nav footer -->
     <div>1111</div>
     <div>222</div>
</body>

2.行内元素

一行显示多个
宽度和高度默认由内容撑开背景大小和内容一样大
不可以设置宽度和高度
a、 span、 b、 u、 i、 s、 strong

<style>      

        /* 2.行内显示模块 */
        span{
            width: 300px;
            height: 200px;
            background-color: palegoldenrod;
        }
</style>

<body>
     <!-- 2.行内元素标签  不可以设置宽高/尺寸和内容一样大-->
     <!-- a span b u i s strong  -->
     <span>span</span>
     <span>span</span>
</body>

3.行内块

一行显示多个
可以设置宽度和高度
input、 textarea、 button、 select

<style>      
        /* 3.行内块显示模块 */
        img{
            width: 200px;
            height: 125px;
        }
</style>

<body>
     <!-- /* 3.行内块：一行显示多个/可以设置宽高 */ -->
     <!-- input textarea button select img -->
     <img src="./222.jpg" alt="" width="100px" >
     <img src="./222.jpg" alt="" height="200px">
     <span>span</span>
</body>

不加选择器之前效果：

加选择器之后的效果：

4.元素显示模式转换 display

块级：diaplay：block
行内块：display：inline-block
行内：display：inline

<style>      
        span{
            width: 300px;
            height: 200px;
            background-color: palegoldenrod; 
            /* display: block; */
            /* display: inline-block; */
        }
</style>

<body>
     <!-- 4.显示模式转换 三种模式之间相互转换 -->
     <!-- display：block/inline-block/inline -->
     <div>
        <img src="./222.jpg" alt="" width="100px" >
     </div>
    <div>
        <img src="./222.jpg" alt="" height="200px">
    </div>
     <span>span</span>
     <input type="text" placeholder="请输入昵称">
</body>

图1为不添加选择器图2 为选择器display：block 图3 为选择器display：inline-block（span）

扩展：div存放照片调整diaplay

div{

/* display: inline-block; */

width: 150px;

height: 100px;

display: inline;

display: inline-block;

}

（1）若把div的选择器display在inline 、span的默认原始值：inline

（2）若把div的选择器display在inline-block 、span的默认原始值：inline

只是把div的宽高限制了照片还是会显示

5.HTML嵌套规范

块级元素一般作为大容器;
可以嵌套文本、块级元素、行内元素、行内块元素
p 标签中不要嵌套 div p h 等块级元素

p 标签中不要嵌套 div p h 等块级元素

a 标签内部可以嵌套任意内容

a 标签不能嵌套 a 标签

练习1：导航鼠标悬停变颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航</title>
    <style>
        a{
            text-decoration: none;
            width: 100px;
            height: 50px;
            background-color: red;
            display: inline-block;
            color: wheat;
            text-align: center;
            /* 居中的效果 */
            line-height: 50px;  
        }
        a:hover{
            background-color: orange;
        }



    </style>
</head>
<body>
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>

俩小歪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端学习记录---CSS基础（选择器+背景+显示模块）

图1为不添加选择器图2 为选择器display：block 图3 为选择器display：inline-block（span）（2）若把div的选择器display在inline-block 、span的默认原始值：inline。（1）若把div的选择器display在inline 、span的默认原始值：inline。p 标签中不要嵌套 div p h 等块级元素。父选择器 > 子代选择器: {父选择器后代选择器: {选择器1, 选择器2: {a 标签不能嵌套 a 标签。
复制链接

扫一扫