CSS样式

一、高度宽度

  1. 高度(height): 可以为元素设置高度
  2. 宽度(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>

 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

勿言128

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值