當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

前端三件套系例之CSS——CSS3基础样式

發(fā)布時(shí)間：2024/3/12 HTML 35 豆豆

生活随笔收集整理的這篇文章主要介紹了前端三件套系例之CSS——CSS3基础样式小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

- 1、寬和高
- - 案例
- 2、字體屬性
- - 2-1 文字字體
  - 2-2 字體大小
  - 2-3 字重（粗細(xì)）
  - 2-4 文本顏色
  - 2-5 總結(jié)
  - 2-6 案例
- 文字屬性
- - 3-1 文字對(duì)齊
  - 3-2 文字裝飾
  - 3-3 首行縮進(jìn)
  - 3-4 案例
- 4、背景屬性
- - 4-1 基本使用
  - 4-2 支持簡(jiǎn)寫
  - 4-3 有趣的例子（圖片不動(dòng)）
  - 4-4 案例
- 5、邊框
- - 5-1 邊框?qū)傩?/li>
  - 5-2邊框樣式
  - 5-3 案例
- 6、border-radius
- 7、display屬性（顯示樣式）
- - 7-1 介紹
  - 7-2 詳細(xì)
  - 7-3 案例

1、寬和高

width屬性可以為元素設(shè)置寬度。
height屬性可以為元素設(shè)置高度。
塊級(jí)標(biāo)簽才能設(shè)置寬度，內(nèi)聯(lián)標(biāo)簽的寬度由內(nèi)容來決定(行內(nèi)標(biāo)簽無法設(shè)置寬度，設(shè)置了也不會(huì)生效)。

案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>p {background-color: red;height: 200px;width: 400px;}span {background-color: green;height: 200px;width: 400px;/*行內(nèi)標(biāo)簽無法設(shè)置長(zhǎng)寬就算你寫了也不會(huì)生效*/}</style> </head> <body> <p>ppp</p> <span>span</span> </body> </html>

2、字體屬性

2-1 文字字體

font-family可以把多個(gè)字體名稱作為一個(gè)“回退”系統(tǒng)來保存。如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)。瀏覽器會(huì)使用它可識(shí)別的第一個(gè)值。
簡(jiǎn)單實(shí)例：

body {font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif }

2-2 字體大小

p {font-size: 14px; }

如果設(shè)置成inherit表示繼承父元素的字體大小值。

2-3 字重（粗細(xì)）

font-weight用來設(shè)置字體的字重（粗細(xì)）。

值描述

normal	默認(rèn)值，標(biāo)準(zhǔn)粗細(xì)
bold	粗體
bolder	更粗
lighter	更細(xì)
100~900	設(shè)置具體粗細(xì)，400等同于normal，而700等同于bold
inherit	繼承父元素字體的粗細(xì)值

2-4 文本顏色

顏色屬性被用來設(shè)置文字的顏色。
顏色是通過CSS最經(jīng)常的指定：

十六進(jìn)制值 - 如: **＃**FF0000
一個(gè)RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red

還有rgba(255,0,0,0.3)，第四個(gè)值為alpha, 指定了色彩的透明度/不透明度，它的范圍為0.0到1.0之間。

2-5 總結(jié)

/*字族：STSong作為首選字體, 微軟雅黑作為備用字體*/ font-family: "STSong", "微軟雅黑"; /*字體大小*/ font-size: 40px; /*字重：100、200、300、400、500、600、700、800、900，值越大字越粗*/ font-weight: 900; /*行高: 字體文本默認(rèn)在行高中垂直居中顯示*/ line-height: 200px; /*字劃線: overline(上劃線) | line-through(中劃線) | underline(下劃線) | none(取消劃線) */ text-decoration: overline; /*字間距*/ letter-spacing: 2px; /*詞間距*/ word-spacing: 5px; /*首行縮進(jìn)：1em相當(dāng)于一個(gè)字的寬度*/ text-indent: 2em; /*字體顏色*/ color: red; /* 文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右) */ text-align: center;

2-6 案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>p {/*font-family: "Arial Black","微軟雅黑","..."; !*第一個(gè)不生效就用后面的寫多個(gè)備用*!*//*font-size: 24px; !*字體大小*!*//*font-weight: inherit; !*bolder lighter 100~900 inherit繼承父元素的粗細(xì)值*!*//*color: red; !*直接寫顏色英文*!*//*color: #ee762e; !*顏色編號(hào)*!*//*color: rgb(128,23,45); !*三基色數(shù)字范圍0-255*!*//*color: rgba(23, 128, 91, 0.9); !*第四個(gè)參數(shù)是顏色的透明度范圍是0-1*!*//*當(dāng)你想要一些顏色的時(shí)候可以利用現(xiàn)成的工具1 pycharm提供的取色器2 qq或者微信截圖功能微信公眾號(hào):軟件管家...*/}</style> </head> <body><p>曹老板抬人！！！fuck off!</p> </body> </html>

