CSS常用属性

林的快手

已于 2025-02-20 21:48:38 修改

阅读量372

点赞数 6

分类专栏： HTML+CSS 文章标签： css 前端 ajax json html5 javascript firefox

于 2025-02-20 21:48:23 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_65752158/article/details/145763401

版权

HTML+CSS 专栏收录该内容

20 篇文章

订阅专栏

1.像素

规律：像素点越小，呈现的内容就越清晰、越细腻。

语法：

font-size: 10px;

代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>像素</title>
    <style>
        .name1{
            font-size: 10px;
        }
        .name2{
            font-size: 30px;
        }
        .name3{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="name1">武昌理工学院1</div>
    <div class="name2">武昌理工学院2</div>
    <div class="name3">武昌理工学院3</div>
        
    
</body>
</html>

2.颜色的表示

1.颜色名

编写方式：直接使用颜色对应的英文单词，编写比较简单，例如：

1. 红色： red

2. 绿色： green

3. 蓝色： blue

4. 紫色： purple

5. 橙色： orange

6. 灰色： gray

语法：

color: red;

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色_第1种表示_颜色名</title>
    <style>
        .w1{
            color: red;
        }
        .w3{
            color: green;
        }
        .w2{
            color: blue;
        }
        .w4{
            color: purple;
        }
    </style>
</head>
<body>
    <p class="w1">武昌理工学院1</p>
    <p class="w2">武昌理工学院2</p>
    <p class="w3">武昌理工学院3</p>
    <p class="w4">武昌理工学院4</p>
</body>
</html>

2 表示方式二：rgb 或 rgba

编写方式：使用 红、黄、蓝 这三种光的三原色进行组合。

r 表示红色

g 表示绿色

b 表示蓝色

a 表示 透明度

语法：


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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色_第2种表示_rgb或rgba</title>
    <style>
        .w1{
            color: rgb(255, 0, 0);
        }
        .w3{
            color: rgb(0, 255, 0);
        }
        .w2{
            color: rgba(0, 0, 255, 0.5);
        }
        .w4{
            color: rgba(20, 30, 10, 0.7);
        }
    </style>
</head>
<body>
    <p class="w1">武昌理工学院1</p>
    <p class="w2">武昌理工学院2</p>
    <p class="w3">武昌理工学院3</p>
    <p class="w4">武昌理工学院4</p>
</body>
</html>

3.表示方式三：HEX 或 HEXA

语法

 color:  #00fc

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色_第3种表示_HEX或HEXA</title>
    <style>
        .w1{
            color: #ff0000;
        }
        .w3{
            color: #0f0
        }
        .w2{
            color:  #00fc
        }
        .w4{
            color: #fcdcbb09
        }
    </style>
</head>
<body>
    <p class="w1">武昌理工学院1</p>
    <p class="w2">武昌理工学院2</p>
    <p class="w3">武昌理工学院3</p>
    <p class="w4">武昌理工学院4</p>
</body>
</html>

3.CSS字体属性

1. 字体大小

属性名： font - size

作用：控制字体的大小。

语法

div {
font-size: 40px;
}

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_字体大小</title>
    <style>
        .w1{
            color: rgb(255, 0, 0);
            font-size: 10px;
        }
        .w3{
            color: rgb(0, 255, 0);
            font-size: 30px;
        }
        .w2{
            color: rgba(0, 0, 255, 0.5);
            font-size: 50px;
        }
        .w4{
            color: rgba(20, 30, 10, 0.2);
            font-size: 70px;
        }
    </style>
</head>
<body>
    <p class="w1">武昌理工学院1</p>
    <p class="w2">武昌理工学院2</p>
    <p class="w3">武昌理工学院3</p>
    <p class="w4">武昌理工学院4</p> 
</body>
</html>

2.字体族

属性名： font - family

作用：控制字体类型。

语法：

div {
font-family: "STCaiyun","Microsoft YaHei",sans-serif
}

1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里
去寻找。
2. 如果字体名包含空格，必须使用引号包裹起来。
3. 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面
的，且通常在最后写上 serif （衬线字体）或 sans-serif （非衬线字体）。
4. windows 系统中，默认的字体就是微软雅黑。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_字体族</title>
    <style>
        .w1{
            color: rgb(255, 0, 0);
            font-size: 10px;
            font-family: "Microsoft JhengHei UI Light";
        }
        .w3{
            color: rgb(0, 255, 0);
            font-size: 30px;
            font-family: "Malgun Gothic";
        }
        .w2{
            color: rgba(0, 0, 255, 0.5);
            font-size: 50px;
            font-family: "MS Gothic";
            
        }
        .w4{
            color: rgba(20, 30, 10, 0.2);
            font-size: 70px;
            font-family: "Georgia Pro Black";
        }
    </style>
</head>
<body>
    <p class="w1">武昌理工学院1</p>
    <p class="w2">武昌理工学院2</p>
    <p class="w3">武昌理工学院3</p>
    <p class="w4">武昌理工学院4</p> 
</body>
</html>

3.字体风格

属性名： font - style

作用：控制字体是否为斜体。

常用值：

1. normal ：正常（默认值）

2. italic ：斜体（使用字体自带的斜体效果）

3. oblique ：斜体（强制倾斜产生的斜体效果）

实现斜体时，更推荐使用 italic 。

语法：

div {
font-style: italic;
}

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_字体族</title>
    <style>
        .w1{
            color: rgb(255, 0, 0);
            font-size: 10px;
            font-family: "Microsoft JhengHei UI Light";
            font-style: normal;
        }
        .w3{
            color: rgb(0, 255, 0);
            font-size: 30px;
            font-family: "Malgun Gothic";
            font-style: italic;
        }
        
        .w4{
            color: rgba(20, 30, 10, 0.2);
            font-size: 70px;
            font-family: "Georgia Pro Black";
            font-style: oblique;
        }
    </style>
</head>
<body>
    <p class="w1">武昌理工学院1</p>
   
    <p class="w3">武昌理工学院3</p>
    <p class="w4">武昌理工学院4</p> 
</body>
</html>

4 字体粗细

属性名： font - weight

作用：控制字体的粗细。

常用值：

关键词

1. lighter ：细

2. normal ：正常

3. bold ：粗

4. bolder ：很粗（多数字体不支持）

语法：

div {
font-weight: bold;
}
div {
font-weight: 600;
}

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体粗细</title>
    <style>
        .w1{
            color: rgb(255, 0, 0);
            font-size: 10px;
            font-family: "Microsoft JhengHei UI Light";
            font-style: normal;
            font-weight: lighter;
        }
        .w3{
            color: rgb(0, 255, 0);
            font-size: 30px;
            font-family: "Malgun Gothic";
            font-style: italic;
            font-weight: normal;
        }
        
        .w4{
            color: rgba(20, 30, 10, 0.2);
            font-size: 70px;
            font-family: "Georgia Pro Black";
            font-style: oblique;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="w1">武昌理工学院1</p>
   
    <p class="w3">武昌理工学院3</p>
    <p class="w4">武昌理工学院4</p> 
</body>
</html>

1. 100~1000 且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的

精确程度）。

2. 100~300 等同于 lighter ， 400~500 等同于 normal ， 600 及以上等同于

bold 。

5. 字体复合写法

属性名： font ，可以把上述字体样式合并成一个属性。

作用：将上述所有字体相关的属性复合在一起编写。

编写规则：

1. 字体大小、字体族必须都写上。

2. 字体族必须是最后一位、字体大小必须是倒数第二位。

3. 各个属性间用空格隔开。

实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用 font

size 属性。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05_字体复合属性</title>
    <style>
        .w1{
            font:bold italic 20px "STHupo";
        }
        .w3{
            font:lighter normal 40px "Times New Roman";
        }
        .w4{
            font:bold normal 70px "Lucida Handwriting";
        }
    </style>
</head>
<body>
    <p class="w1">武昌理工学院1</p>
   
    <p class="w3">武昌理工学院3</p>
    <p class="w4">武昌理工学院4</p> 
</body>
</html>