选择器初级及背景属性

Posted chen-tan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了选择器初级及背景属性相关的知识,希望对你有一定的参考价值。

选择器

<!doctype html>
<html>
    <head>
        <title>选择器初级</title>
        <style type="text/css">
            *{margin:0;padding:0;}/*匹配页面中所有的元素*/
            div{}/*元素选择器  由标签名来选择元素*/
            .box{color:blue}/*class选择器/类选择器 用于多个相同标签单需要不同控制*/
            #box2{color:red}/*ID选择器 以id属性命名 再页面中只能出现一次 权重值最高*/
            div ul li p{color:yellow;}/*后代选择器 从第一个元素开始依次往下选 空格隔开 */
        </style>
    </head>
    <body>
        <div class="box" id="box2">
            <!--class给元素命名时不能数字开头
				建议以小写字母开头
				尽量不要用中文、拼音,要见名知意
				可以加 - 或 _ 
				可以用驼峰命名法
				-->
        </div>
    </body>
</html>

  

背景属性

<!doctype html>
<html>
    
    <head>
        <title>背景属性</title>
        <style type="text/css">
            *{margin:0;padding:0;}
            body{ background-image:url
                  bakground-attachment:fixed;/*背景关联 滚动条滚动时,背景图片不动*/
                background-size:;/*背景图片大小*/
            }
            div{background-color:red;/*red 16进制色 rgb/rgba(a为透明度简写,css3中,r为red)    使用rgb(0,255,0),a取值为0~1 其余为0~255  rgba(0,255,0,0.5)*/
                background-image:url("图片路径");/*背景图片*/
                background-repeat:;/*背景图片的重复方式 repeat 默认样式*/
                /*no-repeat 不重复 repeat-x水平重复 -repeat-y竖直重复*/
                background-position:;/*
                background-position:X  Y
					1.关键词写法 top/bottom/left/right/center  只有一个值时,第二个之默认ceter  第一个值水平,第二个值垂直
					2.如果只出现一个关键词,那么另一个对应的就是center
					3.百分数值:background-position:20p% 30%;支持负值 水平 竖直
					4.具体的数值:background-position:20px 30px;	水平 竖直
                */
               /*以上的值可以用background直接引用,可以识别*/
                /*bakground:red url("路径") no-repeat ;可以实现*/
            }
        </style>
    </head>
    <body>
        
     
    </body>
</html>

  

以上是关于选择器初级及背景属性的主要内容,如果未能解决你的问题,请参考以下文章

如何在片段着色器中平铺部分纹理

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段6——CSS选择器

如何使用插值来设置属性选择器?

这个代码给所有带有name属性的链接加了一个背景色

选择器