Web 前端—HTML+CSS系列

這篇具有很好參考價值的文章主要介紹了Web 前端—HTML+CSS系列。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

一、HTML+CSS

1.1什么是HTML、CSS

（1）知識點：是制作網頁的編程語言
瀏覽器把代碼解析后的樣子就是我們看到的網站
一個網站是由很多個網頁組成的
查看網頁代碼源
（2）.html網頁制作
新建一個文件夾——新建記事本——把記事本格式改成demo.html模式——打開方式（打開記事本）——輸入要輸入的內容——拖拽網頁圖標到瀏覽器里

1.2宇宙第一編輯器VS Code

（1）定義
VSCode，全稱visual studio code，來自微軟，是一個開源的、基于electron的輕量代碼編譯器。

（2）基本操作
自動換行：設置：文件->首選項->設置（大小、是否換行Word wrap）
學習編輯器基本使用：
創(chuàng)建文件：點擊右鍵
重命名
刪除
VScode快捷操作：
Ctrl+S：保存
Ctrl+a：全選
Ctrl+x、Ctrl+c、Ctrl+v：剪切、復制、粘貼
Ctrl+z、Ctrl+y：撤銷、前進
shift+end：從頭選中一行
shift+home:從尾部向前選中這一行
shift+alt+↓：快速復制一行
shift+↑或↓：快速移動一行
tab：向后縮進
tab+shift：向前縮進
多光標模式：alt+鼠標左鍵
Ctrl+D：選擇相同元素的下一個

1.3Chrome瀏覽器

Chrome下載地址：google下載地址

1.4、深入了解網站開發(fā)

UI設計師：設計稿
web前端開發(fā)工程師（HS開發(fā)）

設計稿->代碼
數據庫里的數據->顯示到頁面
HTML：負責結構
CSS：負責樣式
web后端開發(fā)工程師

一、HTML基本操作

1.web前端三大核心技術

HTML：結構
CSS：樣式
JavaScript:與用戶的交互行為
示例：

<style>
    div{color:red;font-style:italic;}
</style>

<div>緩緩飄落的楓葉像思念，你燭火惺忪點燃歲末的秋天</div>

<script>

let div=document.qierySelector('div');
let time=null;
let flag=ture;
div.onmouseover=function(){
    timer=setInterval(()=>{
        if(flag){
            div.style.color='blue';                
            div.style.fontstyle='normal';
        }
        else{
            div.style.color='red';
            div.style.fontstyle='italic';
        }
        flag=!flag;
    },500);
 };
div.onmouseout=function(){
    clearInterval(timer);
 };

</script>

2.HTML初始代碼

（1）定義
每一個HTML文件都學要添加初始代碼，初始代碼就是無論你寫什么樣的網頁，這些代碼都是要有的
（2）內容

<!DOCTYPE html>     //文檔聲明：告訴瀏覽器這是一個html文件
<html lang="en">        //html最外層標簽，包裹著所有html標簽代碼  lang= “en”是用英文網站 lang=“zh-CN"表示中文的網站
<head>
    <meta charset="UTF-8">    //元信息：編寫網頁中的一些賦值信息 charset="UTF-8”國際編碼，讓網頁不出現(xiàn)亂碼的情況
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>   // 網頁的標題
</head>
<body>
    //顯示網絡內容的區(qū)域
</body>
</html>

3.HTML注釋

（1）寫法： 在瀏覽器中看不到，只能在代碼中看見
快捷方式添加與刪除注釋：Ctrl+/ （不用選中） shift+alt+a（先選中）
示例：

<body>
    <!-- 注釋的內容-->
</body>

(2)意義
a.暫時不用的代碼注釋起來，方便以后使用
b.對開發(fā)人員進行提示

4.HTML語義化

（1）定義：所謂HTML語義化指的是，根據網頁中內容的結構，選擇合適的HTML標簽進行編寫（什么樣結構采用什么樣的標簽）
（2）標簽的好處：

