css进阶知识点速览

0前言

零基础部分的博客

1选择器进阶

1.1后代选择器

作用：根据html标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2 {css}
结果：
在选择器1所找到标签的后代中
注意：
后代包括：儿子、孙子等等

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <p>
        <div>
            <p>hello world</p>
        </div>
    </p>
</body>

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: green;
        }
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <p>hello</p>
    <p>
        <div>
            <p>hello world</p>
        </div>
    </p>
</body>

在这里插入图片描述

1.2子代选择器

作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1 > 选择器2 {css}
结果：
在选择器1所找到标签的子代中，找到满足选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p {
            color: green;
        }

    </style>
</head>
<body>
    <div>
        hello
        <p>hello world</p>
        <a href="web">
            <p>hello baby!</p>
        </a>
    </div>
</body>

在这里插入图片描述
如果改用>，如下：

    <style>
        div > p {
            color: green;
        }
    </style>

在这里插入图片描述

1.3 并集选择器

作用：同时选择多组标签，设置同样的样式
选择器语法：选择器1,选择器2{css}
结果：
找到选择器1和选择器2选中的标签，设置样式

1.4交集选择器

作用：选中页面中同时满足多个选择器的标签
选择器语法：选择器1.选择器2{css}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.no1 {
            color: green;
        }
    </style>
</head>
<body>
    <p class="no1">hello</p>
    <div>hello</div>
    <div class="no1">hello</div>
</body>

在这里插入图片描述

1.5 伪类

作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器:hover{css}

1.6 Emmet语法

作用：通过简写，快速生成代码
语法如图[1]：
在这里插入图片描述

2 背景色

2.1背景颜色

属性名：background-color (bgc)
属性值：
颜色取值：关键字、rgb表示法、rgba表示法、十六进制
注意点：
背景颜色默认是透明的：rgba(0,0,0,0)、transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色。

2.2 背景图片

属性名：background-image (bgi)
属性值：background-image: url(‘图片路径’)
注意点：
1背景图片中url可以省略引号
2背景图片默认是在水平垂直方向平铺的
3背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色

2.3背景平铺

如果在style标签中设置的宽和高多大，而图片本身小，会导致图片复制多份而覆盖style设置的区域。
属性名：background-repeat(bgr)
属性值如图[1]
在这里插入图片描述

2.4 背景位置

属性名：background-position(bgp)
在这里插入图片描述
background-position:水平位置设置垂直位置设置

2.5背景相关属性连写

属性名:background(bg)
属性值：单个属性值合写。取值之间以空格隔开
书写顺序：
background: color image repeat position
复合属性就是一个属性名加多个值

2.6背景与img标签的区别

img标签是一个标签，不设置宽高默认以固定原尺寸显示
img为插入图片，主要用来显示重要的图片，比如宣传图；
div标签+背景图片：需要设置div的宽高，因为背景图片只是装饰css的样式，不能撑开div标签。因此，不设置宽高，没有盒子就没有图片
只起修饰作用的，可有可无的图片就用背景图片

3 元素显示模式

<>叫标签，也叫元素

3.1块级元素

显示特点：
1独占一行
2宽度默认是父元素的宽度，高度默认由内容撑开
3可以设置宽高
代表标签：
div,p,h系列,ul,li,dl,dt,dd,form,header,nav,footer…

3.2行内元素

显示特点：
1一行可以显示多个
2宽度和高度默认由内容撑开
3不可以设置宽高
代表标签：
a,span,b,u,i,s,strong,ins,em,del…

3.3行内块元素

显示特点：
1一行可以显示多个
2可以设置宽高
代表标签：
input,textarea,button,select
特殊情况：img

3.4元素显示模式的转换

目的：改变元素默认的显示特点，让元素符合布局要求
语法:
display:block 转换成块级元素较多
display:inline-block 转换成行内块元素较多
display:inline 转换成行内元素较少
自然，在元素（标签）的css中进行设置

3.5 拓展

1块级元素一般作为大容器，可嵌套文本、块级元素、行内元素、行内块元素等
但是：p标签中不要嵌套div，p，h等块元素
2a标签内部可用嵌套任意元素
但是：a标签不能套a标签

4 CSS特性

4.1继承性

特性：子元素有默认继承父元素样式的特点
可以继承的常见属性：1color 2font-style,font-weight, font-size, font-family 3text-indent, text-align 4line-height
颜色、字样式、首行缩进、行高
注意点：1可通过调试工具判断样式是否可以继承
2所有控制文字的都能继承，不是控制文字的都不能继承
继承性失效的情况：
1a标签的color会继承失效
2h系列标签的font-size会失效

4.2层叠性

1给同一个标签设置不同的样式，此时样式会层叠叠加，会共同作用在标签上；
2给同一个标签设置相同样式，此时样式会层叠覆盖，最终写在最后的样式生效。
注意：当样式冲突时，只要当选择器优先级相同时，才能通过层叠性判断结果

5 案例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div a {
            height: 30px;
            width: 50px;
            background-color: red;
            display: inline-block;
            text-decoration: none;
            color: white;
            text-align: center;
            line-height: 30px;
        }
        div a:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        <a href="">导航1</a>
        <a href="">导航2</a>
        <a href="">导航3</a>
        <a href="">导航4</a>
        <a href="">导航5</a>
    </div>
</body>