CSS样式

最新推荐文章于 2024-07-26 08:00:00 发布

勿言128

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量116

点赞数 2

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_61825662/article/details/131385866

版权

一、高度宽度

高度(height): 可以为元素设置高度
宽度(width): 可以为元素设置宽度

注意:

块表签能设置高度宽度，内联标签不能设置高度宽度，内联标签的高度宽度是根据标签的内容来决定的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:200px;
            height:100px;
            background:green;
        }
        span{
            width:200px;
            height:100px;
            background:yellow;
        }
    </style>
</head>
<body>

<div>
    生当作人杰,死亦为鬼雄.
</div>
<span>
    老骥伏枥,志在千里.
</span>

</body>
</html>

二、字体相关

1.字体属性：

1.1 文字字体：font-family (默认的是宋体)

div{

font-family: '楷体','黑体','宋体';

}

1.2 文字大小：font-size (默认的大小是16px)

div{

font-size: 20px;

}

1.3 字重(粗细)：font-weight 用来设置字体的字重（粗细）。

div{

font-weight: bold; #粗体

}

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

2.文本颜色：

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

        1.十六进制值如: ＃FF00FF #前两位是表示红，中间两位表示绿，后面两位表示蓝，F是最高级别，0表示最低级别（无色）

        2.一个RGB值如: RGB(255,255,0) #红绿蓝就是RGB的意思，第一个参数是红，最高255，最低0

        3.颜色的名称如: red还有rgba(255,0,0,0.5)，第四个值为透明度, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

3. 文字属性

3.1 文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

div{

text-align: left;

}

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

3.2 文字装饰

text-decoration 属性用来给文字添加特殊效果。

常用来去掉a标签的下划线。

a{

text-decoration: none;

}

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

3.3 首行缩进

p{

text-indent: 32px; # 首行缩进两个字符

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-family:'楷体','黑体';
            font-size: 20px;
            font-weight: bold;
            color:#ff0000;
            text-align: center;     /* 字体居中 */
            text-decoration:underline;  /* 添加下划线 */
        }
        a{
            text-decoration:none;
        }
        p{
            text-indent:32px;
        }
    </style>
</head>
<body>

<div>
  举杯邀明月,对影成三人.
</div>
<a href="http://www.baidu.com" target="_blank">百度</a>
<p>
    明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。
</p>

</body>
</html>

三、背景属性

CSS的背景属性用于设置HTML元素的背景样式。在CSS中，背景相关的属性有很多，包括背景颜色、背景图片、背景重复、背景位置等等。这些属性可以让我们轻松控制元素的背景样式，让网页看起来更加美观。

1.背景颜色属性

背景颜色属性用于设置HTML元素的背景颜色，例如：

body {
  background-color:#f2f2f2;
}

这个代码会将整个页面的背景颜色设置为#f2f2f2。

2.背景图片属性

背景图片属性用于设置HTML元素的背景图像，例如：

body {
  background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA');
}

这个代码会将整个页面的背景图像设置为 https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA。

3.背景重复属性

背景重复属性用于设置HTML元素的背景图像的重复方式，例如：

body {
  background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA');
  background-repeat: no-repeat;
}

这个代码会将整个页面的背景图像设置为https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA，且不重复。

常用的属性值有：

        - repeat：将整个背景图像重复平铺，直到填满整个元素。
        - repeat-x：将背景图像沿着水平方向重复平铺，直到填满整个元素。
        - repeat-y：将背景图像沿着垂直方向重复平铺，直到填满整个元素。
        - no-repeat：不重复背景图像，只显示一次。

4.背景位置属性

背景位置属性用于设置HTML元素的背景图像的位置，例如：

body {
  background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA');
  background-position: center;
}

这个代码会将整个页面的背景图像设置为 https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA，并使其在元素中心位置居中对齐。

常用的属性值有：

        - top：背景图像在元素顶部对齐。
        - center：背景图像在元素中心位置居中对齐。
        - bottom：背景图像在元素底部对齐。
        - left：背景图像在元素左侧对齐。
        - right：背景图像在元素右侧对齐。
        - x% y%：背景图像在元素按照指定百分比位置对齐。

5.背景大小属性

背景大小属性用于设置HTML元素的背景图像的尺寸，例如：

body {
  background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA');
  background-size: cover;
}