代碼結構得到了優(yōu)化，即使沒有css，也能呈現(xiàn)出完整、清晰的結構，更加
方便閱讀和理解，同時提高了團隊合作的效率
有利于搜索引擎的優(yōu)化
爬蟲依賴標簽確定關鍵字的權重，可以幫助爬蟲爬出更多有效信息
方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以語義的方式來渲染網頁
（3）常用標簽
< h1>~< h6>標簽：標題標簽，h1等級最高，h6等級最低
header元素：用于定義頁面的介紹展示區(qū)域，通常包括網站logo、主導航、全站鏈接以及搜索框
nav元素：定義頁面的導航鏈接部分區(qū)域
main元素：定義頁面的主要內容，一個頁面只能使用一次。
article元素：定義頁面獨立的內容，它可以有自己的header、footer、sections等
section元素：元素用于標記文檔的各個部分，例如長表單文章的章節(jié)或主要部分
aside元素：一般用于側邊欄
footer元素：文檔的底部信息
small元素：呈現(xiàn)小號字體效果
strong元素：用于強調文本
（4）標簽元素周期表：

5.標題與段落

（1）h標簽：標題
在一個網頁中，h1標題最重要，并且一個.html文件只能出現(xiàn)一次h1文件，但是可以有很多h2、h3

<h1>標題</h1>
<h2>標題</h2>
<h3>標題</h3>
<h4>標題</h4>
<h5>標題 </h5>         
<h6>標題</h6>

圖片： html+css,前端,html,css

（2）p標簽：段落

段落標題

<p>english</p>

6.文本修飾標簽

(1)strong標簽:表示強調，會對文本進行加粗
寫法：

<strong>這是一首簡單的小情歌</strong>

結果：
html+css,前端,html,css

（2）em標簽：表示強調，會對文本進行加粗
寫法：

<em>故事的小黃花</em>

結果：
html+css,前端,html,css

（3）sub：下標文本、 sup：上標文本
寫法：

a<sub>2</sub>+b<sup>2</sup>=c<sub>3</sub>

（4）del：刪除文本、 ins：插入文本（一般配合文本使用的）
寫法：

<ins>插入文本</ins>

結果：
html+css,前端,html,css

7.圖片標簽與圖片屬性

（1）采用標簽img<單標簽>：圖片
scr：引入圖片的地址
alt:當圖片出現(xiàn)問題的時候，可以顯示一段友好的提示文字
title：提示信息
width，height：調節(jié)文件大小
方式：

<img src="" alt="">

示例：

<img src="https://ttpcstatic.dftoutiao.com/ecms/image/20220727/600x447_62e0e760d0bcb.jpeg_.webp" alt="" title="這還是一個圖片的信息  " width="xxx" height="xxx">

8.引入文件的地址路徑

相對路徑：./n
在路徑中表示當前路徑: …/n

<img src="./5648.png" alt="">   //圖片名字

…在路徑中表示上一級路徑(文件+文件)

<img src="./32323/5648.png" alt="">

圖片示例： html+css,前端,html,css
絕對路徑
看真真正正圖片所在的位置

9.跳轉鏈接

鏈接標簽：
標簽：雙標簽、
href屬性：鏈接的地址
示例：

<a href="http://www.baidu.com">訪問百度</a>

target屬性：可以改變鏈接打開的方式，默認情況下：在當前頁面打開新窗口

示例：

<a href="http://www.baidu.com" target="_blank">訪問百度</a>

base標簽：（單標簽）改變標簽的默認行為，寫一個打開許多個窗口
<不寫在body里，寫在head里>
示例：

訪問百度訪問百度訪問百度訪問百度訪問百度

html+css,前端,html,css

10.跳轉錨點

實現(xiàn)一：#號、id屬性
示例


<a href="#html">HTML</a>
<a href="#css">css</a>
<a href="#javascript">Javascript</a>
<h2 id="html">HTML超文本標記語言</h2>
<p>                         </p>
<h2 id="css">CSS層疊樣式表</h2>
<p>      </p>
<h2 id="javascript">Javascript腳本</h2>
<p>    </p>

file:///D:/22210305/10.html#html
實現(xiàn)二：#號、name屬性
示例

<a href="#html">HTML</a>
<a href="#css">css</a>
<a href="#javascript">Javascript</a>
<a name="html"></a>
<h2>HTML超文本標記語言</h2>
<p>                         </p>
<a name="css"></a>
<h2>CSS層疊樣式表</h2>
<p>      </p>
<a name="javascript"></a>
<h2>Javascript腳本</h2>
<p>    </p>

