CSS美化网页

、字体样式

font-family：设置字体类型，可以同时声明多种字体，字体之间用英文逗号分隔开；
font-size：设置字体大小，常用单位为px，还有其他如in、cm、mm、pt、pc等单位；
font-style：设置字体风格，有三个属性值，分别是normal(标准字体样式)、italic(斜体字体样式)、oblique(倾斜字体样式)；
font-weight：设置字体粗细，属性值有normal(默认)、bold(粗体)、bolder(更粗)、lighter(更细)，还可以用100到900定义由细到粗的字体，400等同于normal，700等同于bold；
font：设置字体多种属性，可以同时设置；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
 p{
 font-family:"宋体";
 font-size:14px;
 }
 .p2{
 font-style:italic;
 }
 .p3{
 font-weight:bold;
 }
 .p4{
 font-family:"微软雅黑";
 }
 .p5{
 font-size:36px;
 }
 
</style>
</head>
<body>
 <p class="p1">这是第一行(样式为：标签选择器p中的样式)</p>
 <p class="p2">这是第二行(样式为：斜体)</p>
 <p class="p3">这是第三行(样式为：加粗)</p>
 <p class="p4">这是第四行(样式为：字体变成微软雅黑)</p>
 <p class="p5">这是第五行(样式为：字体大小为36px)</p>
</body>
</html>

效果演示图如下所示：

1.png

二、使用CSS排版网页文本

color：设置文本颜色，统一采用RGB格式，也就是“红绿蓝”三原色模式；
text-align：设置元素水平对齐方式，属性值有left(左对齐，默认)、right(右对齐)、center(中间对齐)、justify(两端对齐)；
line-height：设置文本行高，单位也是px，也可以不加单位，按倍数表示；
text-indent：设置文本的首行缩进，单位是em或者px，em是相对单位，表示长度相当于文本中字符的倍数，可以根据字体大小自适应改变；
text-decoration：设置文本的装饰，属性值有none(默认值)、underline(下划线)、overline(上划线)、line-through(删除线)；
vertical-align：垂直对齐，属性值有top、middle、bottom；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.div1{
 width:500px;
 border:1px solid #000;
 padding:20px; 
 }
.p1{
 color:red;
 } 
.p2{
 text-align:center;
 } 
.p3{
 line-height:50px;
 }
.p4{
 text-indent:2em;
 }
.p5{
 text-decoration:line-through;
 }
.div2{
 border:1px solid red;
 padding:20px;
 }
![18.png](https://upload-images.jianshu.io/upload_images/3260639-668445cd70292382.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
.img1{
 width:70px;
 height:70px;
 vertical-align:middle;
 } 
 
</style>
</head>
<body>
 <div class="div1">
 <p class="p1">这是第一行(样式为: 字体红色)</p>
 <p class="p2">这是第二行(样式为：居中)</p>
 <p class="p3">这是第三行(样式为：行高50px)</p>
 <p class="p4">这是第四行(样式为：缩进2em)</p>
 <p class="p5">这是第五行(样式为：删除线)</p>
 <div class="div2">
 <img src="tu24.png" alt="" class="img1">这是第六行(样式为：垂直居中)
 </div>
 
 </div>
</body>
</html>

演示效果如图所示：

2.png

三、cursor设置鼠标形状

cursor属性可以用来设置鼠标指针样式；
default：默认光标，箭头；
pointer：超链接的指针，手型；
wait：指示程序正在忙；
help：指示可用的帮助；
text：指示文本；
crosshair：鼠标呈现十字状；

四、背景样式

background-color：背景颜色；
background-image：背景图像；
background-repeat：背景平铺，属性值有repeat(沿水平和垂直方向平铺)、no-repeat(不平铺)、repeat-x(沿水平方向平铺)、repeat-y(沿水质方向平铺)；
background-position：设置图像在背景中的位置；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.div1{
 width:500px;
 height:500px;
 background-color:#F1CCE8; //背景颜色
 }
.div2{
 width:100%;
 height:100%;
 background-image:url(tu24.png); // 插入背景图片
 background-repeat:no-repeat; //图片不平铺
 background-position:center center; //背景图片垂直水平居中
 }
</style>
</head>
<body>
 <div class="div1">
 <div class="div2">
 </div>
 </div>
</body>
</html>

演示效果图：

3.png

五、列表样式

list-style-type：设置列表项标记的类型，属性值有none(无标记符号)、disc(实心圆，默认类型)、circle(空心圆)、square(实心正方形)、decimal(数字)；
list-style-image：使用图片替换列表的标记项；
list-style-position：设置在何处防止列表标记项，属性值有inside(放在文本以内)、outside(放在文本左侧)；
list-style：简写属性，可以设置所有列表属性；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.div1{
 width:300px;
 height:300px;
 background-color:#F1CCE8;
 padding:20px;
 }
.ul1{
 }
.ul2{
 list-style-type:none;
 }
.ul3{
 list-style-image:url(person02.png);
 list-style-position:outside;
 
 } 
</style>
</head>
<body>
 <div class="div1">
 <ul class="ul1">
 <li>第一队</li>
 <li>第一队</li>
 <li>第一队</li>
 </ul>
 <ul class="ul2">
 <li>第二队</li>
 <li>第二队</li>
 <li>第二队</li>
 </ul>
 <ul class="ul3">
 <li>第三队</li>
 <li>第三队</li>
 <li>第三队</li>
 </ul>
 </div>
</body>
</html>

演示效果图为：

4.png

内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 500+ 字，整篇阅读约需 1 分钟。

今天分享一段优质 CSS 代码片段，可以轻松实现元素垂直水平居中对齐。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

div {
  display: grid;
  place-content: center;
}

分享原因

这段代码展示了如何使用 CSS Grid 布局以及 place-content 属性来居中对齐元素。

CSS Grid 是一种强大的布局工具，提供了简单且灵活的方式来实现复杂的布局，而place-content 属性进一步简化了居中对齐的实现。

相较于 Flex 布局，Grid 布局仅仅只需一行代码即可搞定居中对齐！

代码解析

1. display: grid;

设置元素为网格容器。

网格容器可以通过定义网格行和列来布置其子元素。

2. place-content: center;

place-content 是 align-content 和 justify-content 的组合属性。

center 值表示内容在容器的中央对齐。

3. 兼容性

place-content: center; 的兼容性在现代浏览器中较好，某一些旧版浏览器的不兼容完全可以忽略了。

以下是一些常见浏览器的具体支持情况：

个字和4个字如果想对齐，很多人会用 (空格)去调整；

今天我告诉大家一个好方法：

一：前提是需要给这个标签宽度

二：text-align:justify;text-align-last:justify; 在所用的标签的css里加上这几个属性，就ok了

这里我用的是p标签

最后的效果图

在线咨询

上一篇：什么是HTM或HTML文件？如何打开HTM和HTML文件？
下一篇：HTML 编辑器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。