Day05

不万能的小李.

已于 2023-08-10 20:03:26 修改

阅读量33

点赞数

分类专栏： HTML5 和 css 文章标签：前端 html css

于 2023-07-12 08:28:18 首次发布

本文链接：https://blog.csdn.net/Li1023055421/article/details/131673172

版权

HTML5 和 css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1、dispaly属性

设置内联块元素（行内块元素）

display:inline-block;

他的本质是对内显示块标签属性，对外显示行标签属性

两个内联块元素之间的缝隙的处理方式

原因：

两个内联块元素之间键入的回车，回车也是一个字符，它的大小和父标签的font-size有关

解决办法：

1.去掉回车键

2.设置他们父元素的大小为0px

注意，字体大小是可以被传递到子元素上的

02、css选择器

基选择器

1. 通配选择器

* 表示通配符，它可以匹配任何标签

* { css内容 }

2. 标签名选择器

E { css内容 } 给所有标签名为 E 的元素设置css样式

3. 类名选择器

.类名 {css内容}

使用的时候需要在标签上绑定 class="类名" 如果有多个类名，使用空格隔开，类名最好不要超过5个

4. id选择器

#id名 {css 内容}

在一个页面当中,id是唯一的,只能绑定在一个标签上,也就是一个页面中没有同名的id

5. 群组选择器

如果多种选择器所表达的css内容是相同的,则可以把他们写成群组选择器

.wp,#abc div { css 内容}

        /* 通配选择器 */
        * {
            color:#f66;
        }
        /* 标签名选择器 */
        div {
            border: 1px #ff0 solid;
        }
        span {
            font-size: 30px;
        }
        /* 类名选择器 */
        .mu-lan1 {
            background:rgba(255, 0, 0, 0.3);
        }
        .wp {
            width: 200px;
            height: 200px;
            border: 1px #ccc solid;
        }
        /* id选择器 */
        #abc {
            font-size: 40px;
            color: #04be02;
        }
        #book {
            font-size: 80px;
            color: #000;
            background-color: #f66;
        }
        .sp {
            color: #00f;
        }
        /* 设置一个群组选择器 */
        #abc,div,.wp {
            background-color: rgb(78, 50, 50);
        }

03、层次选择器

1.后代选择器

.E M { css内容 }通过 E 选择器设置 E 中的 M 选择器中的 css内容, M可以是E的子级,也可以是E的后代中的某一个选择器

2.父子选择器

E>M { css内容 } 通过 E 选择器找到E选择器的自己M选择器,设置css内容

3.兄弟选择器

E~M { css内容 } 通过E选择器找到该元素之后的所有选择器名为 M 的兄弟元素,并设置css样式

4.相邻兄弟选择器

E+M { css内容 } 通过E 选择器找到该元素之后的第一个兄弟元素M ,并且对M设置css样式

        /* 后代选择器 */
        ul li {
            border: 1px #f00 solid;
            /* list-style-type: none; */
        }
        ul span {
            font-size: 30px;
        }
        /* 父子选择器 */
        ul>li {
            background: #ccc;
        }
        ul>li>span {
            background: #04be02;
        }
        ul>li>div {
            display: inline-block;
            width: 200px;
            color: rgb(31, 87, 122);
            background-color: #f66;
        }
        ul>li>div>p {
            color: #04be02;
            background: rgb(3, 235, 19);
            display: inline-block;
        }
        /* 兄弟选择器 */
        .f~li {
            height: 50px;
        }
        /* 相邻兄弟选择器 */
        .f+li {
            height: 200px;
            color: #ff0;
        }

04、伪类选择器

a的伪类

伪类,是css系统创建好的内部的类,用来对标签的某一个时机设置样式

设置样式

link:初始时候的状态

visited:点击之后的状态

hover:鼠标悬浮时候的状态

active:鼠标按下不松手时候的状态

顺序是 l -> v -> h -> a (先爱后恨)

ie8以后,任何标签都可以添加:hover 伪类

可以根据 hover 触发元素本身,以及通过元素能找到的元素的变化

        a:link {
            color: #04be02;
            text-decoration: none;
        }
        a:visited {
            color: #f0f;
        }
        a:hover {
            color: #ff0;
            font-size: 20px;
            font-weight: bold;
            background-color: #ccc;
            text-decoration: none;
        }
        a:active {
            color: #f60;
        }
        .wp {
            width: 200px;
            height: 200px;
            background-color: #f60;
            display: none;
        }
        /* hover的用法 */
        .show:hover+div {
            display: block;
        }
        .show:hover span {
            display: none;
        }
        .change {
            width: 200px;
            height: 200px;
            background-color: #f0f;
        }
        .change:hover {
            background:#f60;
            color:#fff;
            width:200px;
            height: 200px;
            font-size: 20px;
        }

05、选择器的优先级

什么时候需要考虑选择器的优先级?

不同的选择器,同时作用于同一个标签元素.并且他们具有相同的css属性设置,对该css属性设置了不同的值

选择器优先级的强弱顺序:

1. !important 100000

2. 行间样式,在标签上添加 style属性 10000

3. id选择器 1000

4. 类名选择器,伪类选择器,属性选择器 100

5.元素(标签名)选择器,伪元素选择器 10

6.通配符选择器 1

7.系统默认提供的css属性 0

假设后面的数字是权重的值,那么在比较的时候,只需要把选择器的值相加,然后比较大小既是权重的大小