
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            font-size: 25px;
            font-family: '微软雅黑';
        }
        .two{
            font-size:25px;
            font-family:'宋体';
        }
        .three{
            font-size: 25px;
            font-family: '黑体';
        }
        .four{
            font-size: 25px;
            font-family: '华文行楷';
        }
    </style>
</head>
<body>
    <div class="one">
        这是第一个div
    </div>
    <div class="two">
        这是第二个div
    </div>
    <div class="three">
        这是第三个div
    </div>
    <div class="four">
        这是第四个div
    </div>
</body>
</html>

运行后页面如下：

注：（1）font-family属性指定的字体要求必须是系统已经安装的字体，上文代码所使用的微软雅黑、宋体、黑体、华文行楷都是windows系统自带的字体，故而直接指定字体是可以正确显示的。

如果需要指定一些特殊字体，系统上没有则不能正确显示。

这种情况一般是需要通过浏览器请求对应的服务器，获取到指定字体文件才能进行设置（一般网站都使用系统自带字体）；

1.2 设置字体大小 font-size

示例代码同上，此处不再赘述；

注：（1）浏览器中的每个文字可视为一个方框，英文与拉丁文的方框可能比较窄，中文的方框一般是正方形，可以将设置字体大小视为设置字体方框的高；

（2）如果需要使用截图工具（如QQ截图、微信截图等）进行大概手动测量，注意设置浏览器缩放与显示器缩放为100%，否则可能会测量与设置不符；

1.3 设置字体粗细 font-weight


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one2{
            font-size: 25px;
            font-family: '微软雅黑';
        }
        .one{
            font-size: 25px;
            font-family: '微软雅黑';
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="one2">
        这是第一个div
    </div>
    <div class="one">
        这是第一个div
    </div>
 
</body>
</html>

运行后页面如下：

注：（1）字体粗细的设置，参考mdn文档，有：

截图链接：font-weight - CSS：层叠样式表 | MDN (mozilla.org)

（2）字体也可以通过设置字体粗细实现标题效果，html很多标签都可以通过cs实现；

1.4 设置字体倾斜 font-style


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one2{
            font-size: 25px;
            font-family: '微软雅黑';
        }
        .one{
            font-size: 25px;
            font-family: '微软雅黑';
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="one2">
        这是第一个div
    </div>
    <div class="one">
        这是第一个div
    </div>
</body>
</html>

运行后页面如图：

2. 文本属性

2.1 设置文本颜色 color

计算机表示颜色方式：

（1）RGB：现实中很多颜色都是由红绿蓝三原色混合而成的，而计算机也可采用RGB三色调和表示颜色，计算机给RGB各分配一个字节，每个字节的范围时0~255（00~FF）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            font-size: 25px;
            font-family: "微软雅黑";
            color:rgb(255,0,0);
        }
    </style>
</head>
<body>
    <div class="one">这是一个div</div>
</body>
</html>

如上文rgb(255,0,0)表示red分量设置为最大值，green、blue分量均设置为0；

注：当三各颜色分量均设置为255最大值时，将会呈现白色；

当三个颜色分量均设置为0时，将会呈现黑色；

（2）在前端中，每个分量都使用一个字节来表示，范围0~255或0~0xff，其中每两个十六进制数表示一各颜色分量，如：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .one{
            font-size: 25px;
            font-family: "微软雅黑";
            color:rgb(255,0,0);
        } */
        .two{
            font-size: 25px;
            font-family: "微软雅黑";
            color:#ff0000;
        }
    </style>
</head>
<body>
    <div class="one">这是一个div</div>
</body>
</html>

表示红色分量设置为最大值，蓝色和绿色分量均设置为0，故而最终字体为红色；

注：16进制表示数字可以缩写，如果每个分量的两个十六进制数字都相同，就可以把6位16进制数字缩写成3位十六进制，如表示纯红色，既可以写为#f0000，也可以写为#f00；

（3）直接使用颜色单词表示，如red，blue，green等；

2.2 文本对齐 text-align

text-align属性可设置为left靠左对齐，center居中对齐，right靠右对齐等：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            font-size: 25px;
            font-family: "微软雅黑";
            color:rgb(255,0,0);
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="one">
        这是一个div
    </div>
</body>
</html>

运行后页面如下：

2.3 文本装饰 text-decoration

常用取值为：

underline：下划线；

none：可用于给a标签去下划线；

overline：上划线；

line-through：删除线；


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">链接1</a>
    </div>
</body>
</html>

运行后页面如下：

2.4 文本缩进 text-indent

text-indent有两种取值表示方式：
第一种：像素表示法，根据字体大小自行计算缩进值，如字体大小为20px，则缩进两格可以标识为：text-indent:20px;

但是这种方法不仅要自行根据字体大小计算缩进尺寸，并且当字体大小变化时，缩进尺寸还需另行计算并随之更改，表示绝对，故而并不常用；

第二种：em表示法，em是一个相对量，是以文字尺寸为基础来进行设置的，如果文字大小是25px，则1em=25px，2em=50px；


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="one">
        这是一个div
    </div>
    <div>
        这是第二个div
    </div>
</body>
</html>

运行后页面如图：

注：（1）文本缩进的取值可以为负数，负数表示往左缩进：

2.5 行高 line-height

HTML中展示文字涉及到以下基准线：

行高=文字高度+行间距；

如运行以下代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            font-size: 25px;
            font-family: "微软雅黑";
            color:rgb(255,0,0);
            text-align: left;
            text-decoration: line-through;
            text-indent: 2em;
            line-height: 45px;
        }
    </style>
