【CSS学习笔记02】复合选择器、块元素、行内元素、背景设置、单行文字垂直居中、快速生成html标签

最新推荐文章于 2024-06-01 16:06:49 发布

Pump09

最新推荐文章于 2024-06-01 16:06:49 发布

阅读量123

点赞数

分类专栏： CSS学习文章标签： css css3

本文链接：https://blog.csdn.net/m0_46503569/article/details/115803911

版权

CSS学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

【CSS学习笔记02】

1.复合选择器

1.1后代选择器

        /* 任意基础选择器组合，选择器间用空格隔开 */

        ol li {
            color: pink;
        }

        ol li a {
            color: red;
        }
        
        .nav li a {
            color: yellow;
        }

1.2子元素选择器

    <style>
        /* 最近一级的选择器 */
        .nav>a {
            color: red;
        }
    </style>

1.3并集选择器

        div,
        p,
        .pig li {
            color: pink;
        }

id：身份证（唯一） class：可以理解为名字（可以被多个人使用）

1.4链接伪类选择器

    <style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
            text-decoration: underline;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
        /* 5.因为a标签在浏览器中具有默认样式，实际工作中需要单独指定样式 */
        /* 6.注意：为确保生效，请按照LVHA的顺序声明链接伪类选择器 （记忆法：LV好） */
    </style>

1.5focus伪类选择器

    <style>
        /* //focus伪类选择器用于选取获得焦点的input表单元素选取出来 使用较少 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
    
	<body>
	    <input type="text">
	    <input type="text">
	    <input type="text">
	</body>

在这里插入图片描述

2.显示模式

2.1块级元素

块级元素自己独占一行

    <style>
        div {
            /* width: 200px; */
            height: 200px;
            background-color: pink;
        }
    </style>

2.2行内元素

在这里插入图片描述

     <style>
        span {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
    </style>

2.3行内块元素

        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }

2.4模式转换

    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素 a 转换为 块级元素 ，可增加触发范围*/
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 把 div 块级元素转换为行内元素 */
            display: inline;
        }

        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>

3.背景设置

3.1背景颜色

    <style>
        div {
            width: 200px;
            height: 200px;
            /* background-color: transparent;   透明的 清澈的  */
            /* background-color: red; */
            background-color: pink;
        }
    </style>

3.2背景图片

        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            /* background-position: center auto; */
            background-position: center top;

        }

3.3背景固定

    <style>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            /* 默认是滚动的 */
            /* background-attachment: scroll; */
            /* 把背景图片固定住 */
            /* background-attachment: fixed; */
            color: #fff;
            font-size: 20px;
        }
    </style>

4.单行文字垂直居中

    <style>
        div {
            width: 200px;
            height: 40px;
            background-color: pink;
            line-height: 40px;
            /* 行高等于盒子高度就可以让文字垂直居中
               如果小于位置就会偏上 大于偏下
            */
        }
    </style>

5.emmet语法快速生成html标签和样式

5.1快速生成html标签

在这里插入图片描述

5.2快速格式化代码

在这里插入图片描述

6.简单版小米侧边栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单版小米侧边栏</title>
    <style>
        /* 1. 把a转换为块级元素 */
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }

        /* 2 鼠标经过链接变换背景颜色 */
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>

    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>

7.综合案例-五彩导航

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合案例-五彩导航</title>
    <style>
        .nav a {
            /* 转成行內块元素 */
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            line-height: 48px;
            color: #fff;
            text-decoration: none;
        }

        .nav .bg1 {
            background: url(images/bg1.png) no-repeat;
        }

        .nav .bg1:hover {
            background-image: url(images/bg11.png);
            /* background: url(images/bg11.png); */

        }

        .nav .bg2 {
            background: url(images/bg2.png) no-repeat;
        }

        .nav .bg2:hover {
            background-image: url(images/bg22.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
    </div>
</body>

</html>

Pump09

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS学习笔记02】复合选择器、块元素、行内元素、背景设置、单行文字垂直居中、快速生成html标签

【CSS学习笔记01】1.复合选择器1.1后代选择器 /* 任意基础选择器组合，选择器间用空格隔开 */ ol li { color: pink; } ol li a { color: red; } .nav li a { color: yellow; }1.2子元素选择器 <sty
复制链接

扫一扫