HTML之CSS

一、css选择器

css选择器有：

1、id选择器  ##针对唯一性
 
2、class选择器  ###可以共用
 
3、标签选择器
 
4、层级选择器（空格）
 
5、组合选择器（逗号）
 
6、属性选择器（中括号）

主要是用id、class、标签选择器 ，下面介绍一下

　　

 

css样式应用，有三处：当三处同时作用于一个标签时，离标签越近优先级越高：优先取方式1，然后方式2或方式3（方式2/3取决于谁离标签近优先取谁）

方式1：在标签内部通过style属性，来给标签设置css样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式1</title>
</head>
<body>
 <!--增加style属性-->
    <div style="background-color: red;height: 100px;width: 100px">背景色</div>
</body>
</html>

　　

方式2.通过id选择器修饰：通过head中增加style标签，在style标签内部，通过选择器为目标html配置css样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式2</title>
    <style>
        #i1{                                #####  #i1表示通过id选择器来定位
            background-color:red;
            height:100px;
            width:100px;
        }
    </style>
</head>
<body>
    <div id="i1">id背景色</div>
</body>
</html>

　　

方式3.通过编写样式表文件xx.css，用link引入到当前html中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式2</title>
    <style>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div id="i2">引入cssdemo文件</div>
</body>
</html>


css文件：
#i2{
        background-color:black;
        height:100px;
        width:100px;
}

##########上面已经说了id选择器，下边介绍一下class选择器：###############

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
        background-color:red;
        height:100px;
        width:100px;
        }
    </style>

</head>
<body>
    <div class="c1">class选择器</div>    <！--class选择器可以共用一个c1-->
    <div class="c1">class选择器</div>
</body>
</html>





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wh{
        height:100px;
        width:100px;
        }
        .bc-1{
            background-color:red;
        }
        .bc-2{
            background-color:black;
        }
    </style>

</head>
<body>
    <!--不同颜色，相同宽高的正方形。class属性允许有多个，通过空格分隔即可-->
    <div class="wh bc-1">class选择器</div>
    <div class="wh bc-2">class选择器</div>
</body>
</html>

########标签选择器：直接对所有标签操作########

<!--标签选择器:直接对所有标签操作-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color:red;
        }
    </style>

</head>
<body>
    <div>111</div>    <!--所有div都是红色-->
</body>
</html>

 

#######层级标签选择器############

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color:red;
        }
        div span{
            background-color: blue;
        }
    </style>

</head>
<body>
    <div>
        <span>啦啦啦</span>
    </div>    <!--span标签中的啦啦啦是蓝色；除此之外的div都是红色-->
</body>
</html>

　　

　

CSS属性

height、width、font-size、font-weight、text-align、line-height、float、display、margin、padding

<!-- display 属性 展示属性 块级标签和行内标签之间切换的属性 display:inline 块级标签转换为行内标签-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wh{
        height:100px;
        width:100px;
        }
        .bc-1{
            background-color:red;
        }
        .bc-2{
            background-color:blue;
        }
        .dis-inline{
            /*由块级标签转行内标签*/
            display: inline;
        }
        .dis-block{
            /*由行内标签转块级标签*/
            display: block;
        }
    </style>

</head>
<body>

    <div class="dis-inline bc-1">块转内</div>
    <span class="dis-block bc-2">内转块</span>


</body>
</html>

　　

　

posted @ 2019-12-05 20:45  哈哈一笑~~~  阅读(199)  评论(0)    收藏  举报