html学习-第二集（CSS）

MaureenChen

2020-02-20

关注关注

head标签里面添加style标签，可以为标签添加样式

id选择器

类选择器

标签选择器

层级选择器

组合选择器

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color:#2459a2;
            height:48px;
        }
        .c1{
            background-color:#2889a2;
            height:20px;
        }
        div{
            background-color:black;
            color:white;
        }

        span div {
            background-color:red;
            color:black;
        }

        input[type=‘text‘]{width:100px;height:200px;}

    </style>

</head>
<body>
    <div id="i1">fffffff</div>
    <span class="c1">ddddddd
    <div>ututututu</div>
    </span>
    <div id="i1">ggggggg</div>

    <input type="text">
    <input type="password">
</body>
</html>

样式优先级问题

标签上的style优先，其他编写顺序，就近原则，后写的优先

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c2{
            font-size:28px;
            color:black;
            }
        .c1{
            background-color:red;
            color:white;
            }

    </style>
</head>
<body>
    <div class="c2 c1" style="color:pink;">adafaf</div>
    <div class="c2 c1" style="color:pink;">adafaf</div>
    
</body>
</html>

CSS文件用法

CSS文件

common.css

c2{
    font-size:28px;
    color:black;
    }
.c1{
    background-color:red;
    color:white;
    }

然后在html文件里面引用css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/common.css" />
</head>
<body>
        <div class="c2 c1" style="color:pink;">adafaf</div>

</body>
</html>

CSS边框

<div style="

height:48px; 高度

width:70%; 宽度像素百分比

border:1px solid red; 边框

font-size:16px; 字体大小

text-align:center; 水平方向居中

vertical-align:middle;

line-height:48px; 垂直方向根据标签高度居中

font-weight: bold; 字体加粗

">fdffdffd</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border:1px solid red;">adfdfdfdf</div>
    <div style="height:48px;
    width:70%;
    border:1px solid red;
    font-size:16px;
    text-align:center;
    vertical-align:middle;
    line-height:48px;
    font-weight: bold;
    ">fdffdffd</div>
</body>
</html>

CSS float样式

简单例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .pg-header{
            height:38px;
            background-color:#dddddd;
            line-height:38px;
        }
    </style>
</head>
<body style="margin:0 auto;">
    <div class="pg-header">
        <div style="width:980px;margin:0 auto;">
            <div style="float:left;">收藏本站</div>
            <div style="float:right;">
                <a>登录</a>
                <a>注册</a>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
    <div style="width:300px;border:1px solid red;">
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
        <div style="clear:both"></div>
    </div>
</body>
</html>

CSS display样式

可以将块级标签和行内标签转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="background-color:red;display:inline;">asdf</div>
    <span style="background-color:red;display:block;">asdf</span>
</body>
</html>

注意：

行内标签无法设置宽度高度 padding margin

块级标签设置宽度高度 padding margin

display样式还有一个inline-block属性

display:none让标签消失

内边距和外边距

padding margin(0.auto)

边距，

内边距 padding

外边距 margin

结束

css css样式 html文件