2.CSS样式 – 堂-DayDayUP

CSS样式

CSS,专门用来“美化”HTML标签

<!--快速了解-->
<img src="..." style="height: 100px;" />
<div style="color: red;">中国联通</div>

CSS 应用方式

在标签上

<img src="..." style="height: 100px;" />
<div style="color: red;">中国联通</div>

在 head 标签的 style 上

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        .c1{
            color: red;
        }
        .c2{
            height: 50px;
        }
    </style>
</head>
<body>
<h1 class="c1">用户登录</h1>
<form accept="/login" method="post">
    用户名：<input class="c2" type="text" name="username" />
    密码：<input class="c2" type="text" name="password" />
    <input class="c2" type="submit" value="登录" />
</form>

写到文件中

<!--common.css-->

.c1 {
    color: red;
}
.c2 {
    height: 100px;
}

调用common.css

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="/static/css/common.css" />
</head>
<body>
    <div><h3 class="xx">用户注册</h3></div>
</body>

选择器

ID选择器

#c1 {
color: red;
}

<div id='c1'></div>

类选择器

.c1 {
color: red;
}

<div class='c1'></div>

标签选择器

div{
color: red;
}

<div>xxx</div>
li{
color: red;
}

<ul>
<li>xxx</li>
</ul>

属性选择器

<head>
    <title>Document</title>
    <link rel="stylesheet" href="/static/commons.css">
    <style>
        input[type="text"]{      <!-- 所有的text类型的input都会生效 -->
        border: 1px solid red;
        }
        .v1[xx="123"]{
            color: gold;    <!-- 橙色 -->
        }
    </style>
</head>

<body>
...
    <input class="c2" type="text" name="username" />
    <input class="c2" type="password" name="password" />
    <div class="v1" xx="123">a</div>
    <div class="v1" xx="456">b</div>
    <div class="v1" xx="789">c</div>
...
</body>

后代选择器

这个选择器很有意思,你可以指定标签让它下面对应的标签全部生效,也可以指定标签让他下面的n级标签生效

<style>
    .zz h2{
        color:chartreuse;
    }
</style>
</head>

<body>

    <div class="zz" >
        <div>
            <h2>我是div里面的h2</h2>
        </div>
        <h2>我是div外面的h2</h2>
...

<!--如果只想让第一层的h1生效,可以添加>号-->
<style>
    .zz > h2{
        color:chartreuse;
    }
</style>

关于样式的覆盖问题

当一个标签引用了多个 css 样式时,可能会遇到样式属性重复的问题

观察到,c3生效,而c2没有生效,这是因为c3在c2的下面,会将上面的c2属性覆盖掉

如果不想让上面的被覆盖掉怎么办呢?

可以在对应的属性后面添加!important

<style>
    .c2 {
        color: darkgoldenrod;
        font-size: 10px;
        border: 2px solid red;
    }

    .c3 {
        color:hotpink;
        font-size: 8px;
        border: 2px solid green;
    }
</style>

<body>
    <div class="c2 c3">我是天才</div>
</body>

<style>
    .c2 {
        color: darkgoldenrod !important;
        font-size: 10px  !important;
        border: 2px solid red;
    }

    .c3 {
        color:hotpink;
        font-size: 8px;
        border: 2px solid green;
    }
</style>

样式

高度和宽度

注意事项:

支持百分比
行内标签: 默认无效
块级标签: 默认有效(右边的剩余空白区域也会被占用)

.c4 {
    height: 300px;
    width: 500px;
}

块级和行内标签

display:inline-block 使行内标签对 height 和 width 生效

<style>
    .c4 {
            display: inline-block;
            height: 300px;
            width: 500px;
            border: 1px solid red;
        }
    </style>
    ...
    <body>
        <span class="c4">联通</span>
    </body>

块级与行内标签的转换

<div style="display: inline;">移动</div>
<span style="display: block;">联通</span>

字体和对齐方式

设置字体颜色/大小/粗细/字体样式

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .c1 {
            color: #11633a;                   /* 字体颜色 */
            font-size: 20px;                  /* 字体大小 */
            font-weight: 600;                 /* 字体粗细 */
            font-family: Microsoft Yahei;     /* 字体样式 */
            text-align: center;               /* 水平方向居中 */
            line-height: 50px;                /* 垂直方向居中 */
            border: 1px solid red;            /* 边框 */
        }
    </style>
</head>

浮动

如果在块级标签中，加入了float属性，那么这个块级标签将不会再占用一整行，而是自己有多大就占用多大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .item {
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }

    </style>
</head>
<body>
    <div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

如果你让标签浮动起来之后，就会脱离文档流。

例如下面的例子中，我们给div的父标签赋予了一个蓝色的背景，但是你不会看到蓝色背景。因为他被浮动的div字标签挡住了。

解决办法: 在同级子标签的最下面添加 style="clear: both;"

<body>
    <div style="background-color: blue;    /* 背景颜色 */">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div> 你好呀 </div>
</body>

<body>
    <div style="background-color: blue;">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both;"></div>    <!-- 解决浮动标签被挡住 -->
    </div>
    <div> 你好呀 </div>
