整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
兩篇文章介紹了創建html文件及常用的標簽，今天我們來了解一下常用的樣式屬性。
廢話不多說，跟著橙先生學起來吧！記得要動手操作試試看哦，不能只是看看，當時記住了，也許實際操作時還是不會。
像你家的房間都有大小、功能之分，標簽的樣式也是同樣的。
這里我不講行內樣式、內部樣式和外部樣式的區別
直接用行內樣式做演示，這樣比較清楚，待進一步學習后再了解也不遲！
只是書寫的方式不同罷了，樣式還是那些樣式！
我們直接用最具代表性的div標簽來做介紹
<div style="width: 300px; height: 300px;">這是一個div標簽</div>
如上，我們直接在div標簽中添加樣式，書寫形式style=""
所有樣式都寫在引號中，屬性加冒號加值并以分號結束（如width: 300px;）
以下面的實例來一一介紹
<div
style="
width: 300px;
height: 300px;
border: 5px solid #000000;
background-color: #ffa500;
color: #0000ff;
font-size: 20px;
text-align: center;
font-weight: 700;
line-height: 300px;
">
這是是一個div標簽,以下是橙先生為你做的各個屬性介紹
</div>
樣式效果
width:是用來定義標簽的寬度，單位常用px（像素）
height:用來定義標簽的高度，同樣常用px單位
border:用來定義標簽的邊框，如上的5px代表邊框的寬度，solid表示是實線（常用的，其他線型不做介紹，自己百度了解），#000000是顏色的十六進制值（這部分也請自行了解）
background-color:用來定義標簽的背景顏色，同樣用顏色的十六進制值表示
color:用來定義文字的顏色，也是用顏色的十六進制值表示，默認是黑色字
font-size:用來定義字體的大小，常以px為單位
text-align:用來定義文字的水平對齊方式（居中center、左對齊left、右對齊right）
font-weight:用來定義字體的粗細，默認為normal、bold加粗(常用，或700)、bolder更粗、lighter更細，100、200、300、至900定義由粗到細的字符。400 等同于 normal，而 700 等同于 bold。
line-height:如果數值和height的值相同時，是垂直居中對齊
以上樣式都了解了嗎？動動手試試吧！相信你會有更深刻且不一樣的認識，今天就介紹到這里，每天進步一點點！下一篇我們進一步介紹其他標簽的特殊樣式屬性！
記得關注哦！微信公眾號（HiMrOrange）和同名
介紹
今天福哥要跟跟大家說一說標簽的樣式，上一課我們學習的標簽的樣子就是它們的“默認”樣子，實話實說這簡直太難看了！為了讓它們看起來更漂亮，為了可以使用這些標簽勾勒出互聯網上我們看到的那些美輪美奐的網頁，我們需要通過標簽樣式對它們進行換裝、進行美化。
使用標簽樣式的語法，示例：我們給一個div設置邊框和背景顏色。
<div style="border: 1px solid #000; background: #ccc;"></div>尺寸
可以使用width和height控制對象的寬度和高度，可以使用百分比也可以使用具體的數值。
width
height
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
">
</div>邊框
邊框指的是標簽在網頁顯示的對象的邊框，控制邊框可以使用border這個樣式。還可以控制對象邊框的圓角。還可以單獨控制對象的上下左右四個方向的邊框的樣式。
border
border-radius
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #c85e7c;
border-radius: 15%;
">
</div>邊距
對象邊距分為內邊距和外邊距。
內邊距
內邊距指對象里面的子元素距離對象邊框的距離，使用padding樣式控制對象的內邊距。
padding
外邊距
外邊距指對象邊框距離父元素邊框的距離，使用margin樣式控制對象的外邊距。
margin
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #c85e7c;
border-radius: 15%;
padding: 12px;
margin: 12px;
">
福哥教我學HTML樣式
</div>背景
背景是指對象區域內的樣式，背景可以是一種顏色的填充，也可以是一張圖片的渲染。
background
background-color
background-image
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #c85e7c;
border-radius: 15%;
padding: 12px;
margin: 12px;
background: #c6b4f0;
">
福哥教我學HTML樣式
</div>字體
字體是用來控制文字的樣式的，可以控制文字的字體和字號。但是要注意一點，給文字設置字體一定要客戶端的電腦上有這種字體才可以正常顯示。
font
font-family
font-size
color
<div style="
display: block;
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #c85e7c;
border-radius: 15%;
padding: 12px;
margin: 12px;
background: #c6b4f0;
font-family: 黑體;
font-size: 22px;
color: #c85e7c;
">
福哥教我學HTML樣式
</div>顯示
對象的顯示方式也有很多種，有獨占一行的，也有只占一小塊的，還有非快狀的。顯示方式使用display屬性控制。
display: block
獨占一行
display: inline-block
獨占一小塊
display: inline
非塊狀
display: none
隱藏對象，就是對象狀態不可見也不占位置了
今天福哥給大家秀出了常用的標簽樣式，同時給出了這個樣式的實際顯示效果。接下來我們就要使用這些知識來設計我們自己的頁面了。
把網頁上的基本元素都套上了漂亮的皮膚，可以使用這些漂亮的標簽快速搭建好看的網頁，也是有捷徑可尋的。我們開發網站程序可以使用web框架輔助，那么設計漂亮的網頁也可以借助前端框架來完成。
下一課我們會跟大家介紹一款非常好用的前端框架——bootstrap，借助bootstrap前端框架就可以高效地設計網站的各種網頁了。
https://m.tongfu.net/home/35/blog/512895.html
節我們講文本樣式，像比如設置文本顏色呀，首行縮進、水平對齊等，可以對網頁進行排本設置等。
將要學習的文本屬性有如下幾個：
首先我們來講文本顏色設置，前面我們講過一節關于如何設置顏色，所以想必大家對如何給文本設置顏色不會。
示例：
例如給下面的 <p> 標簽中的 <span> 標簽中的文本，顏色設置為粉色：
<p>盛年不重來，<span>一日難再晨</span>。及時宜自勉，歲月不待人。</p>
CSS 樣式代碼：
span{
color: pink;
}
或者使用十六進制顏色值：
span{
color: #FFC0CB;
}
一般我們在寫作文的時候，所有段落的首行都會首行縮進兩個字，而我們如果希望在網頁中的段落也能實現首行縮進呢，這就可以通過 CSS 中的 text-index 屬性來設置首行文本的縮進。
text-index 屬性直接將縮進距離以數字表示，單位為 em 或 px。一般我們使用 em 更多，通常將值設置為 2em，表示縮進兩個字符。
em 是相對單位，表示的長度相當于文本中字符的倍數，會根據字符的大小，自動適應，空出設置字符的倍數。
text-index 屬性允許使用負值，如果使用負值，那么首行會被縮進到左邊。
示例：
實現第一個段落和最后一個段落的首行縮進：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS學習(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<p class="index">蒹葭蒼蒼，白露為霜。所謂伊人，在水一方。</p>
<p>溯洄從之，道阻且長。溯游從之，宛在水中央。</p>
<p>蒹葭萋萋，白露未晞。所謂伊人，在水之湄。</p>
<p>溯洄從之，道阻且躋。溯游從之，宛在水中坻。</p>
<p>蒹葭采采，白露未已。所謂伊人，在水之涘。</p>
<p class="index">溯洄從之，道阻且右。溯游從之，宛在水中沚。</p>
</body>
</html>
CSS 樣式代碼：
.index{
text-indent: 2em;
}
在瀏覽器中的演示：
text-align 屬性用于設置元素中文本的水平對齊方式。
屬性值有下面幾種：
示例：
看一下不同屬性值能實現的效果：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS學習(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<p class="text1">內容居中</p>
<p class="text2">內容居左</p>
<p class="text3">內容居右</p>
<p>內容不添加樣式</p>
</body>
</html>
CSS 樣式代碼：
.text1{
text-align: center;
}
.text2{
text-align: left;
}
.text3{
text-align: right;
}
在瀏覽器中的演示：
line-height 用于設置行高，也就是設置行間的距離。
屬性值可以是下面幾種：
一般我們使用數字來表示，單位為 px，如果不添加單位，則表示按倍數表示，這時行高是字體大小的倍數。
示例：
例如下面第一個 <p> 標簽中的內容字體大小為14px，將行高設置為 21px，和將行高設置為 2（字體大小的兩倍） 是一樣的效果：
<body>
<p class="text">魯迅的成功，有一個重要的秘訣，就是珍惜時間。魯迅十二歲在紹興城讀私塾的時候，父親正患著重病，兩個弟弟年紀尚幼，魯迅不僅經常上當鋪，跑藥店，還得幫助母親做家務，為免影響學業，他必須作好精確的時間安排。</p>
<p>此后，魯迅幾乎每天都在擠時間。他說過：「時間，就像海綿里的水，只要你擠，總是有的。」魯迅讀書的興趣十分廣泛，又喜歡寫作，他對于民間藝術，特別是傳說、繪畫，也深切愛好。</p>
</body>
CSS 樣式代碼：
.text{
font-size: 14px;
line-height: 28px;
/* 相當于 line-height:2; */
}
在瀏覽器中的演示：
text-decoration 屬性用于設置文本的裝飾，也就是給文本設置某種效果，例如下劃線、刪除線等。
屬性值可以是下面幾種：
示例：
除了給文本添加裝飾，我們還可以通過text-decoration 屬性去掉鏈接下面的下劃線：
<p>默認文本</p>
<p class="p1">設置下劃線</p>
<p class="p2">設置上劃線</p>
<p class="p3">設置刪除線</p>
<p class="p4">文本閃爍</p>
<a href="#">去掉鏈接的下劃線</a>
CSS 樣式代碼：
.p1{
text-decoration: underline;
}
.p2{
text-decoration: overline;
}
.p3{
text-decoration: line-through;
}
.p4{
text-decoration: blink;
}
a{
text-decoration: none;
}
在瀏覽器中的演示：
總結：本節所學習的文本樣式，在實際應用中我們會經常用到，所以大家要弄清楚這幾個屬性的使用，以及當賦值不同的屬性值時，展示出來的效果是什么。
想看更多可以：https://www.9xkd.com/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