文字屬性

3-1 文字對(duì)齊

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

值描述

left	左邊對(duì)齊默認(rèn)值
right	右對(duì)齊
center	居中對(duì)齊
justify	兩端對(duì)齊

3-2 文字裝飾

text-decoration 屬性用來給文字添加特殊效果。

值描述

none	默認(rèn)。定義標(biāo)準(zhǔn)的文本。
underline	定義文本下的一條線。
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線。
inherit	繼承父元素的text-decoration屬性的值。

常用的為去掉a標(biāo)簽?zāi)J(rèn)的自劃線：

a {text-decoration: none; }

3-3 首行縮進(jìn)

將段落的第一行縮進(jìn) 32像素：

p {text-indent: 32px; }

3-4 案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>p {/*text-align: center; !*居中*!*//*text-align: right;*//*text-align: left;*//*text-align: justify; !*兩端對(duì)齊*!*//*text-decoration: underline;*//*text-decoration: overline;*//*text-decoration: line-through;*//*text-decoration: none;*//*在html中有很多標(biāo)簽渲染出來的樣式效果是一樣的*/font-size: 16px;text-indent: 32px; /*縮進(jìn)32px*/}a {text-decoration: none; /*主要用于給a標(biāo)簽去掉自帶的下劃線需要掌握*/}</style> </head> <body>   <p>我要感謝我的導(dǎo)師，要不是他，我論文早寫完了（狗頭）,我要感謝我的導(dǎo)師，要不是他，我論文早寫完了（狗頭）,我要感謝我的導(dǎo)師，要不是他，我論文早寫完了（狗頭）</p> </body> </html>

4、背景屬性

4-1 基本使用

/*背景顏色*/ background-color: red; /*背景圖片*/ background-image: url('1.jpg'); /*背景重復(fù)repeat(默認(rèn)):背景圖片平鋪排滿整個(gè)網(wǎng)頁(yè)repeat-x：背景圖片只在水平方向上平鋪repeat-y：背景圖片只在垂直方向上平鋪no-repeat：背景圖片不平鋪 */ background-repeat: no-repeat; /*背景位置*/ background-position: left top; /*background-position: 200px 200px;*/

4-2 支持簡(jiǎn)寫

background:#336699 url('1.png') no-repeat left top;

使用背景圖片的一個(gè)常見案例就是很多網(wǎng)站會(huì)把很多小圖標(biāo)放在一張圖片上，然后根據(jù)位置去顯示圖片。減少頻繁的圖片請(qǐng)求。

4-3 有趣的例子（圖片不動(dòng)）

<!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>滾動(dòng)背景圖示例</title><style>* {margin: 0;}.box {width: 100%;height: 500px;background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg") center center;background-attachment: fixed;}.d1 {height: 500px;background-color: tomato;}.d2 {height: 500px;background-color: steelblue;}.d3 {height: 500px;background-color: mediumorchid;}</style> </head> <body><div class="d1"></div><div class="box"></div><div class="d2"></div><div class="d3"></div> </body> </html>

4-4 案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>div {height: 800px;width: 800px;/*background-color: red;*//*背景圖片*//*background-image: url("222.png"); !*默認(rèn)要全部鋪滿*!*//*background-repeat: no-repeat; !*不鋪*!*//*background-repeat: no-repeat; !*不鋪*!*//*background-repeat:repeat-x; *//*background-repeat:repeat-y; *//*其實(shí)瀏覽器不是一個(gè)平面是一個(gè)三維立體結(jié)構(gòu)z軸指向用戶越大離用戶越近*//*background-position:center center; !*第一個(gè)左第二個(gè)上*!*//*如果出現(xiàn)了多個(gè)屬性名前綴是一樣的情況一般情況下都可以簡(jiǎn)寫只寫前綴*/background: red url("222.png") no-repeat center center; /*只需要填上你想要加的參數(shù)即可位置沒有關(guān)系參數(shù)個(gè)數(shù)也不做限制加就顯示不加就用默認(rèn)的設(shè)置*/}</style> </head> <body><div></div> </body> </html>

5、邊框

5-1 邊框?qū)傩?/h3>
border-width
border-style
border-color
#i1 {border-width: 2px;border-style: solid;border-color: red; }
通常使用簡(jiǎn)寫方式：
#i1 {border: 2px solid red; }

