选择器初级及背景属性

选择器

<!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>
            a{color:red;
            font-size:40px;
            background:yellow;}
            a:link{/*选择没被点击过的链接*//*只对a标签有效*/
                background:pink;
            }
            a:visited{/*已经点击过的链接*//*只对a标签有效*/
                background:black;
            }
            a:hover{/*选择鼠标悬浮在元素上面的样式*/
                /*如果有link或visited，必须放在其后面，没有就没关系*/
                background:red;
            }
            a:active{/*选择鼠标按下在元素还没释放的样式*/
                /*如果有link或visited、hover，必须放在其后面，没有就没关系*/
                background:blue;
            }
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com">点击跳转到百度</a>
    </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>

　　

posted @ 2020-01-29 17:03  JZCTPP  阅读(181)  评论(0)    收藏  举报