快速拿捏CSS中的常用的元素属性

最新推荐文章于 2024-05-20 22:08:52 发布

富春山居_ZYY(已黑化)

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量481

点赞数 36

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

本文链接：https://blog.csdn.net/weixin_46103589/article/details/123137206

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

CSS中的元素属性多且杂，想要熟练掌握CSS，常用的元素属性需要进行牢记，多多加以应用，熟能生巧

(CSS 参考手册 (w3school.com.cn))

参考手册中涵盖的元素属性非常之多，除了常用的元素属性外，其余的并不需要都进行记忆，只需要在需要使用的时候进行查阅资料即可。

一、字体相关属性

1.1 设置字体样式

设置字体样式的属性名为font-family

设置字体样式的方式可以是中文，也可以是英文（一般来说用英文较多）,且最好是比较常见的字体
如果英文字体中有空格的出现需要用引号将字体名包裹
可以设置多个字体，用逗号将字体分隔开，如果从前向后找字体都以失败告终，将会使用默认的字体

📑代码示例：

<body>
    <style>
        .one {
            font-family: '方正粗黑宋简体';
        }
        .two {
            font-family: 'Microsoft YaHei';
        }
    </style>
    <div class="one">字体样式</div>
    <div class="two">字体样式</div>
</body>

🏸 代码结果：

在这里插入图片描述

1.2 设置字体大小

设置字体大小的属性名为font-size

字体大小的设置方式可以使用以px为单位的字号，也可以是small,medium,large等之类的设置大小形式，但由于不同的浏览器对后者的大小设置可能存在不同，所以推荐前一种设置方法
浏览器中实际看见的大小不一定和设置字体大小一模一样，因为在电脑的设置中的缩放与布局中或则其他的设置中可能存在放大，导致实际的字符字形要比设置的略大

📑代码示例：

<body>
    <style>
        .one {
            font-size: 15px;
        }
        .two {
            font-size: larger;
        }
    </style>
    <div class="one">字体大小</div>
    <div class="two">字体大小</div>
</body>

🏸 代码结果：

在这里插入图片描述

1.3 设置字体粗细

设置字体粗细的属性名为font-weight

可以用100到900的数字（100,200,300…,800,900）来表示粗细，数字越大越粗
可以用bold,bolder,lighter,normal这样的单词来表示，其中normal和400的粗细效果一样（不变粗），bold和700的粗细效果一样

📑代码示例：

<body>
    <style>
        .one {
            font-weight:200;
        }
        .two {
            font-weight:bolder;
        }
    </style>
    <div class="one">字体粗细</div>
    <div class="two">字体粗细</div>
</body>

🏸 代码结果：

在这里插入图片描述

1.4 设置文字样式

设置文字样式的属性名为font-style

文字样式指的是将文字变斜与否
italic表示变斜，normal表示取消倾斜（后者用的频率会更高）

📑代码示例：

<body>
    <style>
        .one em {
            font-style: normal;
        }
        .two {
            font-style: italic;
        }
    </style>
    <div class="one">
        <em>
            字体样式
        </em> 
    </div>
    <div class="two">字体样式</div>
</body>

🏸 代码结果：

在这里插入图片描述

二、文本相关属性

2.1 设置文本颜色

设置文本颜色的属性名为color

文本颜色的设置方法有三种：

选取颜色的英文单词
rgb形式（R (red), G (green), B (blue) ）。计算机中的一个分量用8个比特位表示（0~255）值越大，表示该分量的颜色越重，当鼠标停在vscode的颜色上时，就会出现颜色选择器，然后就可以手动的选择颜色
十六进制的形式。用6位十六进制来表示颜色，前面需要加上#，如果这6位16进制是#AABBCC形式，可以缩写成#ABC

📑代码示例：

<body>
    <style>
        .one {
            color: red;
        }
        .two {
            color: rgb(255,165,0);
        }
        .three {
            color: #ddff11;
            /*同color: #df1*/
        }
    </style>
    <div class="one">文本颜色</div>
    <div class="two">文本颜色</div>
    <div class="three">文本颜色</div>
