文章目录 一、字体相关属性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))
参考手册中涵盖的元素属性非常之多，除了常用的元素属性外，其余的并不需要都进行记忆，只需要在需要使用的时候进行查阅资料即可。
一、字体相关属性 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>🏸 代码结果：
完！
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #文章目录一字体相关属性11 #设置字体样式12 #设置字体大小13 #设置字体粗细14 #设置文字样式二文本相关属性21 #设置文本颜色22 #设置文本对齐23
