HTML 樣式

tyle 屬性用于改變 HTML 元素的樣式。

<html>

<h1>Look! Styles and colors</h1>

This text is in Verdana and red</p>

This text is in Times and green</p>

<p style="font-size:30px">This text is 30 pixels high</p>

</body>

</html>

HTML 的 style 屬性

style 屬性的作用：

提供了一種改變所有 HTML 元素的樣式的通用方法。

樣式是 HTML 4 引入的，它是一種新的首選的改變 HTML 元素樣式的方式。通過(guò) HTML 樣式，能夠通過(guò)使用 style 屬性直接將樣式添加到 HTML 元素，或者間接地在獨(dú)立的樣式表中（CSS 文件）進(jìn)行定義。

不贊成使用的標(biāo)簽和屬性

在 HTML 4 中，有若干的標(biāo)簽和屬性是被廢棄的。被廢棄（Deprecated）的意思是在未來(lái)版本的 HTML 和 XHTML 中將不支持這些標(biāo)簽和屬性。

這里傳達(dá)的信息很明確：請(qǐng)避免使用這些被廢棄的標(biāo)簽和屬性！

應(yīng)該避免使用下面這些標(biāo)簽和屬性：

HTML 樣式實(shí)例 - 背景顏色

background-color 屬性為元素定義了背景顏色：

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

HTML 樣式實(shí)例 - 字體、顏色和尺寸

font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸：

<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

HTML 樣式實(shí)例 - 文本對(duì)齊

text-align 屬性規(guī)定了元素中文本的水平對(duì)齊方式：

SS樣式被稱為“層疊樣式表”，是一種網(wǎng)頁(yè)制作不可或缺的技術(shù)，是用于修飾網(wǎng)頁(yè)樣式，達(dá)到設(shè)計(jì)效果的一種樣式語(yǔ)言。

而由于樣式效果非常多，在工作中并非所有的樣式都會(huì)用到，因此經(jīng)常可能遇到某些特定樣式會(huì)突然想不起來(lái)的情況，更何況對(duì)于初學(xué)者來(lái)說(shuō)遇到這種情況。

接下來(lái)就跟著小凡一起整理一下這些常用而易忘的css樣式。

css樣式的效果

01、文字超出部分顯示省略號(hào)

單行文本的超出部分顯示省略號(hào)。（一定要給元素本身設(shè)置寬度）

.title {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}

CSS樣式效果圖

多行文本的超出部分顯示省略號(hào)

.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

CSS樣式效果圖

PS：建議加上word-break:break-all 否則遇到長(zhǎng)單詞會(huì)出現(xiàn)很神奇的布局情況。

圖一

圖二

圖一未添加，圖二添加后的不同效果

02、中英文(長(zhǎng)單詞)自動(dòng)換行

word-break:break-all; 只對(duì)英文起作用，以字母作為換行依據(jù)

word-wrap:break-word; 只對(duì)英文起作用，以單詞作為換行依據(jù)

white-space:pre-wrap; 只對(duì)中文起作用，強(qiáng)制換行

white-space:nowrap;都起作用，強(qiáng)制不換行

PS:網(wǎng)頁(yè)中英文單詞通過(guò)“_”(下劃線)和 “-”（中劃線）連接的英文單詞在編譯處理是方式是截然不同的。

下劃線是程序命名方法下劃線命名法的規(guī)范,其他命名規(guī)范還有駝峰式命名。屬于程序?qū)Ｓ玫拿?guī)范。可以連接想連的部分為一個(gè)變量名，不是單詞。

下劃線連接單詞效果

中劃線是英語(yǔ)復(fù)合詞有連接2個(gè)單詞的意思，但前后是2個(gè)獨(dú)立單詞。

中劃線連接單詞效果

03、設(shè)置表單輸入框placeholder的樣式

input::-webkit-input-placeholder {
  color:skyblue;
  text-align: center;
}
input::-ms-input-placeholder {
  color:skyblue;
  text-align: center;
}
input::-moz-placeholder {
  color:skyblue;
  text-align: center;
}

CSS樣式效果圖

04、不固定高度的元素文字垂直居中

兼容IE8：偽元素和inline-block/vertical-align

.box::before {
  content:"";
  display: inline-block;
  height: 100vh;
  vertical-align: middle;
  text-align: center;
}

CSS樣式效果圖

不兼容IE8以下: flex布局

.box {
  background: skyblue;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS樣式效果圖

05、文字兩端對(duì)齊

.wrap {
  margin: 0 auto;
  width: 800px;
  text-align: justify;
  text-justify: distribute-all-lines;
  /* 兼容IE6-8 */
  text-align-last: justify;
  -moz-text-align-last: justify;
}

CSS樣式效果圖

06、iOS頁(yè)面中滑動(dòng)卡頓

body,html {
  -webkit-overflow-scrolling:touch
}

07、設(shè)置滾動(dòng)條樣式

 .wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
}


.wrap::-webkit-scrollbar {
  /* 整體大小樣式 */
  width: 10px;
  height: 10px;
  }


.wrap::-webkit-scrollbar-thumb {
  /* 滾動(dòng)條里的滑塊 */
  border-radius: 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.2) 25%,
  transparent 25%,
  transparent 50%,
  rgba(255,255,255,0.2) 55%,
  rgba(255,255,255,0.2) 75%,
  transparent 75%,
  transparent);
}