这个代码会将整个页面的背景图像设置为 https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA，并让其自动扩展到填满整个元素。

常用的属性值有：

        - auto：背景图像按照原始尺寸显示。
        - cover：背景图像按照比例扩展，直到填满整个元素区域，可能会截取部分背景图。
        - contain：背景图像按照比例缩小，直到可以完整地放入背景区域。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            background-color: #f0ad4e;
        }

        div {
            border: 1px solid red;
            height: 600px;
            width: 600px;
            background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA');
            background-repeat: repeat;
            background-position: center top;
            /*background-size: cover;*/
        }

</head>
<body>
<p>
    猪猪侠
</p>
<div>
    <a href="http://www.baidu.com" target="_blank">百度</a>
</div>

</body>
</html>

6.背景不动

背景位于页面的固定位置,不会随着鼠标的滚动而移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      *{
        margin:0;
      }
      .box{
            border: 1px solid red;
            height:500px;
            width:100%;
            background: url('https://img1.baidu.com/it/u=1108125939,1487508865&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200') no-repeat center center;
            background-attachment: fixed;
      }
      .div1{
        height:500px;
        background:blue;
      }
      .div2{
        height:500px;
        background:tomato;
      }
      .div3{
        height:500px;
        background:orange;
      }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="box"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

CSS背景属性

四、边框属性

CSS的边框属性用于设置HTML元素的边框样式。在CSS中，边框相关的属性有很多，包括边框宽度、边框样式、边框颜色等等。这些属性可以让我们轻松控制元素的边框样式，让网页看起来更加美观。

1.边框宽度属性

边框宽度属性用于设置HTML元素的边框宽度，例如：

div {
  border-width: 2px;
}

这个代码会将 div 元素的边框宽度设置为 2px。

常用的属性值有：

        - thin：边框宽度为1px。
        - medium：边框宽度为3px。
        - thick：边框宽度为5px。

也可以使用具体的像素值设置边框宽度。

2.边框样式属性

边框样式属性用于设置HTML元素的边框样式，例如：

div {
  border-style: solid;
}

这个代码会将 div 元素的边框样式设置为实线边框。

常用的属性值有：

        - solid：实线。
        - dashed：虚线。
        - dotted：点线。
        - double：双实线。

也可以使用其他更具特点的边框样式，如：

div {
  border-style: ridge; /* 3D凸起效果 */
  border-style: groove; /* 3D凹陷效果 */
  border-style: inset; /* 3D向内浮雕效果 */
  border-style: outset; /* 3D向外浮雕效果 */
}

3.边框颜色属性

边框颜色属性用于设置HTML元素的边框颜色，例如：

div {
  border-color: #ccc;
}

这个代码会将 div 元素的边框颜色设置为 #ccc。

也可以使用关键词设置颜色，如：

div {
  border-color: red;
}

常用的属性值有：

        - color name（颜色名）：red、green、blue等。
        - rgb(R,G,B)：使用RGB数值。
        - #RRGGBB：使用十六进制颜色值表示。

4.边框圆角属性

边框圆角属性用于设置HTML元素的边框圆角效果，例如：

div {
  border-radius: 10px;
}

这个代码会将 div 元素的四个角都设置成为圆形。

通常 border-radius 可以设置两个值，第一个指定水平方向半径，第二个指定垂直方向半径。如果只有一个值，则指定圆角的半径是相同的。此外，也可以指定不同的半径值，例如：

div {
  border-top-left-radius: 30px;
  border-bottom-right-radius: 15px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 10px;
}

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border-style: dotted;
            border-color: red;
            border-width: 10px;
            width: 400px;
            height: 400px;
            border-radius: 50%;
        }

        img{
            border-radius: 50%;
        }
    </style>

</head>
<body>

<div>

</div>

<!--<img src="https://img1.baidu.com/it/u=1108125939,1487508865&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200" alt="IU李智恩" title="iu">-->
<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA" alt="猪猪侠" title="猪">
</body>
</html>

五、display和visiblity

display属性 : 用于控制HTML元素的显示效果。

display:"none" : HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" : 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" : 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" : 使元素同时具有行内元素和块级元素的特点。

示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 300px;
                height: 300px;
                border: 1px solid blue;
                display: inline-block;
                display:none;
            }
            span{
                width: 300px;
                height: 300px;
                border: 1px solid pink;
                display: inline-block;
            }
        </style>
    </head>
    <body>
    <div>
        xxxxx
    </div>
    <span>
        ppppp
    </span>
    </body>
    </html>