</body>

🏸 代码结果：

在这里插入图片描述

2.2 设置文本对齐

设置文本对齐的属性名为text-align

该属性不仅仅可以设置文本对齐，图片元素之类的也可以实现对齐

居中对齐：center
左对齐：left
右对齐：right

📑代码示例：

<body>
    <style>
        .one {
            text-align: left;
        }
        .two {
            text-align: right;
        }
        .three {
            text-align: center;
        }
    </style>
    <div class="one">文本左对齐</div>
    <div class="two">文本右对齐</div>
    <div class="three">文本居中对齐</div>
</body>

🏸 代码结果：

在这里插入图片描述

2.3 设置文本装饰

设置文本装饰的属性名为text-decoration

下划线：underline
上划线：overline
删除线：line-through
取消文本装饰：none

📑代码示例：

<body>
    <style>
        div .one {
            text-decoration: overline;
        }
        div .two {
            text-decoration: underline;
        }
        div .three {
            text-decoration: line-through;
        }
        div a {
            text-decoration: none;
        }
    </style>
    <div>
        <span class="one">上划线</span>
        <span class="two">下划线</span>
        <span class="three">删除线</span>
        <a href="#">这是链接</a>
    </div>
</body>

🏸 代码结果：

在这里插入图片描述

2.4 设置文本缩进

设置文本缩进的属性名为text-indent

在浏览器的段落文本如果没有设置过文本缩进，都会顶格排列

可以以em为单位控制首行的缩进，2em就是当前元素的两个文字的大小
可以以px为单位来控制首行的缩进
缩进如果是负数，表示向左缩进，文字就会向左冒出去

📑代码示例：

<body>
    <style>
        p {
            text-indent: 2em;
            /*text-indent: -2em;
            text-indent: 15px;*/
        }
    </style>
    <p>冬天！</p>
    <p>一片雪花+一串串爆竹声=一个喜庆的季节。</p>
    <p>雪花最终还是覆盖大地，而脚印最终还是布满大地。一串爆竹声过后，地上只能看见一片红色，接着传来酒杯相碰的声音，大家互相问候，交谈嬉戏着……冬天的太阳温暖柔和，冬天的万木养精蓄锐，冬天的人们整装待发。在这喜庆节日里，冬天在每个人耳侧说：“春天快来了！”语毕，他化作十二声悦耳的钟声。</p>
</body>

🏸 代码结果：

在这里插入图片描述

2.5 设置行高

设置行高的属性名为line-height

行高大小为上下边距和字体大小的和
当line-height的值和height的值相等，可以实现文字的居中对齐
行高也可以取normal等值

📑代码示例：

<body>
    <style>
        .one {
            line-height: 50px;
            font-size: 15px;
		}
    </style>
    <div class="one">设置行高</div>
</body>

🏸 代码结果：

在这里插入图片描述

三、背景相关属性

3.1 设置背景颜色

设置背景颜色的属性名为background-color

设置颜色的方式和设置文本颜色的方法差不多
可以用rgba的方式来设置颜色和透明度，前三个参数和rgb设置方式相同，最后一个参数为透明度，可以为小数形式，也可以是百分比形式
设置背景透明：transparent

📑代码示例：

<body>
    <style>
        .one {
            background-color:red;
        }
        .two {
            background-color: #00f;
        }
        .three {
            background-color: rgba(0,255,0,0.25);
        }
    </style>
    <div class="one">红色背景</div>
    <div class="two"> 蓝色背景</div>
    <div class="three">绿色略透</div>
</body>

🏸 代码结果：

在这里插入图片描述

3.2 设置背景图片

设置背景图片的元素名为background-image

和图片元素相比更加的灵活
url中写的是图片的绝对路径或相对路径

📑代码示例：

