CSS美化網(wǎng)頁

、字體樣式

font-family：設(shè)置字體類型，可以同時(shí)聲明多種字體，字體之間用英文逗號(hào)分隔開；
font-size：設(shè)置字體大小，常用單位為px，還有其他如in、cm、mm、pt、pc等單位；
font-style：設(shè)置字體風(fēng)格，有三個(gè)屬性值，分別是normal(標(biāo)準(zhǔn)字體樣式)、italic(斜體字體樣式)、oblique(傾斜字體樣式)；
font-weight：設(shè)置字體粗細(xì)，屬性值有normal(默認(rèn))、bold(粗體)、bolder(更粗)、lighter(更細(xì))，還可以用100到900定義由細(xì)到粗的字體，400等同于normal，700等同于bold；
font：設(shè)置字體多種屬性，可以同時(shí)設(shè)置；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</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">這是第一行(樣式為：標(biāo)簽選擇器p中的樣式)</p>
 <p class="p2">這是第二行(樣式為：斜體)</p>
 <p class="p3">這是第三行(樣式為：加粗)</p>
 <p class="p4">這是第四行(樣式為：字體變成微軟雅黑)</p>
 <p class="p5">這是第五行(樣式為：字體大小為36px)</p>
</body>
</html>

效果演示圖如下所示：

1.png

二、使用CSS排版網(wǎng)頁文本

color：設(shè)置文本顏色，統(tǒng)一采用RGB格式，也就是“紅綠藍(lán)”三原色模式；
text-align：設(shè)置元素水平對(duì)齊方式，屬性值有l(wèi)eft(左對(duì)齊，默認(rèn))、right(右對(duì)齊)、center(中間對(duì)齊)、justify(兩端對(duì)齊)；
line-height：設(shè)置文本行高，單位也是px，也可以不加單位，按倍數(shù)表示；
text-indent：設(shè)置文本的首行縮進(jìn)，單位是em或者px，em是相對(duì)單位，表示長度相當(dāng)于文本中字符的倍數(shù)，可以根據(jù)字體大小自適應(yīng)改變；
text-decoration：設(shè)置文本的裝飾，屬性值有none(默認(rèn)值)、underline(下劃線)、overline(上劃線)、line-through(刪除線)；
vertical-align：垂直對(duì)齊，屬性值有top、middle、bottom；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</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">這是第四行(樣式為：縮進(jìn)2em)</p>
 <p class="p5">這是第五行(樣式為：刪除線)</p>
 <div class="div2">
 <img src="tu24.png" alt="" class="img1">這是第六行(樣式為：垂直居中)
 </div>
 
 </div>
</body>
</html>

演示效果如圖所示：

2.png

三、cursor設(shè)置鼠標(biāo)形狀

cursor屬性可以用來設(shè)置鼠標(biāo)指針樣式；
default：默認(rèn)光標(biāo)，箭頭；
pointer：超鏈接的指針，手型；
wait：指示程序正在忙；
help：指示可用的幫助；
text：指示文本；
crosshair：鼠標(biāo)呈現(xiàn)十字狀；

四、背景樣式

background-color：背景顏色；
background-image：背景圖像；
background-repeat：背景平鋪，屬性值有repeat(沿水平和垂直方向平鋪)、no-repeat(不平鋪)、repeat-x(沿水平方向平鋪)、repeat-y(沿水質(zhì)方向平鋪)；
background-position：設(shè)置圖像在背景中的位置；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</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：設(shè)置列表項(xiàng)標(biāo)記的類型，屬性值有none(無標(biāo)記符號(hào))、disc(實(shí)心圓，默認(rèn)類型)、circle(空心圓)、square(實(shí)心正方形)、decimal(數(shù)字)；
list-style-image：使用圖片替換列表的標(biāo)記項(xiàng)；
list-style-position：設(shè)置在何處防止列表標(biāo)記項(xiàng)，屬性值有inside(放在文本以內(nèi))、outside(放在文本左側(cè))；
list-style：簡寫屬性，可以設(shè)置所有列表屬性；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</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>第一隊(duì)</li>
 <li>第一隊(duì)</li>
 <li>第一隊(duì)</li>
 </ul>
 <ul class="ul2">
 <li>第二隊(duì)</li>
 <li>第二隊(duì)</li>
 <li>第二隊(duì)</li>
 </ul>
 <ul class="ul3">
 <li>第三隊(duì)</li>
 <li>第三隊(duì)</li>
 <li>第三隊(duì)</li>
 </ul>
 </div>
</body>
</html>

演示效果圖為：

4.png

內(nèi)容首發(fā)于工粽號(hào)：程序員大澈，每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注和投稿！

大家好，我是大澈！

本文約 500+ 字，整篇閱讀約需 1 分鐘。

今天分享一段優(yōu)質(zhì) CSS 代碼片段，可以輕松實(shí)現(xiàn)元素垂直水平居中對(duì)齊。

老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評(píng)論區(qū)留下你的見解！

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

分享原因

這段代碼展示了如何使用 CSS Grid 布局以及 place-content 屬性來居中對(duì)齊元素。

CSS Grid 是一種強(qiáng)大的布局工具，提供了簡單且靈活的方式來實(shí)現(xiàn)復(fù)雜的布局，而place-content 屬性進(jìn)一步簡化了居中對(duì)齊的實(shí)現(xiàn)。

相較于 Flex 布局，Grid 布局僅僅只需一行代碼即可搞定居中對(duì)齊！

代碼解析

1. display: grid;

設(shè)置元素為網(wǎng)格容器。

網(wǎng)格容器可以通過定義網(wǎng)格行和列來布置其子元素。

2. place-content: center;

place-content 是 align-content 和 justify-content 的組合屬性。

center 值表示內(nèi)容在容器的中央對(duì)齊。

3. 兼容性

place-content: center; 的兼容性在現(xiàn)代瀏覽器中較好，某一些舊版瀏覽器的不兼容完全可以忽略了。

以下是一些常見瀏覽器的具體支持情況：

個(gè)字和4個(gè)字如果想對(duì)齊，很多人會(huì)用 (空格)去調(diào)整；

今天我告訴大家一個(gè)好方法：

一：前提是需要給這個(gè)標(biāo)簽寬度

二：text-align:justify;text-align-last:justify; 在所用的標(biāo)簽的css里加上這幾個(gè)屬性，就ok了

這里我用的是p標(biāo)簽

最后的效果圖

在線咨詢

上一篇：什么是HTM或HTML文件？如何打開HTM和HTML文件？
下一篇：HTML 編輯器

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。