11.特殊符號

在編寫一些文本時，經常會遇到無法輸入的字符，還有往一段文字中加多個空格時，頁面并不會解析出多個空格。這些特殊字符有專門的代碼解決沖突
html+css,前端,html,css

<body>
    <p>
        &lt;dahaoren&gt;
    </p>
</body>

圖片展示（翻譯后）：
html+css,前端,html,css

示例2：

<p>
    
    hello&nbsp;&nbsp;&nbsp;&nbsp;world
    </p>

圖片展示：
html+css,前端,html,css

12.無序列表

ul、li：列表的最外層容器、列表項（ul和li必須是組合出現(xiàn)的，他們之間是不能有其他標簽的）。符合嵌套的規(guī)范
示例：

<ul>
        <li>第一項</li>
        <li>第二項</li>
    </ul>

結果：
html+css,前端,html,css
type屬性：改變前面標記的樣式（一般都是用css去控制）
改變形式

練習：

13.有序列表

ol、li:列表的最外層容器、列表項主要用于排行榜
示例：

<ol>
        <li>第一項</li>
        <li>第二項</li>
    </ol>
    </body>

結果：
html+css,前端,html,css

14.定義列表

列表項需要添加標題和對標題進行描述的內容
dl：定義列表
dt：定義專業(yè)術語或名詞
dd：對名次進行解釋和描述
示例：

<dl>
    <dt>你</dt>
    <dd>是</dd>
   </dl>

結果：
html+css,前端,html,css

15.嵌套列表

列表之間可以互相嵌套，形成多層級列表

<ul>
    <li>
        江蘇省
        <ul>
            <li>南京市</li>
            <li>無錫市</li>
            <li>徐州市</li>
        </ul>
    </li>
    <li>
        山東省
        <ul>
            <li>濟南</li>
            <li>青島</li>
        </ul>   
        </li>
</ul>

成果展示：
html+css,前端,html,css

16.表格標簽

table：表格的最外層容器
tr：定義表格行
th：定義表頭
td：定義表格單元
caption：定義表格標題

以上之間是有嵌套關系的，要符合嵌套規(guī)范

<body>
    <table>
        <tr>
            <th>日期</th>
            <th>天氣情況</th>    
            <th>出行情況</th>
        </tr> 
        <tr>
            <td>2022年1月1日</td>
            <td><img src="./img/tianqi_1.png" alt=""></td>
            <td>天氣晴朗，適合出行</td>
        </tr>   
        <tr>
            <td>2022年1月2日</td>
            <td><img src="./img/tianqi_2.png "alt=""></td>
            <td>有小雨，記得帶傘</td>
        </tr>
    </table>
</body>

語義化標簽：tHead、tBody、tFood
注：在一個table中，tBody是可以多次出現(xiàn)的，但是tHead、tFood只能出現(xiàn)一次

17.表格屬性

border:表格邊框
cellpadding:單元格內的空間
cellspacing:單元格之間的空間
rowspan:合并行
colspan:合并列
align:左右對齊方式
valign:上下對齊方式

18.表單標簽

不需要太多規(guī)范。
from;表單最外層容器
input：標簽用于搜集用戶信息，根據不同的type屬性值，展示不同的控件，如輸入框、密碼框、復選框等（有一個type屬性，決定是什么控件）
還有一些常見的屬性：
checked、disabled、name、for…
html+css,前端,html,css

<body>
    <form>
        <h2>輸入框：</h2>
        <input type="text">
        <h2>密碼框：</h2>
        <input type="password">
    </form>
</body>

成果展示： html+css,前端,html,css

 <form action="http://www.baidu.com"> <!--提交到什么地方-->
        <h2>輸入框：</h2>
        <input type="text" placeholder="請輸入用戶名">
        <h2>密碼框：</h2>

成果展示：
html+css,前端,html,css

復選框

<body>
    <form>
        <h2>輸入框：</h2>
        <input type="text">
        <h2>密碼框：</h2>
        <input type="password">
        <h2>復選框</h2>
        <input type="checkbox">蘋果
        <input type="checkbox">香蕉
        <input type="checkbox">葡萄
    </form>
