关于CSS的外观属性（一）

最新推荐文章于 2024-08-30 15:33:13 发布

Serein-666

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量883

点赞数 26

文章标签： css 前端

本文链接：https://blog.csdn.net/2201_75683676/article/details/139657684

版权

一、字体

1.字体样式

font-size属性用于设置字号。推荐使用像素单位px

a.浏览器支持的字体大小：最小 12px

b. 浏览器默认的字体大小：16px

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <!-- 内部样式表 -->
    <style>
        .con {
            font-size: 30px;
        }
        span {
            font-size: 1em;
            /* 1em和父元素字体大小一样，2em是父元素字体大小2倍 */
        }
    </style>
</head>
<body>
    <!-- 选择器 -->
    <div class="con"></div>大爷六元买到军事机密！
   <span>你好</span>
   <span>范德萨</span>
    </div>
</body>

</html>

运行结果为：

2.字体家族

font-family属性用于设置字体。

a.浏览器的默认字体是微软雅黑

b.多个字体用逗号隔开

c.注意：这是错误写法：font-family: 宋体,Arial;----正确写法---英文应该写在前面

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .wrap {
            font-family: Arial, 宋体;
        }
    </style>
</head>
<body>
    <div class="wrap">hello 你是谁</div>
</body>

</html>

3.字体粗细

a.加粗使用 bold和700

b. 正常体使用 normal和400

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .con1 {
            /* 字体粗细：粗的 */
            font-weight: bold;
        }
        .con2 {
            /* 字体粗细：更粗的 */
            font-weight: bolder;
        }
        .con3 {
            /* 字体粗细：更细的 */
            font-weight: lighter;
        }
        .con4 {
            /* 字体粗细：加粗100-900 */
            font-weight: 700;
        }
        strong {
            font-weight: normal;
            font-weight: 400;
        }
    </style>
</head>
<body>
    <div class="con1">字体粗细表示</div>
    <div class="con2">字体粗细表示</div>
    <div class="con3">字体粗细表示</div>
    <div class="con4">字体粗细表示</div>
    <div class="con5">字体粗细表示</div>
    <strong>邓超</strong>
</body>
</html>

结果为：

4.字体风格

a. 又想使用em加重语气，又不想让字体是斜体，这时设置字体风格样式

/* 正常体 */ font-style: normal;

/* 斜体 */ font-style: italic;

5.字体简写

/* font: font-style font-weight font-size font-family; */可以简写为 font: italic 700 32px 宋体;

二、链接伪类选择器

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        /* 1.未访问的链接 */
        
        a:link {
            color: yellow;
        }
        /* 2.已访问的链接 */
        
        a:visited {
            color: blue;
        }
        /* 3.鼠标移动到目标元素上 */
        
        a:hover {
            color: aquamarine;
        }
        /* 4.选定的链接 */
        
        a:active {
            color: green;
        }
    </style>
</head>

<注意!-- a标签的href不允许删除，如果href内容没有或者不确定时，建议用#号 -->

<body>
    <a href="#">百度一下</a>
    <a href="http://www.mi.com">小米我是米粉</a>
</body>

三、color样式设置

1. 预定义的值 color: red;

2.十六进制表示法 0-9 A-f ，最小的是0，最大的是f

/* color: #ff ff ff;

color: #000000;黑色

color: #ff0000;红色

color: #00ff00;绿色

color: #0000ff;蓝色

3.rgb red green blue 0-255

color: rgb(255, 255, 255);白色

color: rgb(0, 0, 0);黑色

color: rgb(255, 0, 0);红色

4.rgba alpha 透明度 0-1

color: rgba(255, 0, 0, 0.5);

color: rgba(255, 0, 0, .5);

四、行高的用法

1.行与行之间的间距变大 line-height: 50px;

2. line-height的值和盒子的高度相同

3.行高=本身字体大小+上半行距+下半行距

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        /*  单行文本在垂直方向居中----垂直居中*/
        .box {
            width: 150px;
            height: 50px;
            border: 1px solid red;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">走起来</div>
</body>
</html>

运行结果：