css

　css背景样式：

　　background-color 背景色

　　background-image 背景图

　　　　url (背景地址)

　　　　默认回水平垂直铺满背景图

　　background-repeat 平铺方式

　　　　repeat-x 水平平铺

　　　　repeat-y  垂直平铺

　　　　repeat(x，y都进行平铺，默认值)

　　　　no-repeat 都不平铺

　　background-position: 背景位置   x y  number|

　　　　　　　　　　　　　　x: left center right

　　　　　　　　　　　　　　y:top center bottom

　　background-attachment 背景图随滚动条的移动方式

　　　　scroll (默认值 )　　背景位置按照当前元素进行偏移

　　　　fixed　　　　　　  背景位置按照浏览器进行偏移　

　　

　　边框样式：

　　boder-style: soild(实线) 

　　边框大小：

　　boder-width

　　边框颜色

　　boder-color

　　边框也可以针对某一边单独设置：boder-left-style:中间为方向：left、right、top、bottom

　　透明颜色：transparent

　　css注释：

/*  */
<!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>
        p {
            color: khaki;
        }

        h1 {
            color: khaki;
        }

        #p1 {
            color: aqua;
        }

        .p2 {
            color: red
        }

        /*
            为ID为p1的元素，class为p2的元素，还有h1，同时设置一个背景为黄色
        */
        #p1,
        .p2,
        h1 {
            background-color: aqua
        }

        /*
            选中页面中所有元素 *{}
        */
        * {
            font-size: 30px;
            font-family: 楷体;
        }

        /*
            复合选择器(对于class选择器来说)
        */
        span.p2 {
            background-color: aqua
        }

        /*
            子元素选择器
        */
        div>span {
            color: aliceblue
        }

        /*
            伪类专门用来表示元素的一种状态
            :link 正常链接
            :visited 访问过的链接 涉及到用户隐私，只能设置颜色
            :hover 鼠标滑过的链接
            :active 正在点击的链接
            :focus 获取焦点
            :before 指定元素前
            :after 指定元素后
            :selection 选中元素后 在火狐中用 :-moz-selection
        */
        a:hover {
            color: aqua
        }
        p:hover{
            color:chartreuse
        }
        input:focus{
            background-color: yellow
        }
        p::selection{
            background-color: orangered
        }
    </style>
</head>

<body>
    <input type="text">
    <!--
        我们可以为元素设置class属性，class和ID类似，但是class可以重复
    -->
    <p id="p1">锄禾日当午</p>
    <p class="p2">锄禾日当午</p>
    <p class="p2">锄禾日当午</p>
    <p>锄禾日当午</p>
    <p>锄禾日当午</p>
    <p>锄禾日当午</p>
    <p>锄禾日当午</p>
    <p>锄禾日当午</p>
    <p>锄禾日当午</p>
    <h1>锄禾日当午</h1>
    <a href="http://www.baidu.com">点这儿</a>
</body>

</html>

 css盒子模型

　　border:

　　　　border-width: 边框的宽度

　　　　border-color:边框的颜色

　　　　border-style:边框的线型

　　　　border-top:上边框

　　　　border-bottom:下边框

padding:

代表边框内壁与内部元素之间的距离

margin:

　　代表边框外壁与其他元素之间的距离

posted @ 2019-10-05 17:49  希望の曙光  阅读(133)  评论(0)    收藏  举报