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

HTML

前端基础之CSS标签样式

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

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

一：字體屬性

（1）寬/高

　　（1）width:為元素設置寬度

　　（2）height:為元素設置高度

PS：塊級標簽才能設置寬度/高度行內標簽存放文本大小

例如：

p{width: 30px;height: 30px;}

（2）字體樣式：

關鍵字：font-family

作用：更改字體的樣式

例如：

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

（3）字體大小:

關鍵字：font-size

作用：更改用戶的字體大小

例如：

p{font-size: 30px;}

（4）字重:

關鍵字：font-weight

作用：對字體加重或者減輕

例如：

{/*加重*/font-weight: bolder;/*減輕*/font-weight: lighter;}

（4）文字顏色:

關鍵字：color

作用：更改樣式的顏色

例如：

{/* 方式一*//*color: red;*//*方式二*//* color: rgb(255,255,255);*//* 方式三第四個參數調整透明度（0-1）*//*color: rgba(255,255,255,0.1); *//* 方式四*/color: #ff0000;} 修改顏色的四種方式

（5）文字對齊

關鍵字：text-aline

作用：調解文字位置

?例如：

/*居中*/text-align: center;/*左對齊默認*/text-align: left;/* 右對齊*/text-align: right;

（5）文字裝飾

關鍵字：text-decoration

作用：對文字進行裝飾

例

{/* 文字下面沒有任何裝飾適用于超鏈接超鏈接下沒有任何橫線*/text-decoration: none;/* 下劃線*/text-decoration: underline;/* 上劃線*/text-decoration: overline;/*穿過文字有點類似于刪除*/text-decoration: line-through;} 裝飾文字的四種常用方式

如：

（6）文字縮進

關鍵字：text-indent

作用：文本進行縮進

{text-indent:32px ;}

二：背景屬性

（1）關鍵字：background

（2）作用：對背景進行操作

{/*背景顏色*/background-color: red;/* 背景圖片*/background-image: url("111.png");/* 默認鋪滿整個屏幕*/background-repeat:repeat ;/* 禁止背景重復*/background-repeat: no-repeat;/* 水平方向重復*/background-repeat: repeat-x;/*垂直方向重復*/background-repeat: repeat-y;/*背景位置*/background-position: center;
}

（3）語句整合

例如：

background: red center url("111.png");

（4）使被裝飾的屬性固定不動

關鍵字：background-attachment: fixed;

例如：

<!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>圖片不動圖片樣式不動

三：邊框

關鍵字：border

作用：給被裝飾的對象加上邊框

（1）邊框屬性

　　（1）border-width:邊框粗細

　　（2）border-color：邊框顏色

　　（3）border-style：邊框樣式

（2）邊框樣式

?例如（1）：

{/*邊框顏色*/border-color: blue;/*邊框粗細*/border-width: 3px;/*邊框樣式*/border-style: dashed;}

（2）也可以單獨為某一個邊框設置樣式

例如（2）：

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

（3）border-radius：

作用：

（1）可以使邊框變的圓滑

（2）設置寬高為邊框的一半可以設置成一個圓

例如：

{width: 100px;height: 100px;border: 3px solid black;background-color: red;/*設置為邊框的一半*/border-radius: 50%;}

四：display屬性

（1）none：

　　（1）元素存在但是在瀏覽器中不存在

　　（2）瀏覽器中的空間也不存在

例如：

{ display: none; }

（2）bolck：將行內標簽轉換成塊標簽可以設置行內標簽的一些屬性值

例如：

{width: 100px;height: 100px;border: 3px solid red;/*將行內標簽轉換成塊標簽*/display: block;}

（3）inline：將塊級元素按行內元素顯示

例如：

.c1{width: 100px;height: 100px;border: 3px solid red;/*將塊標簽轉換成行標簽*/display: inline;}.c2{width: 100px;height: 100px;border: 3px solid blue;/*將塊標簽轉換成行標簽*/display: inline;}

（4）inline-block 使元素同時含有行內標簽以及塊標簽的特點

PS：

display:"none"與visibility:hidden的區別：

（1）visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。

（2）display:none: 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失

五：CSS盒子模型

（1）margin：控制標簽與標簽的距離

（2）border：內邊距與內容外的邊框

（3）padding：內部文本到邊框的距離

（4）content：內部文本的邊框

如圖：

?（1）marg外邊距

.margin-test {margin-top:5px;margin-right:10px;margin-bottom:15px;margin-left:20px; }

簡寫：

margin: 5px 10px 15px 20px;

順序：邊框順時針上右下左

（2）內填充：

.padding-test {padding-top: 5px;padding-right: 10px;padding-bottom: 15px;padding-left: 20px; } 補充padding的常用簡寫方式：（1）提供一個，用于四邊；（2）提供兩個，第一個用于上－下，第二個用于左－右；（3）如果提供三個，第一個用于上，第二個用于左－右，第三個用于下；（4）提供四個參數值，將按上－右－下－左的順序作用于四邊

六：float浮動

【1】基本概念

（1）在CSS樣式中任何元素都可以浮動

（2）浮動之后會生成一個塊級框不論其本身是何種元素

【2】浮動的特點：

（1）浮動的邊框可以向左或者向右移動如果碰到另外一個邊框會立馬停止浮動

（2）浮動的文本不在普通的文檔流中?

【3】取值方式

（1）left：左浮動

（2）right：右浮動

（3）none：沒有浮動

【4】clear:

作用：其規定了元素那一側不許浮動

?例如：

?PS:當上述元素三遇到浮動元素的時候會重新開辟一行

例如：

.c1{height: 1000px;float: left;width: 20%;background-color: bisque;}.c2{height: 1000px;float: right;width: 80%;background-color: antiquewhite;} 制作邊框

（2）清除浮動的三種方式

（1）固定高度

（2）偽元素選擇（最多）

（3）overflow hidden

例如：

{clear: both;display: block;content: '';}

?

五：overflow溢出屬性

（1）屬性：

　　（1）visible：默認屬性溢出的屬性不會被修剪

　　（2）hidden：內容會被修剪并且溢出內容不可見

　　（3）scroll：溢出的內容會被修剪但是瀏覽器會以滾輪的形式查看溢出的部分

　　（4）auto：如果內容被修剪瀏覽器會以滾動條查看修剪的內容

（2）方式設置：

　　（1）overflow：水平垂直方向均設置

　　（2）overflow-x：水平方向設置

　　（3）overflow-y：垂直方向設置

例如：

<!DOCTYPE HTML> <html> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>圓形的頭像示例</title><style>* {margin: 0;padding: 0;background-color: #eeeeee;}.header-img {width: 150px;height: 150px;border: 3px solid white;border-radius: 50%;overflow: hidden;}.header-img>img {width: 100%;}</style> </head> <body><div class="header-img"><img src="https://pic.cnblogs.com/avatar/1342004/20180304191536.png" alt=""> </div></body> </html> 圓形頭像設置

六：定位

關鍵字：position

（1）static：默認值不能當做定位的參照物

（2）relative（相對定位）：相當于自己當前的標簽

（3）absolute（絕對定位）：相對于已經定位的父標簽

例如：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>絕對定位</title><style>.c1 {height: 100px;width: 100px;background-color: red;float: left;}.c2 {height: 50px;width: 50px;background-color: #ff6700;float: right;margin-right: 400px;position: relative;}.c3 {height: 200px;width: 200px;background-color: green;position: absolute;top: 50px;}</style> </head> <body> <div class="c1"></div> <div class="c2"><div class="c3"></div> </div></body> </html>絕對定位絕對定位

（4）fixe（固定定位）：相對于瀏覽器窗口固定在某個位置

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>返回頂部示例</title><style>* {margin: 0;}.d1 {height: 1000px;background-color: #eeee;}.scrollTop {background-color: darkgrey;padding: 10px;text-align: center;position: fixed;right: 10px;bottom: 20px;}</style> </head> <body> <div class="d1">111</div> <div class="scrollTop">返回頂部</div> </body> </html>返回頂部按鈕樣式示例固定定位返回頂部

【2】

（1）：脫離文檔流

　　（1）浮動元素脫離文檔流

　　（2）絕對定位脫離文檔流

　　（3）固定定位脫離文檔流

（2）：不脫離文檔流

　　（1）相對定位不脫離文檔流

七：模態框

關鍵字：z-index

作用：設置對象的層疊順序

z-index 值表示誰壓著誰，數值大的壓蓋住數值小的，

只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index

z-index值沒有單位，就是一個正整數，默認的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰在上面壓著別人，定位了元素，永遠壓住沒有定位的元素。

從父現象：父親慫了，兒子再牛逼也沒用

例如：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>自定義模態框</title><style>.cover {background-color: rgba(0,0,0,0.65);position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 998;}.modal {background-color: white;position: fixed;width: 600px;height: 400px;left: 50%;top: 50%;margin: -200px 0 0 -300px;z-index: 1000;}</style> </head> <body><div class="cover"></div> <div class="modal"></div> </body> </html>自定義模態框示例模態框

八：opacity

（1）用來定義透明效果。取值范圍是0~1，0是完全透明，1是完全不透明。

（2）其不但能透明文本效果也可以透明圖片效果

轉載于:https://www.cnblogs.com/SR-Program/p/11469482.html

總結

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

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

上一篇：计算机系学天体物理,中科院南京天文光学技
下一篇：全球定位系统GPS简介