</body>

成果展示：
html+css,前端,html,css
單選框：

<body>
    <form>
        <h2>單選框</h2>
        <input type="radio" name="任意值">男
        <input type="radio" name="任意值">女
    </form>
</body>

成果展示：
html+css,前端,html,css
上傳文件：

<body>
    <form>
        <h2>上傳文件</h2>
        <input type="file">
    </form>
</body>

成果展示：
html+css,前端,html,css
提交按鈕和重置按鈕：

<body>
    <form>
        
        <h2>提交按鈕和重置按鈕</h2>
        <input type="submit">
        <input type="reset">
    </form>
</body>

成果展示：
html+css,前端,html,css

textarea：多行文本框

<h2>多行文本框</h2>
        <textarea cols="30" rows="10"></textarea>

成果展示：
html+css,前端,html,css

<h2>下拉菜單</h2>
       <select size="3"><!--自動出現(xiàn)幾個選項-->
        <!--把size換成multpie就是第二個下拉菜單（另起一個select）-->
            <option selected disabled>請選擇</option><!--disabled的意思是這個選項不能選-->
            <option>北京</option>
            <option>上海</option>
            <option >徐州</option><!--selected是指將它設為默認選項-->
        </select> 
        <input type="radio" name="任意值" id="man"><label for="mam">男</label>
        <input type="radio" name="任意值" id="woman"><label for="woman">女</label><!--id與for后面是相應的，在這里是sex-->

成果展示：
html+css,前端,html,css

19.表格表單組合

表格表單之間可以互相組合形成數據展示效果

<body>
    <form action="">
        <table border="1" cellpadding="30 ">
            <tbody>
              <tr align="center">
                 <td rowspan="4">總體信息</td>
                 <td colspan="2">用戶注冊</td>
             </tr>
             <tr align="right">
                 <td>用戶名：</td>
                 <td><input type="text" placehodler="請輸入用戶名"></td>
             </tr>
             <tr align="right">
                 <td>密碼：</td>
                 <td><input type="password" placeholder="請輸入密碼"></td>
             </tr>
             <tr align="center">
                 <td colspan="2">
                     <input type="submit">
                     <input type="reset">
                </td>
            </tbody>        
        </table>
    </form>
</body>

成果展示：
html+css,前端,html,css

20.div與span

div（塊）：
div全稱division，“分割、分區(qū)”的意思，div標簽用來劃分一個區(qū)域，相當于一塊區(qū)域容器，可以容納段落、標題、表格、圖像等各種網頁元素。即HTML中大多數的標簽都可以嵌套在div標簽中，div中還可以嵌套多層div，用來將網頁分割成獨立的、不同的部分，來實現(xiàn)網頁的規(guī)劃和布局
span（內聯(lián)）：用來修飾文字的，div與span都是沒有任何默認樣式的。需要配合css才行

<body>
    <div>
        <h2><a href="#"><span style="color:red">知乎</span> - 有問題，就會有答案 </a></h2>
        <a href="#"><img src="" alt></a>
        <p>知乎，中文互聯(lián)網高質量的問答社區(qū)和創(chuàng)作者聚集的原創(chuàng)內容平臺，于 2011 年 1 月正式上線，以「讓人們更好的分享知識、經驗和見解，找到自己的解答」為品牌使命。知乎憑借認真、專業(yè) </p>
        <a href="#">https://www.zhihu.com</a>
    </div>
</body>

成果展示：
html+css,前端,html,css

二、CSS基本語法

格式：
選擇器{屬性1：值1；屬性二：值2}
單位：
px->像素（pixel）、%->百分比
基本樣式：
width、height、background-color
CSS注釋：
/css注釋內容/

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{width:100px;height:100px; background-color:red}
    </style>
 </head>
 <body>
    <div>這是一首簡單的小情歌</div>
 </body>   
</html>

成果展示： html+css,前端,html,css

1.內聯(lián)樣式與內部樣式（css樣式的引入方式）

內聯(lián)（行內、行間）樣式：
在html標簽上添加style屬性來實現(xiàn)的

<style>
        div{width:50%；height:50px; background-color:red}
    </style>
 </head>
 <body>
    <div>這是一首簡單的小情歌</div>
 </body>