六、盒子模型

在css里面，每个标签可以称为一个盒子模型，看下面的图：

1.margin: 外边距：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

2.padding: 内边距：用于控制内容与边框之间的距离；

3.Border(边框): 围绕在内边距和内容外的边框。

4.Content(内容): 盒子的内容，显示文本和图像。

示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .c1{
                width: 200px;
                height: 200px;
                border: 10px solid yellow;
                padding: 10px 20px 15px 10px;
                margin: 20px 10px;
            }
            .c2{
                width: 200px;
                height: 200px;
                border: 10px solid red;
                margin: 2px 10px 6px 8px;
            }
            .c3{
                width: 200px;
                height: 200px;
                border: 10px solid blue;
            }
        </style>
    </head>
    <body>
    
    <div class="c1">div1</div>
    <div class="c2">div2</div>
    <div class="c3">div3</div>
    
    
    </body>
    </html>

四个方向单独设置 -- padding (一起设置时顺序是: 上右下左)

padding-top: 10px
padding-right: 10px
padding-bottom: 10px
padding-left: 10px

四个特方向单独设置 -- margin

margin-top: 10px
margin-right: 10px
margin-bottom: 10px
margin-left: 10px

七、float浮动

一般用来进行页面布局
浮动会脱离正常文档流
会造成父级标签塌陷问题
清除浮动(解决塌陷问题)

   方式1:
        clear:both;    /* clear清除浮动 */   left\right
    方式1:
        1.父级标签设置高度
        2.通过伪元素选择器来进行清除浮动:如下
            .clearfix:after{
                content: '';
                display: block;
                clear: both;
            }
    示例:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                margin: 0;
            }
                    .c1{
                width: 200px;
                height: 200px;
                background-color: red;
                float: left;
            }
            .c2{
                width: 200px;
                height: 200px;
                background-color: green;
                float: right;
            }
            .c3{
                height: 200px;
                background-color: deeppink;
                clear: both;
            }
            .clearfix:after{
                content: '';
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
    
    <div class="c1 clearfix">div1</div>
    <div class="c2">div2</div>
    <div class="c3">div3</div>
    
    </body>
    </html>

clear

　clear属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧均不允许浮动元素
none	默认值,允许浮动元素在两侧
inherit	规定应该从父级元素继承clear属性的值

八、overflow

CSS的overflow属性用于定义一个元素的内容是否可溢出，如果设置了该属性，当内容超出元素的尺寸时，可以指定如何处理溢出的部分。

常用的属性值有：

visible：元素内容可能会溢出到容器外面。
hidden：溢出部分被隐藏，不可见。
scroll：溢出部分被隐藏，但是滚动条可以操作以访问所有内容。
auto：如果内容不超过容器，则行为与 visible 一致；否则，表现为 scroll。

例如，一个固定大小的 div 中，如果内容长于 div，设置 overflow 属性为 scroll 即可使内容超出 div 时出现滚动条：

div {
  width: 200px;
  height: 100px;
  overflow: scroll;
}

如果使用了 overflow: hidden，那么溢出部分将被隐藏，看不到：

div {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

overflow 对于图像元素也是可以使用的。一般情况下，图像的溢出部分虽然不会显示在界面上，但是会占据实际的空间。当需要使用一张图像作为背景时，可以使用 overflow 样式的隐藏特性，使图像仅显示背景图片的可见部分，并占据实际空间的部分被隐藏。


<style>
.image-bg {
  width: 400px;
  height: 200px;
  background-image: url("IMAGE-URL");
  background-size: cover;
  overflow: hidden;
}
</style>


<body>
<div class="image-bg"></div>
</body>

最后需要注意的是，`overflow`属性仅适用于设置了高度或宽度的块级元素和图像元素。对于行内元素，不支持此属性。需要先使用`display: inline-block`等样式，将元素转化为块级元素才能使用 overflow 属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            overflow: scroll;
        }
    </style>
    <!-- overflow: hidden; 隐藏溢出的文本内容 -->
    <!-- overflow: scroll; 滚动条查看溢出的文本内容 -->
</head>
<body>
<div>
    菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.
</div>
</body>
</html>