</head>
<body>
    <div class="one">
        这是一个div
    </div>
    <div class="one">
        这是第二个div
    </div>
</body>
</html>

运行后页面如图：

此时字体大小25px，行高45px，即行间距20px；

3. 背景属性

3.1 背景颜色 background-color


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            font-size:25px;
            color:brown;
            font-family:"微软雅黑";
            background-color:cadetblue;
        }
    </style>
</head>
<body>
    <div class="one">
        这是一个div
    </div>
</body>
</html>

运行后页面如图：

3.2 背景图片 background-image

通过background-image:url(图片名称)设置图片背景；

3.2.1 背景图片平铺设置：background-repeat

当引入背景图片后，默认情况下图片是平铺的，可以使用background-repeat:no-repeat来取消平铺，仅为单个照片，图片出现在左上角。

3.2.2 背景图片位置设置：background-position

设置方法1：

使用top、center、bottom等方位词设置图片位置，

如：background-position:center center令图片水平居中，垂直居中，

backgroun-position:top center令图片水平居中，垂直在上；

设置方法2：

使用像素进行左表设置图片位置；

注意计算机中的坐标系是原点在左上角，y轴正方向竖直向下，x轴正方向水平向右的左手坐标系；

3.2.3 背景图片大小：background-size

设置方法1：

像素设置：手动指定背景图片的长和高；

设置方法2：

contain：令图片尽可能大地展示，但图片须全图展示；

cover：令图片完全覆盖背景区域，背景图像的某些部分可能无法展示在背景定位区域中；

注：在background属性的加持下，任何一个元素都可以用来显示图片，而且提供的功能比image标签更强大；

4. 圆角矩形

HTML元素默认都是一个个矩形，但有时候需要表示带有圆角的矩形；

使用border-radius:进行像素设置来指定矩形角的内切圆半径值；

4.2 生成圆角矩形


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 200px;
            height:100px;
            background-color: orange;
            color:#fff;
            text-align:center;
            line-height:100px;
            border-radius: 10px;
            /* 表示矩形角的内切圆半径为10px */
        }
    </style>
</head>
<body>
    <div class="one">
        这是一个div
    </div>
</body>
</html>

运行后页面如下：

注：当设置的内切圆半径为矩形高度的一半，就会有以下胶囊型形状：

4.3 生成圆形

当原矩形为正方形时，再将矩形角内切圆半径设置为边长的一半，就可以生成圆形：


    <style>
        .one{
            width: 150px;
            height:150px;
            background-color: orange;
            color:#fff;
            text-align:center;
            line-height:150px;
            border-radius: 75px;
            /* 表示矩形角的内切圆半径为10px */
        }
    </style>

运行后页面如下：

5. 元素的显示模式

5.1 块级元素 display:block

常见的块级元素有：


h1 - h6
p
div
ul
ol
li
...

5.2 行内元素 display:inline

常见的行内元素有：


a
strong
b
em
i
del
s
ins
u
span
...

5.3 块级元素和行内元素的区别

（1）块级元素独占一行，行内元素不独占一行；

（2）块级元素高度、宽度、内外边距都可以设置；

行内元素的高度、宽度、行、高均无效，内边距有效，外边距有时有效有时无效；

（3）块级元素默认宽度和父元素一样宽，行内元素默认宽度和连内容一样宽；

（一般将行内元素转成块级元素）

6. CSS盒子模型

任何一个HTML块级元素都是一个矩形盒子：

从内到外分别为：内容content、内边距padding、边框border、外边距margin；

通过设置这几内边距、边框、外边距这几个属性，就可以控制元素之间、元素和内容之间的相对位置了；

6.1 边框

（1）border属性直接设置了四个方向，

还可以使用border-left、border-right、border-top、border-bottom分别设置四个方向；

（2）设置边框要设置三个方面：

①、边框的粗细；

②、边框的颜色；

③、边框的风格（实线solid、虚线dashed、点线dotted...）；


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width:200px;
            height:100px;
            background-color: orange;
            color:white;
 
            text-align: center;
            line-height: 100px;
 
            border:5px chocolate solid;
        }
    </style>
</head>
<body>
    <div class="one">
        这是一个div
    </div>
</body>
</html>

运行后页面如下：

注：（2）width和height表示的是内容的尺寸，加上边框后，内容尺寸没有变化，但边框会撑大盒子；

