CSS样式相关

目录

1.高度和宽度

2.字体相关

3.字体对齐

4.颜色设置

5.背景

6.边框

7.盒子模型

8.display属性

9.伪元素选择器

10.伪类选择器

11.浮动

12.文字装饰

13.相对定位和绝对定位

14.固定定位

1.高度和宽度

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
             100px;
            background-color: pink;
        }
        span{
            height: 100px;
             100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div>
    div1
</div>
<span>span1</span>

</body>
</html>
复制代码

效果如下图所示

宽度和高度除了可以用像素px单位，也可以使用百分比%

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
             50%; /* 可以给宽度和高度设置百分比 */
            background-color: pink;
        }
    </style>
</head>
<body>
<div>
    div1
</div>
</body>
</html>
复制代码

但是在设置百分比时，有些问题需要注意：

　　1.宽度和高度可以设置百分比，会按照父级标签的宽度和高度进行计算

　　2.但是如果想给高度设置百分比，必须要求父级标签有固定高度才行

2.字体相关

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-size: 20px; /* 字体大小 */
            color: red; /* 字体颜色 */
            font-family: '楷体','宋体'; /* 字体 */
            font-weight: 100; /* 字体粗细 */
        }
    </style>
</head>
<body>
    <div>窗前明月光</div>
</body>
</html>
复制代码

效果如下图所示

要注意:

　　1.如果不写font-size，默认是16px

　　2.font-size:‘字体1’,'字体2'

　　　　如果系统找的到字体1，则优先选用字体1的字体

　　　　如果系统找不到字体1，则使用字体2的字体

　　3.font-weight的范围是100-900，默认是400

3.字体对齐

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
             200px;
            background-color: red;
            text-align: center; /* 水平居中 */
            line-height: 100px; /* 和height高度相同，标签文本垂直居中 */
        }
    </style>
</head>
<body>
    <div>
        九月一号星期二
    </div>
</body>
</html>
复制代码

效果如下图所示

要注意:

　　1.text-align的值有left,center,right

　　2.想垂直居中，必须要把line-height的值和height的值设置成一样的

4.颜色设置

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
             200px;
            background-color: red; /* 英文单词 */
            background-color: #7969d2; /* 16进制数表示 */
            background-color: rgb(92,187,138); /* rgb颜色表示方法 */
            background-color: rgba(92,187,138,0.5); /* rgba加上透明度,透明度范围是0-1 */
            height: 100px;
             100px;
            color: purple;
            opacity: 0.2; /* 整个标签设置透明度 */ 

        }
    </style>
</head>
<body>
    <div>
        九月一号星期二
    </div>
</body>
</html>
复制代码

效果如下图所示

5.背景

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 600px;
             600px;
            
            background-image: url("1.jpg"); /* 设置背景图片 */
            background-repeat: no-repeat;/* 是否平铺整个标签 */
            background-position: center center; /* 当前图所在整个标签的位置 */
            background-position: 50px 100px; /* 当前图距离左上的位置 */
            border: 1px solid red; /* 画一个边框 */
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>
复制代码

效果如下所示

background也可以简写成一行

复制代码
    <style>
        .c1{
            height: 600px;
             600px;
            background: green url("1.jpg") no-repeat center center;
        }
    </style>
复制代码

6.边框

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
             100px;
            height: 100px;
            border: 1px dashed red; /* 边框线为虚线 */
            border: 1px solid red; /* 边框线是实线 */

            /* 也可以将一句话拆成三句话写 */
            border- 10px; /* 线宽 */
            border-style: solid; /* 线样式 */
            border-color: yellow; /* 线颜色 */

            /* 也可以四个方向单独设置 */
            border-left: 10px solid yellow;

            /* 也可以单方向单参数设置 */
            border-right- 10px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>
复制代码

7.盒子模型

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
             200px;
            height: 100px;
            border:4px solid red; /* 边框 */
            padding: 7px 8px 9px 10px; /* 内容到边框之间的距离 上右下左 */
            margin:11px 12px 13px 14px; /* 距离其他标签或者自己父级标签的距离 上右下左 */
        }
    </style>
