當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2024/3/12 HTML 33 豆豆

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

文章目錄

- 1、寬和高
- - 案例
- 2、字體屬性
- - 2-1 文字字體
  - 2-2 字體大小
  - 2-3 字重（粗細）
  - 2-4 文本顏色
  - 2-5 總結
  - 2-6 案例
- 文字屬性
- - 3-1 文字對齊
  - 3-2 文字裝飾
  - 3-3 首行縮進
  - 3-4 案例
- 4、背景屬性
- - 4-1 基本使用
  - 4-2 支持簡寫
  - 4-3 有趣的例子（圖片不動）
  - 4-4 案例
- 5、邊框
- - 5-1 邊框屬性
  - 5-2邊框樣式
  - 5-3 案例
- 6、border-radius
- 7、display屬性（顯示樣式）
- - 7-1 介紹
  - 7-2 詳細
  - 7-3 案例

1、寬和高

width屬性可以為元素設置寬度。
height屬性可以為元素設置高度。
塊級標簽才能設置寬度，內聯標簽的寬度由內容來決定(行內標簽無法設置寬度，設置了也不會生效)。

案例

<!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;/*行內標簽無法設置長寬就算你寫了也不會生效*/}</style> </head> <body> <p>ppp</p> <span>span</span> </body> </html>

2、字體屬性

2-1 文字字體

font-family可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。
簡單實例：

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

2-2 字體大小

p {font-size: 14px; }

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

2-3 字重（粗細）

font-weight用來設置字體的字重（粗細）。

值描述

normal	默認值，標準粗細
bold	粗體
bolder	更粗
lighter	更細
100~900	設置具體粗細，400等同于normal，而700等同于bold
inherit	繼承父元素字體的粗細值

2-4 文本顏色

顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經常的指定：

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

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

2-5 總結

/*字族：STSong作為首選字體, 微軟雅黑作為備用字體*/ font-family: "STSong", "微軟雅黑"; /*字體大小*/ font-size: 40px; /*字重：100、200、300、400、500、600、700、800、900，值越大字越粗*/ font-weight: 900; /*行高: 字體文本默認在行高中垂直居中顯示*/ line-height: 200px; /*字劃線: overline(上劃線) | line-through(中劃線) | underline(下劃線) | none(取消劃線) */ text-decoration: overline; /*字間距*/ letter-spacing: 2px; /*詞間距*/ word-spacing: 5px; /*首行縮進：1em相當于一個字的寬度*/ 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","微軟雅黑","..."; !*第一個不生效就用后面的寫多個備用*!*//*font-size: 24px; !*字體大小*!*//*font-weight: inherit; !*bolder lighter 100~900 inherit繼承父元素的粗細值*!*//*color: red; !*直接寫顏色英文*!*//*color: #ee762e; !*顏色編號*!*//*color: rgb(128,23,45); !*三基色數字范圍0-255*!*//*color: rgba(23, 128, 91, 0.9); !*第四個參數是顏色的透明度范圍是0-1*!*//*當你想要一些顏色的時候可以利用現成的工具1 pycharm提供的取色器2 qq或者微信截圖功能微信公眾號:軟件管家...*/}</style> </head> <body><p>曹老板抬人！！！fuck off!</p> </body> </html>

文字屬性

3-1 文字對齊

text-align 屬性規定元素中的文本的水平對齊方式。

值描述

left	左邊對齊默認值
right	右對齊
center	居中對齊
justify	兩端對齊

3-2 文字裝飾

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

值描述

none	默認。定義標準的文本。
underline	定義文本下的一條線。
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線。
inherit	繼承父元素的text-decoration屬性的值。

常用的為去掉a標簽默認的自劃線：

a {text-decoration: none; }

3-3 首行縮進

將段落的第一行縮進 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; !*兩端對齊*!*//*text-decoration: underline;*//*text-decoration: overline;*//*text-decoration: line-through;*//*text-decoration: none;*//*在html中有很多標簽渲染出來的樣式效果是一樣的*/font-size: 16px;text-indent: 32px; /*縮進32px*/}a {text-decoration: none; /*主要用于給a標簽去掉自帶的下劃線需要掌握*/}</style> </head> <body>   <p>我要感謝我的導師，要不是他，我論文早寫完了（狗頭）,我要感謝我的導師，要不是他，我論文早寫完了（狗頭）,我要感謝我的導師，要不是他，我論文早寫完了（狗頭）</p> </body> </html>

4、背景屬性

4-1 基本使用

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

4-2 支持簡寫

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

使用背景圖片的一個常見案例就是很多網站會把很多小圖標放在一張圖片上，然后根據位置去顯示圖片。減少頻繁的圖片請求。

4-3 有趣的例子（圖片不動）

<!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>滾動背景圖示例</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"); !*默認要全部鋪滿*!*//*background-repeat: no-repeat; !*不鋪*!*//*background-repeat: no-repeat; !*不鋪*!*//*background-repeat:repeat-x; *//*background-repeat:repeat-y; *//*其實瀏覽器不是一個平面是一個三維立體結構z軸指向用戶越大離用戶越近*//*background-position:center center; !*第一個左第二個上*!*//*如果出現了多個屬性名前綴是一樣的情況一般情況下都可以簡寫只寫前綴*/background: red url("222.png") no-repeat center center; /*只需要填上你想要加的參數即可位置沒有關系參數個數也不做限制加就顯示不加就用默認的設置*/}</style> </head> <body><div></div> </body> </html>

5、邊框

5-1 邊框屬性

border-width
border-style
border-color

#i1 {border-width: 2px;border-style: solid;border-color: red; }

通常使用簡寫方式：

#i1 {border: 2px solid red; }

5-2邊框樣式

值描述

none	無邊框。
dotted	點狀虛線邊框。
dashed	矩形虛線邊框。
solid	實線邊框。

除了可以統一設置邊框外還可以單獨為某一個邊框設置樣式，如下所示：

#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%即可長寬一樣就是圓不一樣就是橢圓*/}</style> </head> <body><p>窮人被diss到了哭泣.png</p> <div>媽拉個巴子,媽拉個巴子,媽拉個巴子,媽拉個巴子</div> <div id="d1"></div> </body> </html>

6、border-radius

用這個屬性能實現圓角邊框的效果。
將border-radius設置為長或高的一半即可得到一個圓形。

#di{border-radius:50% }

7、display屬性（顯示樣式）

7-1 介紹

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

值意義

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

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

7-2 詳細

HTML5預定義了很多系統標簽，大家學習了html標簽部分的時候，肯定注意到了，不同的標簽在頁面中的顯示效果是不一樣的，比如兩個div之間默認會換行顯示，而兩個span標簽卻在一行來顯示，到底是什么樣式控制著標簽這種顯示效果呢，那就是顯示樣式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; !*隱藏標簽不展示到前端頁面并且原來的位置也不再占有了但是還存在于文檔上*!*!*//* display: inline; !*將標簽設置為行內標簽的特點*!*//*}*//*#d2 {*//* display: inline;*//*}*//*#d1 {*//* display: block; !*將標簽設置成塊兒級標簽的特點*!*//*}*//*#d2 {*//* display: block;*//*}*//*#d1 {*//* display: inline-block;*//*}*//*#d2 {*//* display: inline-block; !*標簽即可以在一行顯示又可以設置長寬*!*//*}*/</style> </head> <body> <div style="display: none">div1</div> <div>div2</div> <div style="visibility: hidden">單純的隱藏位置還在</div> <div>div4</div>      </body> </html>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【JavaScript】关于手机中的触摸
下一篇：互联网日报 | 5月9日星期日 | 特