CSS学习笔记（基础部分）

CSS基础
CSS 一切皆盒子
一、CSS的四种引入方式：行内嵌、嵌入式、链接式、导入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 2.嵌入式 -->
    <style>
        /*选择标签*/
        div{ 
            /*属性名：属性值*/
            color: red; 
            background-color: green;
        }

    </style>
    <!-- 3.链接式  推荐使用 -->
    <link rel="stylesheet" type="text/css" href="css.css">

    <!-- 4.导入式 -->
    <style>
        @import "css.css";
    </style>
</head>
<body>
   <div>
       hello world
   </div>
   <!-- 1.行内嵌 -->
   <p style="color: red; background-color: palegreen"> Hello World</p>
</body>
</html>

css.css文件
/*选择标签*/
div{
    /*属性名：属性值*/
    color: red;
    background-color: green;
}



二、CSS选择器
1.基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*通用选择器*/
        *{
            font-size: 30px;
        }
        /*标签选择器*/
        p{
            background-color: green;
        }
        div{
            color: blue;
        }
        /*ID选择器*/
        #name{
            color: red;
            font-style: italic;
        }
        /*class选择器*/
        .cls1{
            background-color: black;
            color: yellow;
        }
    </style>
</head>
<body>
    <p>hello</p>
    <div>world</div>
    <p id="name">名字</p>
    <p class="cls1">I love you</p>
    <div class="cls1"> I love Beijing</div>
</body>
</html>
2.组合选择器：后代选择器、子代选择器、变形选择器、毗邻选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*后代选择器*/
    div p{
        font-size: 35px;
    }
    div .cls1{
        color: yellow;
    }

    #outer .cls2 .cls1{
        color: blueviolet;
    }
    /*子代选择器*/

    #outer>.cls1{
        font-size: 50px;
    }

     /*变形选择器   */
     #hello,.cls2{
         font-style: italic;
     }

     /*毗邻 只更改下面紧挨的满足条件的标签*/
     #outer+p{
         color: aqua;
     }

    </style>
</head>
<body>
    <p id="hello">hello</p>
    <div id="outer">this is div
        <span>span</span>
        <p id="p1">this is p1</p>
        <p class="cls1">this is p2</p>
        <div class="cls2">
            <p class="cls1">this is p3</p>
        </div>
    </div>

    <p>this is p4 </p>
    <p>this is p5 </p>
</body>
</html>

3.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性标签*/
        [class=div2]{
            color: red;
        }
        /*E[attr~=val]*/
        /*E[attr^=val]*/
        /*E[sttr*=val]*/
        p[class=div1]{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <p class="div1">div1</p>
    <div class="div2">div2</div>
    <div class="div3">div3</div>

    <div id="id">div4</div>

</body>
</html>
4.伪类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: red;
        }
        a:hover{
            color: yellow;
        }
        a:visited{
            color: purple;
        }
        a:active{
            color: blue;
        }
        p:after{
            content: 'world';
        }
        p:before{
            content: "你好 世界";
            color: green;
        }
    </style>
</head>
<body>

<a href="https://www.baidu.com">百度一下</a>
<p>hello </p>
</body>
</html

三、CSS的常用属性：1.颜色属性 2.字体属性 3.背景属性 4.文本属性 5.边框属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /**{*/
            /*!*取消边距*!*/
            /*margin: 0px;*/
        /*}*/
        /*颜色属性*/
        p{
            color: #ff0000;
            /*color: red;*/
            /*color: rgb(255,0,0);*/
            /*color:rgba(255,0,0,0.2);*/
        }
        /*字体属性*/
        p{
            font-size: 30px;
            font-style: italic;
            font-family: "Times New Roman";
            font-weight: bold;
        }
        /*背景属性*/
        #div1{
            height: 500px;
            width: 600px;
            background: url("timg.jpg") no-repeat darkseagreen center;

        }
        /*文本属性*/
        p{
            background-color: blueviolet;
            text-align: center;
            line-height: 100px;
            letter-spacing: 5px;
            word-spacing: 10px;
            text-transform: capitalize;
        }
        
    </style>
</head>
<body>
    <p>hello world</p>
    <div id="div1"></div>

</body>
</html>
<!-- 内边距与外边距 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>

       body{
           border: solid 5px green;
       }
       .div1{
           /*内边距*/
           padding:50px;
           /*外边距*/
           margin: 30px;
           /*边框*/
           border: solid 30px red;
           height: 200px;
           width: 50%;
           background-color: blue;
       }      
   </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div1</div>
    <div class="div3">div1</div>

</body>
</html>
CSS学习笔记（基础部分）

猜你喜欢
