Day12 CSS简单用法

当我想要将html中的部分属性修改的时候，如果单个改的话，费时费力，这时候我就需要利用css和html结合起来了。

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        1  按标签名选择

        p{

            color: red;

        }

        div{

            background-color: green;

        }

        2 按id属性选择

        #c1{

            font-size: 40px;

        }

        3 按class属性选择

        .c2{

            background-color: rebeccapurple;

        }

        4 * 代值的是所有标签

        *{

            color: red;

        }

    </style>

</head>

<body>

<p class="c2">hello1</p>

<p id="c1">hello2</p>

<p class="c2">hello3</p>

<div>DIV</div>

<!--<p style="color: red">hello3</p>-->

</body>

CSS的组合选择器：

当代码中有

<div>

#当我想要修改<div>里边的<p>标签的时候，我们可以利用后代标签，可以这么写。

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*!*1 后代选择器*!*/

         /*.outer p{*/

             /*color: red;*/

         /*}*/

         /*2 子代选择器*/

        /*.outer>p{*/

             /*color: red;*/

         /*}*/

        /*.outer .c2 p{*/

            /**/

        /*}*/

        /*3 多元素选择器*/

        /*.outer>p,.c3{*/

            /*color: red;*/

        /*}*/

    </style>

</head>

<body>

<div class="outer">

    <p>P</p>

    <div class="c2">

        <p>PP</p>

    </div>

</div>

<div class="c3">P</div>

</body>

</html>

CSS的属性操作：

块级标签：可以设置长宽

内联标签：设置长宽无效

width：设置宽度

height：设置高度

backgroud-color:设置背景颜色

color：字体或者文字颜色

font-size：字体大小

text-align：center 设置居中

line-height：90px 这里如果想设置居中的话，数值需要跟上面的height相同。

背景属性：

width:宽度

height：高度

background-color:颜色

backgroup-img:url()加载图片

backgroup-repeat：no-repeat 不在两边留空白距离

backgroup-position：距离左边和上边的距离（可填center，center）

background: url("http://img2.imgtn.bdimg.com/it/u=4289651615,1500379285&fm=11&gp=0.jpg") no-repeat -200px -100px;

#上面的3个属性可以利用这一条来显示

边框属性：

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            width: 200px;

            height: 200px;

            /*border-style: solid;*/

#solid是实现的意思

            /*border-width: 10px;*/
#边框厚度，在200之外加了多大的空间

            /*border-color: red;*/

#边框颜色

            border: solid red 2px;

            border-radius: 20%;
#让边框变的曲线，不直角

        }

    </style>

</head>

<body>

<div class="c1">sadfsda</div>

</body>

边框属性之内外边距：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1,.c2{

            width: 300px;

            height: 300px;

            padding: 50px;

            /*padding: 50px 20px 20px;*/

            /*顺时针数*/

            /*padding-top: 50px;*/

            border: dashed 2px red;

        }

        .c1{

             background-color: wheat;

             margin-bottom: 20px;

            /*#调的是盒子和盒子之间的距离*/

        }

        .c2{

             background-color: dodgerblue;

             margin-top: 50px;

        }

/*内联标签无法设置长宽*/

        .s1,.s2{

            color: white;

            padding: 10px;

        }

        .s1{

            background-color: rebeccapurple;

        }

        .s2{

            background-color: darkmagenta;

            margin-left: 100px;

        }

        .outer{

            width: 100%;

            height: 600px;

            background-color: wheat;

            overflow: hidden;
#定义图片顶着最上边，无边界

        }

        .inner{

            width: 80%;

            height: 300px;

            background-color: gray;

            margin: 100px auto;
#margin：auto是居中的意思，定位的参照是父级。如果父集没有会继续往上找

        }

    </style>

</head>

<body>

    <!--<div class="c1">Yuan</div>-->

    <!--<div class="c2">Yuan2</div>-->

    <!--<span class="s1">111</span>-->

    <!--<span class="s2">222</span>-->

<div class="outer">

    <div class="inner"></div>

</div>

</body>

</html>

float属性操作：

怎么把多个元素在一行上去显示？

float会将图片或者文本悬浮，假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin: 0;

        }

        .c1{

            width: 100px;

            height: 170px;

            background-color: #53868B;

            float: left;

        }

        .c2{

            width: 200px;

            height: 70px;

            background-color: cornflowerblue;

            float: left;

        }

        .c3{

            width: 300px;

            height: 120px;

            background-color: darkmagenta;

            float: right;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<div class="c2"></div>

<div class="c3"></div>

</body>

</html>