.test::-webkit-scrollbar-track {
/* 滾動(dòng)條的軌道 */
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #ededed;
  border-radius: 10px;
}

CSS樣式效果圖

08、隱藏滾動(dòng)條但又可以滾動(dòng)

.wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}


.wrap::-webkit-scrollbar {
/* 整體大小樣式 */
  display: none;
}

CSS樣式效果圖

09、css繪制三角

無(wú)邊框三角

div {
  width:0;
  height:0;
  border-width: 0 40px 40px;
  border-style: solid;
  border-color: transparent transparent rgba(0,0,0,0.3);
}

CSS樣式效果圖

帶邊框三角

div {
  position: relative;
  width:0;
  height:0;
  border-width: 40px 0 40px  40px ;
  border-style: solid;
  border-color:  transparent  black ;
}


div::after {
  content: "";
  position: absolute;
  top:-36px;
  left:-38px;
  border-width: 36px 0 36px  36px ;
  border-style: solid;
  border-color:  transparent red ;
}

CSS樣式效果圖

10、文字間的間距

text-indent 文章段落首行縮進(jìn)

letter-spacing 字與字之間的間距

.wrap {
  margin: 0 auto;
  width: 600px;
  text-indent: 2em;
  letter-spacing: 10px;
}

CSS樣式效果圖

11、禁止用戶選中元素

有些時(shí)候不想讓用戶選中內(nèi)容，復(fù)制網(wǎng)站上文字內(nèi)容。

.wrap { 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

12、元素占滿整個(gè)屏幕

以往需要在做全屏遮罩功能的時(shí)候會(huì)設(shè)置height:100%。但是這種做法需要該遮罩層的所有父級(jí)元素都逐級(jí)設(shè)置高度才能使遮罩繼承高度屬性。所以可以使用100vh單位來(lái)實(shí)現(xiàn)。

.mask {
  width:100%;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
}

CSS樣式效果圖

以上就是為學(xué)員們整理的針對(duì)工作中對(duì)商品/新聞等標(biāo)題的樣式處理，彈窗做法的一些經(jīng)常遇到的css樣式實(shí)現(xiàn)方法。

如果覺(jué)得有用可以收藏關(guān)注，同時(shí)還可以留言說(shuō)出你想知道或者是遇到的不會(huì)的樣式處理，我們還將繼續(xù)推出后續(xù)內(nèi)容，繼續(xù)為大家解讀別的常用css實(shí)用技巧以及其他的前端開(kāi)發(fā)新技能，讓我們期待下一期吧。

文末領(lǐng)資料

Web前端設(shè)計(jì)秘籍——30個(gè)工作中常用的CSS樣式

友們，下午好！

都說(shuō)一張美美的圖能為文章增色三分！

那如果是一個(gè)交互的圖片樣式 + 幾張美美圖呢？這能為文章增色多少呢？

比如這種（樣式ID：90298）

使用這種樣式，即能有效的展示圖片，還能縮小文章空間，而且還與讀者存在互動(dòng)交互，想不想知道這種樣式怎么做出來(lái)呢？

上面兩種樣式都可以在樣式中心輸入ID搜索到。

但是，樣式中心的原樣式，都是四張圖片滑動(dòng)的，直接進(jìn)行換圖就可以使用了。

但如果要像三兒上面做的兩個(gè)樣式，一個(gè)是5張圖，一個(gè)是9張圖，就要進(jìn)HTML進(jìn)行修改了。

教程一（帶圖片說(shuō)明的樣式）

進(jìn)入到“HTML”模式，找到<section .........> </section>這段代碼，先選擇Ctrl+C復(fù)制。

然后在此段代碼結(jié)尾處敲回車鍵換行，再選擇Ctrl+V粘貼。

粘貼幾次，樣式就會(huì)在原有四張的基礎(chǔ)上多出幾張，胖友們可以根據(jù)自己的需求進(jìn)行多次粘貼。

教程二

進(jìn)入到“HTML”模式，找到<img src=........./>這段代碼，先選擇Ctrl+C復(fù)制，然后在此段代碼結(jié)尾處，再Ctrl+V粘貼。

同上個(gè)樣式，粘貼幾次，樣式就會(huì)在原有四張的基礎(chǔ)上多出幾張，胖友們可以根據(jù)自己的需求進(jìn)行多次粘貼。

為了樣式的美感，還是有三點(diǎn)建議給大家。

1、圖片請(qǐng)保持尺寸一致。否則會(huì)導(dǎo)致圖片層次不齊。

2、尺寸請(qǐng)500x500以上。否則可能會(huì)使圖片不清楚。

3、圖片大小盡可能小點(diǎn)。否則瀏覽時(shí)加載會(huì)不流暢。

更多好玩樣式，請(qǐng)進(jìn)樣式中心搜索“滾動(dòng)”

好了，本次教程就到這里~bye

在線咨詢

上一篇：「項(xiàng)目實(shí)戰(zhàn)」從終端到瀏覽器：實(shí)現(xiàn) ANSI 字體在前端頁(yè)面的彩色展示
下一篇：我是如何初識(shí)HTML，入前端的

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商

HTML 樣式

教程一（帶圖片說(shuō)明的樣式）

教程二

您的項(xiàng)目需求