整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
顏色屬性被用來設(shè)置文字的顏色。
顏色是通過CSS最經(jīng)常的指定：
一個(gè)網(wǎng)頁的文本顏色是指在主體內(nèi)的選擇：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title>項(xiàng)目</title>
<style>
body {
color: blue;
}
h1 {
color: #00ff00;
}
h2 {
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<h2>hello world</h2>
<h1>welcome to CaoZhou</h1>
</body>
</html>注：對(duì)于W3C標(biāo)準(zhǔn)的CSS：如果你定義了顏色屬性，你還必須定義背景色屬性。
文本排列屬性是用來設(shè)置文本的水平對(duì)齊方式。
文本可居中或?qū)R到左或右,兩端對(duì)齊。
當(dāng)text-align設(shè)置為"justify"，每一行被展開為寬度相等，左，右外邊距是對(duì)齊（如雜志和報(bào)紙）。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
</style>
</head>
<body>
<p class="date">2015 年 3 月 14 號(hào)</p>
<p class="main"> 從前有個(gè)書生，和未婚妻約好在某年某月某日結(jié)婚。到那一天，未婚妻卻嫁給了別人。書生受此打擊， 一病不起。 這時(shí)，路過一游方僧人，從懷里摸出一面鏡子叫書生看。書生看到茫茫大海，一名遇害的女子一絲不掛地躺在海灘上。路過一人， 看一眼，搖搖頭，走了。又路過一人，將衣服脫下，給女尸蓋上，走了。再路過一人，過去，挖個(gè)坑，小心翼翼把尸體掩埋了。 僧人解釋道， 那具海灘上的女尸，就是你未婚妻的前世。你是第二個(gè)路過的人，曾給過他一件衣服。她今生和你相戀，只為還你一個(gè)情。但是她最終要報(bào)答一生一世的人，是最后那個(gè)把她掩埋的人，那人就是他現(xiàn)在的丈夫。書生大悟，病愈。
</p>
<p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的。</p>
</body>
</html>text-decoration 屬性用來設(shè)置或刪除文本的裝飾。
從設(shè)計(jì)的角度看 text-decoration屬性主要是用來刪除鏈接的下劃線：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.none {}
.del {
text-decoration: none;
}
</style>
</head>
<body>
<p>原來的樣子</p>
<a href="#" class="none">wwwwwwwwwwwwwwwwww</a>
<p>去掉下劃線</p>
<a href="#" class="del">wwwwwwwwwwwwwwwwwwwww</a>
</body>
</html>也可以這樣裝飾文字：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title>項(xiàng)目</title>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>注：不建議強(qiáng)調(diào)指出不是鏈接的文本，因?yàn)檫@常常混淆用戶。
text-transform文本轉(zhuǎn)換屬性是用來指定在一個(gè)文本中的大寫和小寫字母。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title>項(xiàng)目</title>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>text-indent文本縮進(jìn)屬性是用來指定文本的第一行的縮進(jìn)。
p {text-indent:50px;}增加或減少字符之間的空間。
<style>
h1 {
letter-spacing:2px;
}
h2 {
letter-spacing:-3px;
}
</style>指定在一個(gè)段落中行之間的空間。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title>項(xiàng)目</title>
<style>
p.small {
line-height: 70%;
}
p.big {
line-height: 200%;
}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br>
</p>
</body>
</html>增加一個(gè)段落中的單詞之間的空白空間。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title>項(xiàng)目</title>
<style type="text/css">
p {
word-spacing: 30px;
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body>
</html>設(shè)置文本的垂直對(duì)齊圖像。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title>項(xiàng)目</title>
<style>
img{
width: 200px;
height: 100px;
}
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p>An <img src="img/logo.png" /> image with a default alignment.</p>
<p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src="img/logo.png" /> image with a text-bottom alignment.</p>
</body>
</html>設(shè)置文本陰影。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title>項(xiàng)目</title>
<style>
h1{
text-shadow: 2px 2px #FF0000;
}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
</body>
</html>本文主要介紹了CSS文本樣式實(shí)際應(yīng)用中應(yīng)該如何去操作，通過講解文本中對(duì)應(yīng)的屬性去改變文本的表現(xiàn)形式。使用豐富的效果圖的展示，能夠更直觀的看到運(yùn)行的效果，能夠更好的理解。使用Html語言，代碼結(jié)構(gòu)更佳的清晰，能夠幫助你更好的學(xué)習(xí)。
家好，我是 Echa。
當(dāng)開始一個(gè)新的前端項(xiàng)目時(shí)，首要任務(wù)就是重置 CSS 中的一些默認(rèn)樣式。下面就來看看在現(xiàn)代 CSS 中如何進(jìn)行樣式重置。本文將深入研究每條規(guī)則，以了解它的作用和使用它的原因！
下面是自定義的 CSS 重置代碼：
/*
1. 使用更直觀的 box-sizing 模型
*/
*, *::before, *::after {
box-sizing: border-box;
}
/*
2. 移除默認(rèn) margin
*/
* {
margin: 0;
}
/*
3. 在應(yīng)用中允許基于百分比的高度
*/
html, body {
height: 100%;
}
/*
排版調(diào)整
4. 添加無障礙行高
5. 改進(jìn)文本渲染
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
6. 改進(jìn)媒體默認(rèn)設(shè)置
*/
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/*
7. 刪除內(nèi)置表單排版樣式
*/
input, button, textarea, select {
font: inherit;
}
/*
8. 避免文字溢出
*/
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/*
9. 創(chuàng)建根層疊上下文
*/
#root, #__next {
isolation: isolate;
}
這里的代碼不多，但是這個(gè)小樣式表中包含了很多內(nèi)容。下面將逐條介紹！
從歷史上看，CSS 重置的主要目標(biāo)是確保瀏覽器之間的一致性，并撤消所有默認(rèn)樣式。這段 CSS 重置代碼并沒有真正做這些事情。
如今，瀏覽器在布局或間距方面沒有太大的差異。總的來說，瀏覽器準(zhǔn)確地實(shí)現(xiàn)了 CSS 規(guī)范，并且一切都如你期望的那樣，所以它不再是必要的了。
這里的 CSS 重置可能不符合“CSS重置”的經(jīng)典定義，但更具創(chuàng)造性！
先來看一段代碼，假設(shè)沒有應(yīng)用其他 CSS，以下場(chǎng)景中的 .box 元素有多寬？
<style>
.parent {
width: 200px;
}
.box {
width: 100%;
border: 2px solid hotpink;
padding: 20px;
}
</style>
<div class="parent">
<div class="box"></div>
</div>
這里的 .box 元素的寬度為：100%。因?yàn)樗母讣?jí)寬度為 200px ，所以 100% 將解析為 200px。但是它在哪里應(yīng)用了 200px 的寬度呢？默認(rèn)情況下，它將該大小應(yīng)用于內(nèi)容區(qū)域，即下圖中白色的區(qū)域：
width: 100% 聲明會(huì)將 .box 的內(nèi)容框設(shè)置為 200px。而 padding 將增加額外的 40 px（每邊 20 px）。border 將增加額外的 4px（每邊 2px）。當(dāng)進(jìn)行計(jì)算時(shí)，粉紅色矩形的寬度將是 244 px。
當(dāng)嘗試將 244px 的框放入寬度為 200px 的父級(jí)時(shí)，就會(huì)發(fā)生溢出：
我們可以通過設(shè)置以下規(guī)則來更改這種奇怪的行為：
*, *::before, *::after {
box-sizing: border-box;
}
應(yīng)用此規(guī)則后，百分比將根據(jù) border-box 進(jìn)行解析。在上面的例子中，粉色框?qū)挾葹?200 px，內(nèi)部?jī)?nèi)容框的寬度將縮小到 156 px（200 px - 40 px - 4 px）。
這是一條必須具備的規(guī)則，它使 CSS 更好用。這里使用通配符選擇器 (*) 將它應(yīng)用于所有元素和偽元素。與人們普遍的看法相反，這對(duì)性能來說并不壞。
網(wǎng)絡(luò)上有一些人建議改為執(zhí)行以下操作：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
如果i正在嘗試遷移一個(gè)大型的已經(jīng)存在的項(xiàng)目以使用 border-box，這可能是一個(gè)有用的策略。如果要從頭開始一個(gè)全新的項(xiàng)目，這就是沒有必要的。為了簡(jiǎn)單起見，上面的 CSS 重置中省略了它。
那在什么時(shí)候，這是有用的呢？下面來看一個(gè)可能有用的示例。如果您正在嘗試遷移一個(gè)大型的預(yù)先存在的項(xiàng)目以使用 border-box，這可能是一個(gè)有用的策略。如果您要從頭開始一個(gè)全新的項(xiàng)目，則沒有必要。為了簡(jiǎn)單起見，我在 CSS 重置中省略了它。
展開以查看何時(shí)可能有用的示例。首先，將 legacy 的 box-sizing 屬性設(shè)置為 content-box，即 box-sizing 屬性的默認(rèn)值：
.legacy {
box-sizing: content-box;
}
然后，當(dāng)應(yīng)用有一部分尚未遷移到使用 border-box 時(shí)，可以將類這樣放：
<body>
<header class="legacy">
<nav>
<!-- 遺留的內(nèi)容在這里 -->
</nav>
</header>
<main>
<section>
<!-- 現(xiàn)代的內(nèi)容在這里 -->
</section>
<aside class="legacy">
<!-- 遺留的內(nèi)容在這里 -->
</aside>
</main>
</body>
這里，<header> 被賦予了 legacy 類，因此它使用 box-sizing: content-box。它的子元素 <nav> 具有 box-sizing: inherit。因?yàn)樗母讣?jí)設(shè)置為 content-box，所以 nav 也將設(shè)置為 content-box。
<main> 標(biāo)簽沒有 legacy 類，因此它繼承自其父類 <body>。<body> 繼承自 <html>。<html> 被設(shè)置為了 border-box。
本質(zhì)上，每個(gè)元素現(xiàn)在都會(huì)從其他元素中找出其 box-sizing 的行為。如果它有一個(gè)設(shè)置 legacy 類的祖先，它將是 content-box。否則，最終會(huì)繼承 html 標(biāo)簽，即使用 border-box。
* {
margin: 0;
}
通常，瀏覽器會(huì)圍繞 margin 做出常識(shí)性假設(shè)。例如，默認(rèn)情況下，h1 將包含比 p 更多的邊距。這些假設(shè)在處理文檔文字的上下文中是合理的，但對(duì)于現(xiàn)代 Web 應(yīng)用而言可能并不準(zhǔn)確。
我們可能通常希望元素默認(rèn)是沒有任何邊距的，所以就把默認(rèn)的邊距全部刪除了。當(dāng)確實(shí)想為特定標(biāo)簽添加一些邊距時(shí)，可以在自定義樣式中來添加。通配符選擇器 (*) 的特異性極低，因此很容易覆蓋此規(guī)則。
html, body {
height: 100%;
}
你有沒有試過在 CSS 中使用基于百分比的高度，卻發(fā)現(xiàn)它似乎沒有效果？下面來看一個(gè)例子：
這里 main 元素具有 100% 的高度，但是元素根本沒有變長(zhǎng)。這是行不通的，因?yàn)樵诹魇讲季郑–SS 中的主要布局模式）中，高度和寬度的操作原理完全不同。元素的寬度是根據(jù)其父元素計(jì)算的，而元素的高度是根據(jù)其子元素計(jì)算的。
當(dāng)應(yīng)用這條規(guī)則時(shí)，main 元素就可以增長(zhǎng)：
如果使用的是像 React 這樣的 JavaScript 框架，可能還希望在此規(guī)則中添加第三個(gè)選擇器：框架使用的根級(jí)的元素。
例如，在 Next.js 項(xiàng)目中，將規(guī)則更新如下：
html, body, #__next {
height: 100%;
}
那為什么要設(shè)置基于百分比的 height，而不改用 vh 單位呢？問題就在于 vh 單元在移動(dòng)設(shè)備上無法正常工作；100vh 將占據(jù)超過 100% 的屏幕空間，因?yàn)橐苿?dòng)瀏覽器會(huì)在瀏覽器 UI 出現(xiàn)和消失的地方做這件事。未來，新的 CSS 單位將解決這個(gè)問題。在那之前，可以使用基于百分比的高度。
body {
line-height: 1.5;
}
line-height 控制段落中每行文本之間的垂直間距。默認(rèn)值因?yàn)g覽器而異，通常在 1.2 左右。這個(gè)沒有單位的數(shù)字是基于字體大小的，就像 em 單位。行高為 1.2 時(shí)，每行高度將比元素的字體大小大 20%。
這就是問題所在：對(duì)于有閱讀障礙的人來說，這些行擠得太緊了，很難閱讀。WCAG 標(biāo)準(zhǔn)規(guī)定行高應(yīng)至少為 1.5。這個(gè)數(shù)字確實(shí)傾向于在標(biāo)題和其他大字體元素上產(chǎn)生相當(dāng)大的行：
你可能希望在標(biāo)題上覆蓋此值。我的理解是 WCAG 標(biāo)準(zhǔn)適用于“正文”文本，而不是標(biāo)題。
body {
-webkit-font-smoothing: antialiased;
}
在 MacOS 電腦上，瀏覽器默認(rèn)使用“亞像素抗鋸齒”。這是一種旨在通過利用每個(gè)像素內(nèi)的 R/G/B 光使文本更易于閱讀的技術(shù)。過去，這被視為可訪問性的勝利，因?yàn)樗岣吡宋谋緦?duì)比度。
在 2018 年發(fā)布的 MacOS Mojave 中，Apple 禁用了整個(gè)操作系統(tǒng)的亞像素抗鋸齒功能。然而，像 Chrome 和 Safari 這樣的 MacOS 瀏覽器默認(rèn)情況下仍然使用子像素抗鋸齒。我們需要通過將 -webkit-font-smoothing 設(shè)置為 antialiased 來關(guān)閉它。
下圖中，左側(cè)是關(guān)閉之后的效果：
MacOS 是唯一使用子像素抗鋸齒的操作系統(tǒng)，因此此規(guī)則對(duì) Windows、Linux 或移動(dòng)設(shè)備并沒有影響。如果使用的是 MacOS 計(jì)算機(jī)，則可以比較兩者的實(shí)時(shí)渲染（沒有使用CSS重置）：
p {
-webkit-font-smoothing: subpixel-antialiased;
font-family: sans-serif;
}
.antialiased {
-webkit-font-smoothing: antialiased;
}
效果如下：
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
在 HTML 中，圖像被認(rèn)為是內(nèi)聯(lián)元素。這意味著它應(yīng)該用在段落中間，像<em> 或 <strong>一樣。這與大多數(shù)時(shí)候使用圖像的方式不一致。通常，對(duì)待圖像的方式與對(duì)待段落、標(biāo)題的方式相同，都是布局元素。
但是，如果嘗試在布局中使用內(nèi)聯(lián)元素，就會(huì)發(fā)生奇怪的事情。如果你曾經(jīng)有過一個(gè)神秘的 4px 間隙，它不是padding、margin或border，它可能是瀏覽器用行高添加的內(nèi)聯(lián)空間。
通過給圖片設(shè)置 display: block 就避免了這種問題。除此之外，還設(shè)置了max-width: 100%。這樣做是為了防止大圖溢出，如果它們被放置在了一個(gè)不夠?qū)挼娜萜髦小４蠖鄶?shù)塊級(jí)元素會(huì)自動(dòng)增長(zhǎng)/收縮以適應(yīng)其父元素，但像 <img> 這樣的媒體元素很特殊：它們被稱為替換元素，并且它們不遵循這些規(guī)則。
如果圖像的原始尺寸為 800×600，即使將其放入寬度為 500px 的父元素中，其寬度也將是 800px。這條規(guī)則將防止該圖像超出其容器，這可能是更明智的默認(rèn)行為。
input, button, textarea, select {
font: inherit;
}
默認(rèn)情況下，按鈕和輸入框不會(huì)從其父元素繼承排版樣式。相反，它們有自己的怪異風(fēng)格。例如，<textarea> 將使用系統(tǒng)默認(rèn)的等寬字體。input 輸入將使用系統(tǒng)默認(rèn)的無襯線字體。兩者都將選擇很小的字體大小（在 Chrome 中為 13.333px）。在移動(dòng)設(shè)備上閱讀 13 px 的文本會(huì)很困難。當(dāng)聚焦一個(gè)小字體的 input 時(shí)，瀏覽器會(huì)自動(dòng)放大，讓文本更容易閱讀。
這是一個(gè)不太好的體驗(yàn)：
如果想要避免這種自動(dòng)縮放行為，輸入的字體大小至少需要 1rem / 16px。下面是解決該問題的一種方法：
input, button, textarea, select {
font-size: 1rem;
}
這的確解決了自動(dòng)縮放問題，但這這是表面上的。這個(gè)問題的根本原因是：表單輸入不應(yīng)該有自己的排版樣式。
input, button, textarea, select {
font: inherit;
}
font 是一種很少使用的速記，它設(shè)置了一些與字體相關(guān)的屬性，如 font-size、font-weight、font-family。通過將其設(shè)置為 inherit，就指定這些元素與其周圍環(huán)境中的排版相匹配。只要不為正文設(shè)置很小的字體，這樣做就可以解決這些問題。
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
在 CSS 中，如果一行中沒有足夠的空間容納所有字符，文本將自動(dòng)換行。默認(rèn)情況下，算法會(huì)尋找“軟換行”的機(jī)會(huì)，這些是算法可以拆分的字符。在英語中，唯一的軟換行機(jī)會(huì)就是空格和連字符，但這因語言而異。
如果一行中沒有任何軟換行機(jī)會(huì)，并且它不適合換行，就會(huì)導(dǎo)致文本溢出：
這可能會(huì)導(dǎo)致出現(xiàn)水平滾動(dòng)條，也可能會(huì)導(dǎo)致文本與其他元素重疊，或者滑到圖像/視頻后面。
overflow-wrap 屬性可以調(diào)整換行算法，并允許它在找不到軟換行機(jī)會(huì)時(shí)使用硬換行：
除此之外，還可以嘗試添加 hyphens 屬性：
p {
overflow-wrap: break-word;
hyphens: auto;
}
hyphens: auto 使用連字符（在支持它的語言中）來指定硬換行，它使硬換行更加普遍。如果文本列非常窄，這可能是值得的，但它也可能有點(diǎn)分散注意力。所以并沒有將其包含在重置中，但值得一試！
#root, #__next {
isolation: isolate;
}
這一項(xiàng)是是可選的。通常只有在使用像 React 這樣的 JavaScript 框架時(shí)才需要它。isolation 屬性允我們創(chuàng)建一個(gè)新的層疊上下文，而無需設(shè)置 z-index。這就可以保證某些高優(yōu)先級(jí)元素（例如模態(tài)框、下拉菜單、tooltip）將始終顯示在應(yīng)用中的其他元素之上。
我們需要根據(jù)使用的框架來調(diào)整選擇器，該選擇器選擇的是應(yīng)用中渲染的頂級(jí)元素。例如，create-react-app 使用的是 <div id="root">，所以應(yīng)該使用選擇器#root。
最后，再來看一下這些重置樣式的完整代碼，可以將其復(fù)制/粘貼到自己的項(xiàng)目中：
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
#root, #__next {
isolation: isolate;
}
參考文章：https://www.joshwcomeau.com/css/custom-css-reset/
ss是一種用來為Html文檔添加樣式（字體、間距、位置、顏色、角度等顯示效果）的計(jì)算機(jī)語言。學(xué)習(xí)網(wǎng)站W(wǎng)3school。
css的引用樣式:
一:style標(biāo)簽（內(nèi)聯(lián)樣式）
通過在head標(biāo)簽中間新建一個(gè)style標(biāo)簽，該標(biāo)簽內(nèi)部存放的就是網(wǎng)頁文件中的css代碼。
二：外部引用css文件（外聯(lián)樣式）
新建一個(gè)css文件
在head標(biāo)簽中間新建一個(gè)link標(biāo)簽，通過href屬性設(shè)置外部的css文件地址。rel=“stylesheet”表示我們引用的一個(gè)樣式表（css文件）。
三:標(biāo)簽內(nèi)部style屬性（行內(nèi)樣式）
在開始標(biāo)簽的內(nèi)部可以設(shè)置一個(gè)叫做style的屬性，屬性的雙引號(hào)存放該元素代碼的css樣式（不推薦使用）。
一般用的就是通過link標(biāo)簽來引入外部css文件來修改樣式，一般修改樣式有字體，顏色，大小，文本居中，間距等。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