<body>
    <style>    
        div {
            width: 750px;
            height: 350px;
            background-image: url(img/学习.jpg);
        }
    </style>
    <div></div>
</body>

🏸 代码结果：

在这里插入图片描述

3.3 设置背景平铺

设置背景平铺的属性名为background-repeat

可以发现在上面进行背景图片设置时，当图片的大小小于元素的大小时，就会向右向下铺满图片，因此需要该属性进行设置

平铺：repeat（默认）
不平铺：no-repeat
水平平铺：repeat-x
垂直平铺：repeat-y

当背景颜色和背景图片同时存在时，背景图片在背景颜色上面

📑代码示例：

<body>
    <style>    
        div {
            width: 750px;
            height: 350px;
            background-image: url(img/学习.jpg);
            background-repeat: no-repeat;
            /*background-repeat: repeat-x;
            background-repeat: repeat-y;*/
        }
    </style>
    <div></div>
</body>

🏸 代码结果：

在这里插入图片描述

3.4 设置背景位置

设置背景位置的属性名为background-position

参数使用方位词。（top，bottom，left，right，center）
以左上角为原点进行坐标或者百分比的设置
以上两种方法混合使用

📑代码示例：

background-position: right bottom;
background-position: center;
background-position: 100px 80px;
background-position: right 100px;

注意：

若参数值都为方位词，前后顺序就不重要了，左上和上左效果相同
当方位词只有一个时，那么另一个就默认居中。（left和left center效果相同）
若参数为数值时，有两个参数，那么第一个参数为x方向，第二个参数为y方向，只有一个参数时，默认为x方向，那么y方向默认为居中
方位词和精确数值混合使用的时候，第一个值为x方向，第二个值为y方向

3.5 设置背景尺寸

设置背景尺寸的属性名为background-size

可以填具体数值
可以填百分比，按照父类的百分比进行设置
也可以填cover或者contain。cover会将想方设法的将背景图像完全覆盖住，可能图片会显示不完全；contain只会在保证图片显示完整的情况下将图片尽可能的放大

📑代码示例：

<body>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-image: url(img/学习.jpg);
            background-repeat:no-repeat;
            background-size: cover;
            /* background-size: contain;*/
            background-position: center;
            background-color:green;
        }
    </style>
    <div></div>
</body>

🏸 代码结果：

在这里插入图片描述

四、有关圆角矩形

对边框进行设置使其带有圆角效果，属性名为border-radius

参数形式可以是具体的数值也可以是百分数。（如果是百分数的话代表的是元素宽度的占的百分比，例如50%大小为宽度的一半）
参数为角的内切圆的半径的大小，越大，弧线越明显
参数值为元素高的一半时，效果为圆角矩形
参数值为元素高的一半时且高和宽相等，效果是圆
可以对矩形的四个角分别进行设置。

📑代码示例：

<body>
    <style>
        div {
            width: 200px;
            height: 80px;
            border: 5px solid gold;
            /*参数一：边框的宽度
              参数二：线的形式solid是实线
              参数三：线的颜色*/
            border-radius: 30px;
        }
    </style>
    <div></div>
</body>

🏸 代码结果：

在这里插入图片描述
完！

富春山居_ZYY(已黑化)

关注

36
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
31
评论
快速拿捏CSS中的常用的元素属性

文章目录一、字体相关属性1.1 设置字体样式1.2 设置字体大小1.3 设置字体粗细1.4 设置文字样式二、文本相关属性2.1 设置文本颜色2.2 设置文本对齐2.3 设置文本装饰2.4 设置文本缩进2.5 设置行高三、背景相关属性3.1 设置背景颜色3.2 设置背景图片3.3 设置背景平铺3.4 设置背景位置3.5 设置背景尺寸四、有关圆角矩形CSS中的元素属性多且杂，想要熟练掌握CSS，常用的元素属性需要进行牢记，多多加以应用，熟能生巧(CSS 参考手册 (w3school.com.cn))参考手
复制链接

扫一扫