css基础常见样式声明

pythonset

于 2022-11-02 13:53:13 发布

阅读量206

点赞数

分类专栏： css 文章标签： html css 前端

本文链接：https://blog.csdn.net/pythonset/article/details/127650267

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

常见样式声明

1.color
元素内部的文字颜色

预设值 ：定义好的单词

三原色，色值：光学三颜色（红绿蓝），每个颜色可以使用0-255之间的数字来表达

代码：rgb(0,255,0)
hex(16进制)表示法：#红绿蓝
淘宝红：#ff4400
黑色：#000000或者#000
白色：#ffffff或者#fff
灰色：#ccc
…

2.background-color

元素背景颜色

3.font-size

元素内部文字的尺寸大小

1）.xpx:像素,绝对单位，理解为文字的高度占多少个像素
2).em: 相对单位，相对于父元素的字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则设为基准字号
user agent ,UA, 用户代理（浏览器）

4.font-weigt

文字粗细程度，可以取值数字，可以取值为预设值
strong,em元素都有默认加粗的效果

5.font-family

文字类型
必须是用户计算机中存在的字体才能有效
使用多个字体匹配
sans-serif,飞村线字体

6.font-style

字体样式，通常用于字体倾斜

i元素，默认样式，是倾斜字体；实际使用中，通常用来表示一个图标（icon）

7.text-decoration

文本修饰，给文本加线

a元素
del元素：错误的内容
s元素：过期的内容

8.text-indent

首行文本缩进

9.line-height

行高：表示文本高度，该值越大文本的像素越大

设置行高为文本的高度，可以让单行文本垂直居中

10.width

宽度

11.height

高度

12.letter-space

letter-spacing:
文字间隙

13.text-align

元素内部水平排列方式

/* css注释：ctrl+? */
.study-color{
    color:rgb(0,255,0);
}
.background-color{
    background-color: blue;
}

.study-fontsize{
    font-size: 3em;
}
.font-weigt{
    font-weight: bolder;
}
.font-family{
    font-family:宋体, consolas ,'Courier New',微软雅黑,sans-serif;
}
.font-style{
    font-style: italic;
}
.text-decoration{
    text-decoration: none;
}
.text-indent{
    text-indent: 2em;
}
.line-height{
    line-height: 20;
}
.width{
    width: 20px;
}
.height{
    height: 40px;
}
.letter-space{
    letter-spacing: 50px;
}
.txet-align{
    text-align: center;
}

<!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>
    <link rel="stylesheet" href="css/2.css">
</head>
<body>
    <div class="study-color">
        123456
    </div>
    <div class="background-color">
        123456
    </div>
    <div class="study-fontsize">
        123456
    </div>
    <div class="font-weigt">
        123456
    </div>
    <div class="font-family">
        123456
    </div>
    <div class="font-style">
        123456
    </div>
    <div class="text-decoration">
        章口就来
        <p>活动价:98,原价: <s>998</s> </p>
    </div>
    <div class="text-indent">
        123456
    </div>
    <div class="line-height">
        123456
    </div>
    <div class="width">
        123456
    </div>
    <div class="height">
        123456
    </div>
    <div class="letter-space">
        123456
    </div>
    <div class="text-align">
        123456
    </div>
</body>
</html>