內部樣式
在

<div style="width:100px;height:100px;background-color:blueviolet">妹妹說紫色很有韻味</div>
<div style="width:50px;height:50px;background-color:blue">董</div>
<div style="width:50px;height:50px;background-color:red">雙</div>
<div style="width:50px;height:50px;background-color:green">玉</div>
<!--另起一個板-->

區(qū)別：內部樣式的代碼可以復用、復合w3c的規(guī)范標準，進行讓結構和樣式分開處理

2.外部樣式

引入一個單獨的css文件，name，css
link標簽：引入外部資源
rel屬性：指定資源跟頁面的關系（當前文檔與被鏈接的關系）
href屬性：資源的地址
@import：通過這種方式引入外部樣式（不建議，問題很多）
html+css,前端,html,css

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,inital-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!--<link rel="stylesheet" href="./common.css">-->
        <title>Document</title>
        <style>
            @import url('./common.css');
        </style>
    </head>
<body>
    <div>董雙玉頭頂的顏色就是這塊的背景色
    </div>
</body>
</html>
<!--制作鏈接：將文件模式改為。css模式-->

成果展示
html+css,前端,html,css

3.css中的顏色表示法

1.單詞表示法：red、green等
顏色的英文代碼：
html+css,前端,html,css

2.十六進制表示法：
0 1 2 3 4 5 6 7 8 9 a b c d e f

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{ background-color:#000000}
    </style>
 </head>
 <body>
    <div>這是一首簡單的小情歌</div>
 </body>   
</html>

成果展示：
html+css,前端,html,css

3.rgb三原色表示法：rgb(255,255,255)
取值范圍：0~255
提取顏色的下載地址：https：//www.daidufe.com/fehelper
photoshop

4.背景樣式

1.background-color:背景顏色
2.background-image:背景圖片
【url背景地址】
默認：會水平垂直都鋪滿背景圖
3.background-repeat:背景圖片的平鋪方式
repeat-x：x軸平鋪
repeat-y：y軸平鋪
repeat（x,y都進行平鋪，默認值）
no-repeat:都不平鋪
4.background-position:背景圖片的位置
x y:number （px、%）單詞
x:left、center、right
y：top、center、bottom
5.background-attachment:背景圖片隨滾動條的移動方式
scroll：默認值（背景位置是按照當前元素進行偏移的）
fixed：（背景位置是按照瀏覽器進行偏移的）

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{ width：3000px；height：3000px； background-color:red; 
            background-image:url(./img/256.jpg);/*圖片位置*/
            background-repeat:no-repeat ;
            background-position:right center;  
            background-attachment: scroll   /*fixed*/
        }
    </style>
 </head>
 <body>
    <div></div>
 </body>   
</html>

5.背景實現(xiàn)視覺差

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{width:1400px;height:800px;background-image:url(./img/1.jpg);background-attachment: fixed;}
        div{width:1400px;height:800px;background-image:url(./img/2.jpg);background-attachment: fixed;}
        div{width:1400px;height:800px;background-image:url(./img/3.jpg);background-attachment: fixed;}
    </style>
 </head>
 <body>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div1"></div>
</body>   
</html>

6.邊框樣式

border-style:邊框的樣式
solid：實線
dashed：虛線
dotted：點線
html+css,前端,html,css

border-width:邊框的大小（px…）
border-color:邊框的顏色(red，#…)
注：針對某一條邊進行單獨設置
（圓角邊框）
html+css,前端,html,css

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      div{width:300px;height:300px;border-/*right- 上下左右針對某一條邊進行設置，放在中間*/style:dashed;border-color:red;
    border-width:10px;}

    </style>
 </head>
 <body>
    <div></div>
</body>   
</html>

成果展示： html+css,前端,html,css
練習.利用邊框實線三角形
邊框加顏色：

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      div{width:300px;height:300px;
        border-top-style:solid;
        border-top-color:green;
        border-top-width:100px;
        border-bottom-style:solid;
        border-bottom-color:red;
        border-bottom-width:100px;
        border-left-style:solid;
        border-left-color:blueviolet;
        border-left-width:100px;
        border-right-style:solid;
        border-right-color:yellow;
        border-right-width:100px;
        
    }

    </style>
 </head>
 <body>
    <div></div>
</body>   
</html>

成果展示：
html+css,前端,html,css
三角形：
方法一：（將width與height設置為0，在講其他方塊顏色設置為背景色/不是白色，是與背景圖相同的顏色/）
方法二：將每個方塊顏色設置為透明色（transparent）

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      div{width:0px;height:0px;
        border-top-style:solid;
        border-top-color:transparent;
        border-top-width:100px;
        border-bottom-style:solid;
        border-bottom-color:transparent;
        border-bottom-width:100px;
        border-left-style:solid;
        border-left-color:transparent;
        border-left-width:100px;
        border-right-style:solid;
        border-right-color:black;
        border-right-width:100px;
        
    }

    </style>
 </head>
 <body>
    <div></div>
</body>   
</html>

成果展示：
html+css,前端,html,css

7.文字樣式

1.字體類型：font-family
英文、中文
襯線體與非襯線體：
區(qū)別：帶襯線有棱角，非襯線體比較圓滑
注：設置多字體的方式
如果設置的字體中有空格要帶上單引號
html+css,前端,html,css

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      div{font-family：Microsoft Yahei;}
    </style>
 </head>
 <body>
    <div>心中有黨，成績理想</div>
</body>   
</html>

成果展示：
html+css,前端,html,css

2.字體大?。篺ont-size（16px默認像素）
第一種：輸入像素數字大?。?0px）
第二種：有英文形式：
html+css,前端,html,css

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{font-size: 50px;}

    </style>
 </head>
 <body>
    <div>我懷念的是無話不說</div>
 </body>   
</html>

成果展示：
html+css,前端,html,css
3.字體粗細：font-weight
模式：正常（normal）、加粗（bold）
寫法：單詞（normal、bold）/number（100 200…500都是正常的，600…900都是加粗的）/
4.字體樣式：font-style
模式：正常（默認）、斜體（italic）
/*oblique也是表示斜體，用的比較少，一般了解即可，沒什么差別 */
區(qū)別：（1.）italic：帶有屬性傾斜字體的才可以設置傾斜操作。
（2.）oblique：沒有傾斜屬性的字體也可以設置傾斜操作

8.css段落樣式——文本修飾

text-decoration：文本修飾
下劃線:underline
刪除線:line-through
上劃線:overline

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      p{width:300px;text-decoration: line-through;/*添加多個修飾中間直接用空格隔開*/}  
    </style>
 </head>
 <body>
    <p>每個優(yōu)秀的人的心中都有一段沉默的時光，那段時光是付出了很多努力，卻得不到結果的日子，我們把它叫做扎根</p>
 </body>   
</html>

成果展示
html+css,前端,html,css

9.css段落樣式——文本大小寫

text-transform：文本大小寫（針對英文段落）
小寫：lowercase
大寫：uppercase
只針對首字母：capitalize

10. css段落樣式——文本縮進

text-indent：文本縮進（一個文字16px——對齊）
首行縮進的效果
em相對單位：相對單位，1em永遠與字體大小相同
對齊方式：left、right、center、justify（兩端點對齊）

 p{ text-align：left: ;}/*調節(jié)左右對齊*/

11.css段落樣式——定義行高

line-height：
定義：一行文字的高度
默認：不是固定值，而是變化的。根據當前字體大小在不斷的變化。
取值：1.number（px）|scale（比例值，跟文字大小成比例的）

p{ line-height:30px ;}

12.css段落樣式——字間距與詞間距

1.letter-spacing：定義字間距
2.Word-spacing：詞之間的間距（針對英文段落）
3.強制折行：（針對英文、數字不自動折行）
（1.）word-break:break-all；（非常強烈的折行）
（2.）word-wrap：break-word；（不是那么強烈的折行，會產生空白區(qū)域）

13.css復合樣式

一個css屬性只控制一種樣式，叫做單一樣式
一個css屬性控制多種樣式，叫做復合樣式（background、border、font）
復合的寫法：是通過空格的方式實現(xiàn)的。復合寫法有的是不需要關心順序，例如background、border；有的是需要關心順序，例如font
html+css,前端,html,css