web前端入門到實戰：CSS的文本格式化樣式總彙
長度單位css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: red;
}
.box1{
font-size: 20px;
/*em數值根據當前元素字體大小變化而變化*/
width: 2em;
/*百分比隨着父元素變化而變化*/
height: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學習方法和須要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
顏色html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
/*
* 顏色單位：
* 在CSS能夠直接使用顏色的單詞來表示不一樣的顏色
* 紅色：red
* 藍色：blue
* 綠色：green
* 也可使用RGB值來表示不一樣的顏色
* - 所謂的RGB值指的是經過Red Green Blue三元色，
* 經過這三種顏色的不一樣的濃度，來表示出不一樣的顏色
* - 例子：rgb(紅色的濃度,綠色的濃度,藍色的濃度);
* - 顏色的濃度須要一個0-255之間的值，255表示最大，0表示沒有
* - 濃度也能夠採用一個百分數來設置，須要一個0% - 100%之間的數字
* 使用百分數最終也會轉換爲0-255之間的數
* 0%表示0
* 100%表示255
* 也可使用十六進制的rgb值來表示顏色，原理和上邊RGB原理同樣，
* 只不過使用十六進制數來代替，使用三組兩位的十六進制數組來表示一個顏色
* 每組表示一個顏色 ,第一組表示紅色的濃度，範圍00-ff
* 第二組表示綠色的濃度，範圍是00-ff
* 第三組表示藍色的濃度，範圍00-ff
* 語法：#紅色綠色藍色
* 十六進制：
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 - ff
* 00表示沒有，至關於rgb中的0
* ff表示最大，至關於rgb中255
* 紅色：
* #ff0000
* 像這種兩位兩位重複的顏色，能夠簡寫
* 好比：#ff0000 能夠寫成 #f00
* #abc #aabbcc
*
*/
/*background-color: rgb(161,187,215);*/
/*background-color: rgb(100%,50%,50%);*/
/*background-color: #00f;*/
/*background-color: #abc;*/ /*#aabbcc*/
background-color: #084098;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學習方法和須要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
上面的代碼若是懶得看的話，想知道顏色的RGB值直接用QQ自帶的截圖工具就能點兩下就知道了。或者用更高級的screen color picker。前端
文本的大小以及顏色web
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
/*設置字體顏色,使用color來設置文字的顏色*/
color: red;
font-size: 30px;
/*
* 該樣式能夠同時指定多個字體，多個字體之間使用,分開
* 當採用多個字體時，瀏覽器會優先使用前邊的字體，
* 若是前邊沒有在嘗試下一個
*/
font-family: arial , 微軟雅黑
</style>
</head>
<body>
<p class="p1">
我是一個p標籤，ABCDEFGabcdefg
</p>
</body>
</html>
文字的字體數組
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
通常會將字體的大分類，指定爲font-family中的最後一個字體
*/
p{
font-family: arial , 微軟雅黑 , 華文彩雲 , serif;
}
</style>
</head>
<body>
<p style="font-size: 50px; font-family: serif;">襯線字體：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: sans-serif;">非襯線字體：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: monospace;">等寬字體：我是一段文字，IHABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: cursive;">草書字體：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: fantasy;">虛幻字體：我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>
文字的字體樣式瀏覽器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
color: red;
font-size: 30px;
font-family: "微軟雅黑";
font-style: italic;
font-weight: bold;
font-variant: small-caps ;
}
.p2{
/*設置一個文字大小*/
font-size: 50px;
/*設置一個字體*/
font-family: 華文彩雲;
/*設置文字斜體*/
font-style: italic;
/*設置文字的加粗*/
font-weight: bold;
/*設置一個小型大寫字母*/
font-variant: small-caps;
}
.p3{
/*
* 在CSS中還爲咱們提供了一個樣式叫font，
* 使用該樣式能夠同時設置字體相關的全部樣式,
* 能夠將字體的樣式的值，統一寫在font樣式中，不一樣的值之間使用空格隔開
*
* 使用font設置字體樣式時，斜體 加粗 小大字母，沒有順序要求，甚至可寫可不寫，
* 若是不寫則使用默認值，可是要求文字的大小和字體必須寫，並且字體必須是最後一個樣式
* 大小必須是倒數第二個樣式
*
* 實際上使用簡寫屬性也會有一個比較好的性能
*/
font: small-caps bold italic 60px "微軟雅黑";
}
</style>
</head>
<body>
<p class="p3">我是一段文字，ABCDEFGabcdefg</p>
<p class="p1">我是一段文字，ABCDEFGabcdefg</p>
<p class="p2">我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>
推薦使用p3的寫法。ide
行間距工具
在CSS並無爲咱們提供一個直接設置行間距的方式，性能
- 咱們只能經過設置行高來間接的設置行間距，行高越大行間距越大
- 使用line-height來設置行高
- 網頁中的文字實際上也是寫在一個看不見的線中的，而文字會默認在行高中垂直居中顯示
行間距 = 行高 - 字體大小學習
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
- * 行間距 = 行高 - 字體大小
*/
.p1{
font-size: 20px;
/*
* 經過設置line-height能夠間接的設置行高，
* 能夠接收的值：
* 1.直接就收一個大小
* 2.能夠指定一個百分數，則會相對於字體去計算行高
* 3.能夠直接傳一個數值，則行高會設置字體大小相應的倍數
*/
/*line-height: 200%;*/
line-height: 2;
}
.p2{
/*
* 在font中也能夠指定行高
在字體大小後能夠添加/行高，來指定行高，該值是可選的，若是不指定則會使用默認值
*/
font: 30px/50px "微軟雅黑";
line-height: 50px;
/*以上爲兩種行高設置方法，*/
}
.box{
width: 200px;
height: 200px;
background-color: #bfa;
/*
* 對於單行文原本說，能夠將行高設置爲和父元素的高度一致，
* 這樣能夠是單行文本在父元素中垂直居中
*/
line-height: 200px;
}
</style>
</head>
<body>
<p class="p2">
在個人後園，能夠看見牆外有兩株樹，一株是棗樹，還有一株也是棗樹。 這上面的夜的天空，奇怪而高，我平生沒有見過這樣奇怪而高的天空。他彷彿要離開人間而去，令人們仰面再也不看見。然而如今卻很是之藍，閃閃地?着幾十個星星的眼，冷眼。他的口角上現出微笑，彷佛自覺得大有深意，而將繁霜灑在個人園裏的野花草上。 我不知道那些花草真叫什麼名字，人們叫他們什麼名字。
</p>
<div class="box">
<a href="#">我是一個超連接</a>
</div>
<p class="p1">
在個人後園，能夠看見牆外有兩株樹，一株是棗樹，還有一株也是棗樹。 這上面的夜的天空，奇怪而高，我平生沒有見過這樣奇怪而高的天空。他彷彿要離開人間而去，令人們仰面再也不看見。然而如今卻很是之藍，閃閃地?着幾十個星星的眼，冷眼。他的口角上現出微笑，彷佛自覺得大有深意，而將繁霜灑在個人園裏的野花草上。 我不知道那些花草真叫什麼名字，人們叫他們什麼名字。。
</p>
</body>
</html>
專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學習方法和須要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
文本的樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1 {
/*
* text-transform能夠用來設置文本的大小寫
*/
text-transform: lowercase;
}
.p2 {
/*
* text-decoration能夠用來設置文本的修飾
line-through 爲文本添加刪除線
*/
text-decoration: line-through;
}
a {
/*超連接會默認添加下劃線，也就是超連接的text-decoration的默認值是underline
若是須要去除超連接的下劃線則須要將該樣式設置爲none
* */
text-decoration: none;
}
.p3 {
/**
* letter-spacing能夠指定字符間距
*/
etter-spacing: 10px;
/*
* word-spacing能夠設置單詞之間的距離
*/
word-spacing: 120px;
}
.p4{
/*
* text-align用於設置文本的對齊方式
*/
text-align: justify ;
}
.p5{
font-size: 20px;
/*
* text-indent用來設置首行縮進
*/
text-indent: -99999px;
}
</style>
</head>
<body>
<p class="p5">
粉房旁邊的那小偏房裏，還住着一家趕車的，那家喜歡跳大神，經常就打起鼓來，喝喝咧咧唱起來了。鼓聲每每打到半夜才止，那說仙道鬼的，大神和二神的一對一答。蒼涼，幽渺，真不知今世何世。
</p>
<p class="p4">
粉房旁邊的那小偏房裏，還住着一家趕車的，那家喜歡跳大神，經常就打起鼓來，喝喝咧咧唱起來了。鼓聲每每打到半夜才止，那說仙道鬼的，大神和二神的一對一答。蒼涼，幽渺，真不知今世何世。
</p>
<p class="p3">
粉房旁邊的那小偏房裏，還住着一家趕車的，那家喜歡跳大神，經常就打起鼓來，喝喝咧咧唱起來了。鼓聲每每打到半夜才止，那說仙道鬼的，大神和二神的一對一答。蒼涼，幽渺，真不知今世何世。
</p>
<a href="#">我是超連接</a>
<p class="p2">
Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?
</p>
<p class="p1">
Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?
</p>
</body>
</html>
相關文章
- 1. web前端入門到實戰：CSS的文本格式化樣式總彙
- 2. web前端入門到實戰：css樣式初始化
- 3. web前端入門到實戰：css選擇器和css文本樣式相關
- 4. web前端入門到實戰：CSS設置滾動條樣式
- 5. 前端開發HTML&css入門——CSS的文本格式化
- 6. web前端入門到實戰：css文本兩端對齊
- 7. web前端入門到實戰：純CSS實現加載轉圈樣式
- 8. web前端入門到實戰：JavaScript中尺寸類樣式
- 9. web前端入門到實戰：css實現文字豎排的方式
- 10. web前端入門到實戰：CSS網格佈局（Grid）教程
- 更多相關文章...
- • Web 品質 - 樣式表 - 網站品質教程
- • ARP報文格式詳解 - TCP/IP教程
- • IntelliJ IDEA代碼格式化設置
- • IntelliJ IDEA安裝代碼格式化插件
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
