css属性

最新推荐文章于 2025-09-30 21:40:49 发布

原创最新推荐文章于 2025-09-30 21:40:49 发布 · 1.2k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

1.⽂本属性

1.1颜色属性

格式: color: 值;

取值:

英⽂单词

⼀般情况下常⻅的颜⾊都有对应的英⽂单词, 但是英⽂单词能够表达

的颜⾊是有限制的, 也就是说不是所有的颜⾊都能够通过英⽂单词来表达

rgb

rgb其实就是三原⾊, 其中r(red 红⾊) g(green 绿⾊) b(blue 蓝⾊)

格式: rgb(0,0,0)

那么这个格式中的

第⼀个数字就是⽤来设置三原⾊的光源元件红⾊显示的亮度

第⼆个数字就是⽤来设置三原⾊的光源元件绿⾊显示的亮度

第三个数字就是⽤来设置三原⾊的光源元件蓝⾊显示的亮度

这其中的每⼀个数字它的取值是0-255之间, 0代表不发光, 255代表发光, 值越⼤就越亮

rgba

rgba中的rgb和前⾯讲解的⼀样, 只不过多了⼀个a

那么这个a呢代表透明度, 取值是0-1, 取值越⼩就越透明

例如: color: rgba(255,0,0,0.2);

⼗六进制

在前端开发中通过⼗六进制来表示颜⾊, 其实本质就是RGB

⼗六进制中是通过每两位表示⼀个颜⾊

例如: #FFEE00 FF表示R EE表示G 00表示B

推荐取色工具

1.2font-style ⽤于打开和关闭斜体⽂本

格式：font-style: italic;

取值：

normal ：正常的，默认就是正常的

italic : 倾斜的

1.3font-weight 为字体设置粗细程度

格式： font-weight: bold;

取值:

bold 加粗

bolder ⽐加粗还要粗

lighter 细线，默认就是细线

数字取值：

100-900之间整百的数字

400 等同于 normal 700 等同于 bold

1.4font-size 为⽂字指定⼤⼩

格式：font-size: 30px;

单位：px（像素 pixel）

注意点：通过font-size设置⼤⼩⼀定要带单位，也就是⼀定要写px

1.5font-family 为⽂字指定特殊的字体

浏览器只会使⽤浏览器可以访问到的字体

格式：font-family:"楷体" ;

如果取值是中⽂，需要⽤双引号或者单引号括起来，多个单词组合也要加

1.6缩写格式（不推荐）

如果想用的话把注意点都记住
1.在这种缩写格式中有的属性值可以省略sytle可以省略weight可以省略
2.在这种缩写格式中style和weight的位置可以交换
3.在这种缩写格式中有的属性值是不可以省略的size不能省略family不能省略
4.size和family的位置是不能随便乱放的size⼀定要写在family的前⾯, ⽽且size和family必须写在所有属性的最后

1.7文本样式

⽂本装饰的属性

格式:text-decoration: underline;

取值:

underline 下划线

line-through 删除线

overline 上划线

none 什么都没有, 最常⻅的⽤途就是⽤于去掉超链接的下划线

⽂本⽔平对⻬的属性

格式: text-align: right;

取值:

left 左

right 右

center 中

⽂本缩进的属性

格式: text-indent: 2em;

取值:

2em, 其中是em单位, ⼀个em代表缩进⼀个⽂字的宽度

设置或者取消字体改变

⽤于使⽂本显示为全⼤写或全⼩写

text-transform 允许字体改变，⽂本变形

none 防⽌任何改变

uppercase 将⽂本转换为⼤写

lowercase 将⽂本转换为⼩写 capitalize 将所有单词第⼀个字⺟转换为⼤写

full-width 转换为类似于⼀个等宽字体

字体阴影

格式: text-shadow: h-shadow v-shadow blur color;

取值:

none:取消所有阴影

h-shadow :必需。⽔平阴影的位置。允许负值。

v-shadow :必需。垂直阴影的位置。允许负值。

blur:可选。模糊的距离。

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>
        div{
            width: 400px;
            /* 删除线 */
            text-decoration: line-through;
            /*div 上下0 左右自动居中 */
            margin: 0 auto;
            border: 1px solid green;
            /* 文字居中 */
            text-align: center;
            /* 只有一行文字可以使用linheight进行垂直居中 */
            line-height: 100px;
            /* 首行缩进2字符 */
            text-indent: 2em;
            /* 自动将字母转化大写 */
            text-transform: uppercase;
            /* 字体阴影 */
            text-shadow: 10px 10px 1px red;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
    <a href="">百度一下</a>
</body>
</html>

2.列表样式

3.其他样式（重要的）

line-height

设置⽂本的⾏⾼取值为绝对单位或者相对单位

display

显示⽅式的切换

inline ⾏内显示，宽⾼⽆效

block 块级显示，宽⾼有效

inline-block 为了能够让元素既能够不独占⼀⾏, ⼜可以设置宽度和⾼度, 那么就出现了⾏内块级元素，⾏内显示同时宽⾼有效

<!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>
        .div1, .div2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /* 如何将两个div设置在同一行 */
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</html>

none 不显示，不占据屏幕空

flex 伸缩盒布局

visibility

显示与隐藏

hidden 隐藏，占据屏幕空间

visible 显示

隐藏元素的几种方式（面试题）

display：none;

visibility：hidden

她两的区别

none 不显示，不占据屏幕空j间，不会占用标准流空间

hidden 隐藏，占据屏幕空间，会占据标准留空间

<!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>
        .div1, .div2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /* 如何将两个div设置在同一行 */
            /* display: inline-block; */}
       
        .div1{
            display: none;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</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>
        .div1, .div2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /* 如何将两个div设置在同一行 */
            /* display: inline-block; */}
       
        .div1{
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</html>