5-2邊框樣式

值描述

none	無邊框。
dotted	點(diǎn)狀虛線邊框。
dashed	矩形虛線邊框。
solid	實(shí)線邊框。

除了可以統(tǒng)一設(shè)置邊框外還可以單獨(dú)為某一個(gè)邊框設(shè)置樣式，如下所示：

#i1 {border-top-style:dotted;border-top-color: red;border-right-style:solid;border-bottom-style:dotted;border-left-style:none; }

5-3 案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>p {background-color: red;border-width: 5px;border-style: solid;border-color: green;}div {/*border-left-width: 5px;*//*border-left-color: red;*//*border-left-style: dotted;*//*border-right-width: 10px;*//*border-right-color: greenyellow;*//*border-right-style: solid;*//*border-top-width: 15px;*//*border-top-color: deeppink;*//*border-top-style: dashed;*//*border-bottom-width: 10px;*//*border-bottom-color: tomato;*//*border-bottom-style: solid;*/border: 3px solid red; /*三者位置可以隨意寫*/}#d1 {background-color: greenyellow;height: 400px;width: 400px;border-radius: 50%; /*直接寫50%即可長(zhǎng)寬一樣就是圓不一樣就是橢圓*/}</style> </head> <body><p>窮人被diss到了哭泣.png</p> <div>媽拉個(gè)巴子,媽拉個(gè)巴子,媽拉個(gè)巴子,媽拉個(gè)巴子</div> <div id="d1"></div> </body> </html>

6、border-radius

用這個(gè)屬性能實(shí)現(xiàn)圓角邊框的效果。
將border-radius設(shè)置為長(zhǎng)或高的一半即可得到一個(gè)圓形。

#di{border-radius:50% }

7、display屬性（顯示樣式）

7-1 介紹

用于控制HTML元素的顯示效果。

值意義

display:”none”	HTML文檔中元素存在，但是在瀏覽器中不顯示,占用位置也讓出。一般用于配合JavaScript代碼使用。
display:”block”	默認(rèn)占滿整個(gè)頁(yè)面寬度，如果設(shè)置了指定寬度，則會(huì)用margin填充剩下的部分。
display:”inline”	按行內(nèi)元素顯示，此時(shí)再設(shè)置元素的width、height、margin-top、margin-bottom和float屬性都不會(huì)有什么影響。
display:”inline-block”	使元素同時(shí)具有行內(nèi)元素和塊級(jí)元素的特點(diǎn)。

display:”none”與visibility:hidden的區(qū)別：
visibility:hidden: 可以隱藏某個(gè)元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會(huì)影響布局。
display:none: 可以隱藏某個(gè)元素，且隱藏的元素不會(huì)占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會(huì)從頁(yè)面布局中消失。

7-2 詳細(xì)

HTML5預(yù)定義了很多系統(tǒng)標(biāo)簽，大家學(xué)習(xí)了html標(biāo)簽部分的時(shí)候，肯定注意到了，不同的標(biāo)簽在頁(yè)面中的顯示效果是不一樣的，比如兩個(gè)div之間默認(rèn)會(huì)換行顯示，而兩個(gè)span標(biāo)簽卻在一行來顯示，到底是什么樣式控制著標(biāo)簽這種顯示效果呢，那就是顯示樣式display來控制的。

display: block;

display: inline;

display: inline-block;

7-3 案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>/*#d1 {*//* !*display: none; !*隱藏標(biāo)簽不展示到前端頁(yè)面并且原來的位置也不再占有了但是還存在于文檔上*!*!*//* display: inline; !*將標(biāo)簽設(shè)置為行內(nèi)標(biāo)簽的特點(diǎn)*!*//*}*//*#d2 {*//* display: inline;*//*}*//*#d1 {*//* display: block; !*將標(biāo)簽設(shè)置成塊兒級(jí)標(biāo)簽的特點(diǎn)*!*//*}*//*#d2 {*//* display: block;*//*}*//*#d1 {*//* display: inline-block;*//*}*//*#d2 {*//* display: inline-block; !*標(biāo)簽即可以在一行顯示又可以設(shè)置長(zhǎng)寬*!*//*}*/</style> </head> <body> <div style="display: none">div1</div> <div>div2</div> <div style="visibility: hidden">單純的隱藏位置還在</div> <div>div4</div>      </body> </html>

總結(jié)

以上是生活随笔為你收集整理的前端三件套系例之CSS——CSS3基础样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：【JavaScript】关于手机中的触摸
下一篇： 2017年html5行业报告,云适配发布