</head>
<body>
    <div class="c1">我是最帅的！</div>
    <div class="c2"></div>
</body>
</html>
复制代码

盒子模型包含四部分:

　　1.content:内容部分,设置的width和height

　　2.padding:内边距,内容和边框之间的距离

　　3.border:边框

　　4.margin:外边距,距离其他标签或者自己父级标签的距离

盒子模型如下图所示:

还有几个需要知道的:

复制代码
    <style>
        .c1{
            /* margin可以设置上 右 下 左格式 */
            margin: 1px 2px 3px 4px;
            /* margin也可以设置上下 左右格式 */
            margin:15px 10px;
            /* 也可以单独设置各个方向 */
            margin-top: 10px;

            /* padding可以设置上 右 下 左格式 */
            padding: 1px 2px 3px 4px;
            /* padding也可以设置上下 左右格式 */
            padding: 15px 10px;
            /* 也可以单独设置各个方向 */
            padding-top: 10px;
        }

    </style>
复制代码

要注意的是:如果两个相邻标签都设置了margin两者之间的距离，那么不会累加，而是选最大值为两者的距离

8.display属性

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
             100px;
            height: 100px;
            background-color: red;
            display: inline; /* 将块级标签改为内联标签 */
            display: inline-block; /* 将标签改为具有内联标签和块级标签属性效果的标签 可以设置高度，而且不独占一行 */
            display: none; /* 隐藏标签 */
        }
        .c2{
             100px;
            height: 100px;
            background-color: blue;
            display: block; /* 将内联标签改为块级标签 */
        }
    </style>
</head>
<body>
    <div class="c1">
        悟空
    </div>

    <span class="c2">
        八戒
    </span>
</body>
</html>
复制代码

9.伪元素选择器

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
             100px;
            height: 100px;
            border: 1px solid red;
        }
        div:after{ /* 在文字前加一个问号 ? */
            content: '?';
        }
        div:before{ /* 在文字后加一个星号 * */
            content: '*';
        }
    </style>
</head>
<body>
    <div>
        雷霆嘎巴，ZBC
    </div>
</body>
</html>
复制代码

效果如下图所示

10.伪类选择器

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
             200px;
            height: 200px;
            background-color: red;
            text-align: center;
            line-height: 200px;
        }

        .c1:hover{
            background-color: orange; /* 触碰时变成橙色 */
            cursor: pointer; /* 鼠标的小手效果 */
        }


        /* a标签未访问时设置样式 */
        a:link{
            color: gold;
        }

        /* 点击按下去之后，抬起之前显示样式 */
        a:active{
            color: red;
        }

        /* 网址被访问之后，显示样式 */
        a:visited{
            color: green;
        }

        /* 鼠标悬浮时，设置样式 */
        a:hover{
            color: purple;
        }
    </style>
</head>
<body>
    <div class="c1">小鸟伏特加</div>
    <a href="http://www.4399.com">点击进入花园宝宝乐园</a>
</body>
</html>
复制代码

11.浮动

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main-left{
            height: 100px;
             100px;
            background-color: red;
            float: left;
        }

        .main-right{
            height: 100px;
             100px;
            background-color: green;
            float: right;
            /* 浮动起来的元素，可以设置高度和宽度，并且不会独占一行 */
        }

        .content{
             100%;
            height: 200px;
            background-color: yellow;
        }

    </style>
</head>
<body>
    <div class="main">
        <div class="main-left"></div>
        <div class="main-right"></div>
    </div>

    <div class="content"></div>
</body>
</html>
复制代码

这样做，会造成父级标签塌陷问题

什么是父级标签塌陷?

如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零，也就是所谓的“高度塌陷”

在上面代码中，父元素为main，在main中只包含浮动元素main-left和main-right，并且没有给父元素main设置高度和宽度,所以会有父级塌陷

父级塌陷如图所示

正常非塌陷如图所示

如果想解决父级标签塌陷，有如下几种方法

1.给父级标签加高度(不常用)

         /* 1.给父级标签加高度 */
        .main{
            height: 100px;
        }

2.清除浮动

