CSS基础-选择器、背景设置

最新推荐文章于 2022-12-04 20:02:00 发布

qq_52822043

最新推荐文章于 2022-12-04 20:02:00 发布

阅读量607

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_52822043/article/details/123087063

版权

1.1 emmet语法

生成标签，直接输入标签名按tab健即可，比如 div 然后 tab键就可以生成<div></div>。
如果想要生成多个相同标签，加上*，比如 div*3 就可以快速生成3个div。
如果有父子关系的标签，可以用>，比如 ul>li 就可以了。
如果有兄弟关系的标签，用+就可以了，比如 div+p。
如果生成带有类名或者id名字的，直接写.类名或者 #id名 tab键就可以了。
如果生成的div类名是有顺序的，可以用自增符号$。

1.2 CSS复合选择器

后代选择器：又称为包含选择器，可以选择父元素里面的子元素。

/*
    语法：元素1 元素2 { 样式声明 }
        1.表示选择元素1里面的所有元素2（后代元素)
        2.元素1和元素2中间用空格隔开，元素1是父级，元素2是子级，最终选择的是元素2 
        3.元素1和元素2可以是任意选择器     
*/

<style>
        ol li {
            color: pink;
        }
</style>

子选择器：只能选择作为某元素的最近一级子元素。就是选亲儿子元素。

/*
    语法：元素1>元素2 { 样式声明 }
        1.表示选择元素1里面的所有直接后代元素2（子元素)
        2.元素1和元素2中间用大于号隔开，元素1是父级，元素2是子级，最终选择的是元素2 
        3.元素2必须是亲儿子，其孙子、重孙之类都不归他管    
*/

<style>
        .nav>a {
            color: red;
        }
</style>


    <div class="nav">
        /*只会对这个a起作用*/
        <a href="#">儿子</a>
        <p>
            <a href="#">孙子</a>
        </p>
    </div>

并集选择器：可以选择多种标签，同时为他们定义相同的样式，通常用于集体声明。

/*
    语法：元素1,元素2 { 样式声明 }
        1.表示选择元素1，元素2
        2.逗号：和 
        3.通常用于集体声明
*/

<style>
        div,
        p {
            color: red;
        }
</style>


    <div>ddd</div>
    <p>lili</p>

伪类选择器：用于某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。用冒号：表示。

1）链接伪类选择器：

<style>
        /*LVHA的循顺序声明*/
        /* 1.a:link 选择未被访问过的链接 */
        a:link {
            color: #333;
            text-decoration: none;
        }
        /* 2.a:visited 选择已被访问过的链接 */
        a:visited {
            color: gray;
        }
        /* 3.a:hover 选择鼠标经过的链接 */
        a:hover {
            color: red;
        }
        /* 4.a:active 选择鼠标点击但是鼠标还没有弹开的链接 */
        a:active {
            color: skyblue;
        }
</style>

<body>
    <a href="#">小猪佩奇</a>
</body>

2）:focus伪类选择器：用于选取获得焦点的表单元素。

<style>
    /* 把获得光标的input元素选取出来 */
        input:focus {
            background-color: red;
            color: green;
        }
</style>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

1.3 元素的显示模式

元素显示模式：元素（标签）以什么形式进行展示。HTML元素一般分为块元素和行内元素两种类型。
元素显示模式的转换：一个模式的元素需要另外一种模式的特性。
转化为块元素：display:block;
转换为行内元素：display:inline;

转换为行内块元素：display:inline-block;

<style>
        a {
            width: 200px;
            height: 100px;
            background-color: red;
            /* 行内元素转换为块级元素 */
            display: block;
        }
        div {
            width: 200px;
            height: 100px;
            background-color: green;
            /* 块级元素转换为行内元素 */
            display: inline;
        }
        span {
            width: 200px;
            height: 100px;
            background-color: blue;
            /* 行内元素转换为行内块元素*/
            display: inline-block;
        }
</style>

<body>
    <a href="#">行内元素1</a>
    <a href="#">行内元素2</a>

    <div>块级元素1</div>
    <div>块级元素2</div>

    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

单行文字居中：让文字的行高等于盒子的高度。

1.4 CSS的背景

背景图片：background-image:none/url(url);

<style>
        div {
            width: 300px;
            height: 200px;
            background-image: url(images/arr.gif);
        }
</style>

<body>
    <div></div>
</body>

背景平铺：background-repeat

<style>         
             /* 1.背景图片不平铺 */
            background-repeat: no-repeat;
            /* 2.默认状况下，背景图片是平铺的 */
            background-repeat: repeat;
            /* 3.沿着x轴平铺 */
            background-repeat: repeat-x;
            /* 4.沿着y轴平铺 */
            background-repeat: repeat-y;
</style>

背景位置：background-position
背景图像固定（背景附着）：background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

背景复合写法

<style>
        div {
        /*
            background-color: #fff;
            background-image: url(images/arr.gif);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center top;
        */

            background-color: #fff url(images/arr.gif) no-repeat fixed center top;
        }
</style>

背景色半透明

qq_52822043

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础-选择器、背景设置

1.1 emmet语法生成标签，直接输入标签名按tab健即可，比如 div 然后 tab键就可以生成<div></div>。如果想要生成多个相同标签，加上*，比如 div*3 就可以快速生成3个div。如果有父子关系的标签，可以用>，比如 ul>li 就可以了。如果有兄弟关系的标签，用+就可以了，比如 div+p。如果生成带有类名或者id名字的，直接写.类名或者 #id名 tab键就可以了。如果生成的div类名是有顺序的，可以用自增符号$。.
复制链接

扫一扫