</body>

内边距

padding-top | padding-left | padding-right | padding-botton

下面的四个上下左右的padding可以简写为padding: 20px 20px 20px 20px,顺序为上右下左(顺时针方向)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            border: 1px solid red;
            height: 200px;
            width: 200px;

            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            /* padding: 20px 20px 20px 20px */
        }

    </style>
</head>
<body>
    <div class="outer">
        <div>hello</div>
        <div>world</div>

    </div>
</body>
</html>

外边距

<body>
    <div style="height: 200px; background-color: aquamarine; margin-left: 20px;"></div>
    <div style="height: 200px; background-color:blueviolet; margin-top: 20px;"></div>
</body>

hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <style>
        .c1:hover{
            color: orange;
            font-size: 50px;
        }

        .c2{
            height: 300px;
            width: 500px;
            border: 1px solid red;
        }

        .c2:hover{
            border: 1px solid green;
        }

        .download{
            display: none;
        }

        .app:hover .download{
            display: block;
        }

        .app:hover .title{
            color: red;
        }
    </style>
</head>

<body>
    <div class="c1">中国电信</div>
    <div class="c2">中国移动</div>
    <div class="app">
        <div class="title">下载app</div>
        <div class="download">
            <img src="D:\git-python\前端\templates\img\logo-mi2.png" alt="">
        </div>
    </div>
</body>
</html>

after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1::after{
            content: "哈哈哈";
        }

        .clearfix::after{      /*常用于清除float: left 标签浮动脱离文档流*/
            content: "";
            display: block;
            clear: both;
        }

        .item{
            float: left;
        }
    </style>
</head>

<body>
    <div class="c1">中国电信</div>
    <div class="clearfix">
        <div class="item">1</div>
        <div class="item">1</div>
        <div class="item">1</div>
    </div>
</body>
</html>

<!-- 中国电信哈哈哈 -->

position

fixed 固定
- 固定在窗口的某个位置
relative 相对
absolute 绝对

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }

        .back{
            position: fixed;
            width: 60px;
            height: 60px;
            border: 1px solid red;

            right: 10px;
            bottom: 10px;
        }

        .c1{
            height: 300px;
            width: 500px;
            border: 1px solid red;
            margin: 100px;
            position: relative;
        }

        .c1 .c2{
            height: 59px;
            width: 59px;
            background-color: aqua;
            position: absolute;

            right: 100px;
            bottom: 100px;
        }

        .dialog{
            position: fixed;
            height: 300px;
            width: 500px;
            background-color: white;

            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto auto;
            /* top: 200px; */

            z-index: 1000;
        }

        /* 幕布 */
        .mask{
            background-color: black;
            position: fixed;

            left: 0;
            right: 0;
            bottom: 0;
            top: 0;

            opacity: 0.5;

            z-index: 999;
        }
    </style>
</head>

<body>
    <div style="height: 1000px;">position演示</div>
    <div class="mask"></div>
    <div class="dialog" style="font-size: 100px;">永远居中显示</div>
    <div class="back">返回顶部</div>
    <div class="c1">
        <div class="c2"></div>
    </div>
</body>
</html>

<!-- 网页右下角返回顶部模块的使用方法 -->

border

solid 实线
dotted 虚线
border-bottom: 6px solid transparent; 透明
border-radius: 2px; 圆角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }

        .c1{
            height: 200px;
            width: 500px;
            background-color: rgb(100, 96, 96);

            border: 3px dotted red;
            border-left: 6px solid transparent;
            border-right: 6px dotted black;
            border-radius: 2px;
            border-bottom: 6px solid transparent;  /*透明*/

            margin: 200px;
            font-size: 50px;
            font-weight: 500;
        }

        .c1:hover{
            border-left: 10px dotted brown;
            border-right: 10px dotted green;
            border-bottom: 6px solid orangered;
        }
    </style>
</head>

<body>
    <div class="c1">菜单</div>

</body>
</html>

总结

bode标签，默认有一个边距，造成页面四边都有白色间隙，如何去除？
```
body{
  margin: 0;
}
```

内容居中

文本居中，文本会在这个区域居中

<div style="width: 200px; text-align: center;">哈哈哈</div>

区域居中，自己要有宽度 + margin-left: auto;margin-right: auto

.container{
width: 1226px;
margin: 0 auto;
}
<div class="container">
<a>哈哈哈</a>
</div>

父标签没有高度或没有宽度，可以被子标签支撑起来
如果存在浮动，一定要加入以下代码，清除元素左右两侧的浮动效果
```
<div style="clear: both;"></div>
```
a标签是行内标签，行内标签的高度、内外边距，配置后默认无效，使用 display: inline-block; 后生效
垂直方向居中
- 文本 + line-height
- 图片 + margin边距
a标签默认有下划线，使用 text-decoration: none; 配置去除下划线

鼠标悬停变色 hover

.c1:hover{
  color: white;
}
.c2 a:hover{
  color: black;
}

设置透明度： opacity: 0.7; 范围0-1
设置标签显示层次，数值大的显示在上层：z-index: 1000;