我content标签上面不能有浮动的元素盖着我

        .content{
             100%;
            height: 200px;
            background-color: yellow;
            clear: both; /* 2.清除浮动 */

3.最常用的方法

复制代码
       /* 3.最常用的方法 */
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="main clearfix"> <!-- class类值可以写多个 -->
        <div class="main-left"></div>
        <div class="main-right"></div>
    </div>

    <div class="content"></div>
复制代码

4.常用方法

        /* 4.常用方法 */
        .main{
            overflow: hidden;
        }

12.文字装饰

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            text-decoration: line-through; /* 文字被横线贯穿 */
        }
        .c2{
            text-decoration: overline; /* 横线在文字上方 */
        }
        .c3{
            text-decoration: underline; /* 横线在文字下方 */
        }
        a{
            text-decoration: none; /* 去除a标签的下划线效果 */
        }
    </style>
</head>
<body>
    <span class="c1">床前明月光</span>
    <span class="c2">疑是地上霜</span>
    <span class="c3">举头望明月</span>
    <a href="">博伦</a>
</body>
</html>
复制代码

实现效果如下图所示

13.相对定位和绝对定位

相对定位

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{ /* 让body标签紧贴左上，没有任何空隙 */
            margin: 0;
            padding: 0;
        }
        .c1{
            height: 100px;
             100px;
            background-color: red;
        }
        .c2 {
            height: 100px;
             100px;
            background-color: green;
            position: relative;
            left: 30px; /* 距离自己原来位置的左边有30px距离 */
        }
        .c3{
            height: 100px;
             100px;
            background-color: pink;
        }
        .c4{
            height: 100px;
             100px;
            background-color: blue;
        }
        .cc{
            position: relative;
            margin-left: 100px; /* 带有cc类的整体偏移100px */
        }
    </style>
</head>
<body>
    <div class="c4"></div>
    <div class="cc">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
    <div class="c3"></div>
</body>
</html>
复制代码

实现效果如图所示

绝对定位

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{ /* 让body标签紧贴左上，没有任何空隙 */
            margin: 0;
            padding: 0;
        }
        .c1{
            height: 100px;
             100px;
            background-color: red;
        }
        .c2 {
            height: 100px;
             100px;
            background-color: green;
            position: absolute; /* 绝对定位 */
            left: 30px; /* 距离自己原来位置的左边有30px距离 */
        }
        .c3{
            height: 100px;
             100px;
            background-color: pink;
        }
        .c4{
            height: 100px;
             100px;
            background-color: blue;
        }
        .cc{
            position: relative;
            margin-left: 100px; /* 带有cc类的整体偏移100px */
        }
    </style>
</head>
<body>
    <div class="c4"></div>
    <div class="cc">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
    <div class="c3"></div>
</body>
</html>
复制代码

实现效果如图所示

如果不对cc进行相对定位设置,效果如下图所示

关于相对定位和绝对定位，你需要注意的点:

相对定位：

　　1.相对定位可以使用top/bottom/left/right控制标签位置

　　2.是按照自己原来的位置进行移动的

　　3.标签还占据自己原来的位置

　　4.脱离正常文档流，所以可以覆盖别的标签

绝对定位：

　　1.并不占用自己原来的空间

　　2.如果父级标签或者祖先辈标签没有设置相对定位,那么绝对定位的元素会按照整个html文档的位置进行移动

　　3.如果父级标签或者祖先辈标签设置了相对定位，那么按照父级标签或者祖先辈标签的位置进行移动

14.固定定位

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 800px;
        }
        .c2{
            background-color: blue;
            height: 800px;
        }
        .c3{ /* 相对于浏览器窗口来设置位置 */
            position: fixed;
            left: 40px;
            bottom: 60px;
            height: 40px;
             80px;
            background-color: aqua;
            text-align: center;
            line-height: 40px;
            border-radius: 50%; /* 正方形的园度 */
        }
        .c3 a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
    <div id="top">顶部位置</div>
    <div class="c1"></div>
    <div class="c2"></div>
    <span class="c3">
        <a href="#top">回到顶部</a>
    </span>
</body>
</html>
复制代码

实现效果如下图所示

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/onesea/p/13601300.html