（2）大多数情况下都不希望因为边框撑大盒子，因为会影响该元素与其他元素的相对位置，可以使用一些专用属性防止盒子被撑大：


    <style>
        .one{
            width:200px;
            height:100px;
            background-color: orange;
            color:white;
 
            text-align: center;
            line-height: 100px;
 
            border:5px chocolate solid;
            box-sizing: border-box;
        }
    </style>

将box-sizing属性设置为border-box就可以避免边框撑大盒子，即该情况下的边框是向内增加边框；

6.2 内边距

内边距设置的是内容与边框之间的距离：

以文字左对齐为例，可以通过设置padding-left指定内容与边框的距离：


    <style>
        .one{
            width:200px;
            height:100px;
            background-color: orange;
            color:white;
 
            text-align: left;
            line-height: 100px;
 
            border:5px chocolate solid;
            box-sizing: border-box;
 
            padding-left: 10px;
        }
    </style>

使用网页的开发者工具查看布局可以看出padding内边距被设置为10px：

注：（1）如果要设置四个方向的内边距，可以使用padding:npx进行设置；

（2）padding:10px 表示四个方向内边距均为10px；

padding:10px 20px 表示上下内边距是10px，左右内边距是20px；

padding:10px 20px 30px 40px 将上右下左（顺时针）四个内边距依次设置为10px，20px，30px，40px；

6.3 外边距

外边距设置的是元素和元素之间的距离；

试查看以下代码的运行页面：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width:200px;
            height:100px;
            background-color: orange;
            color:white;
 
            text-align: left;
            line-height: 100px;
 
            border:5px chocolate solid;
            box-sizing: border-box;
 
            padding-left: 10px;
        }
        .two{
            width:200px;
            height:100px;
            background-color:grey;
 
        }
    </style>
</head>
<body>
    <div class="one">
        这是一个div
    </div>
    <div class="two">
        这是第二个div
    </div>
</body>
</html>

其运行页面如下：

可见，当没有设置外边距margin时，两个div之间没有间距，此时可以使用对第一个div元素下外边距设置5像素：


    <style>
        .one{
            width:200px;
            height:100px;
            background-color: orange;
            color:white;
 
            text-align: left;
            line-height: 100px;
 
            border:5px chocolate solid;
            box-sizing: border-box;
 
            padding-left: 10px;
            margin-bottom: 5px;
        }
        .two{
            width:200px;
            height:100px;
            background-color:grey;
 
        }
    </style>

运行后页面如下：

注：（1）同理padding,margin也可以分别对上下左右进行设置；

（2）margin-left和margin-right可以设置为auto，即令浏览器自动调节，此时该元素就可以在父元素内部居中放置：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width:200px;
            height:100px;
            background-color: orange;
            color:white;
 
            text-align: left;
            line-height: 100px;
 
            border:5px chocolate solid;
            box-sizing: border-box;
 
            /* padding-left: 10px; */
            margin-bottom: 5px;
        }
        .three{
            width:50px;
            height: 50px;
            background-color: brown;
            margin-left: auto;
            margin-right:auto;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="three">
 
        </div>
    </div>
</body>
</html>

此时就可以实现元素的居中：

但是垂直方向设置为auto不能实现垂直反向的居中效果；

7. 弹性布局

弹性布局是用于实现页面布局的，即控制某个指定元素放到某个指定位置；

试运行以下代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:100%;
            height:150px;
            background-color:darksalmon;
 
        }
        div>span{
            background-color:lightslategrey;
            width: 100px;   /* 行内元素宽度设置无效 */
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

运行后页面如下：

行内元素虽然是在水平上排列的，但由于其尺寸、边距等均不太可控，并不适合进行水平布局；

（行内块元素和行内元素一样，会把源码中的换行当做一个空格，也会对页面元素布局产生不必要的影响），使用弹性布局是更合适的；

7.1 开启弹性布局 display

开启弹性布局：display:flex; 给要水平排列的元素的父元素设置flex：


    <style>
        div{
            width:100%;
            height:150px;
            background-color:darksalmon;
            display: flex;
        }
        div>span{
            background-color:lightslategrey;
            width: 100px;   /* 行内元素宽度设置无效 */
        }
    </style>

运行后页面如下：

此时弹性容器内的元素不再是“块级”“行内”元素，而成为弹性元素，遵守弹性布局，可以设置尺寸和边距了；

7.2 设置元素的水平排列方式 justify-content

justify-content:flex-start；表示靠左排列；

justify-content:flex-end; 表示靠右排列；

justify-content:flex-center; 表示居中排列；

除此之外，还有可将justify-content设置为space-between，即每个元素左右两侧都有等间距空白，实线元素在水平方向的等间距排列；

7.3 设置元素的垂直排列方式 align-items

align-items:flex-start; 表示靠顶排列；

align-items:flex-end; 表示靠底排列；

align-items:center; 表示居中排列；

试运行以下代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:100%;
            height:150px;
            background-color:darksalmon;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        div>span{
            background-color:lightslategrey;
            width: 100px;
            height:100px;
 
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

运行后页面如图：

可见span1、2、3在水平方向实现了靠左排列，在垂直方向实现了居中排列；

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/87774