前端基础之CSS标签样式
一：字體屬性
（1）寬/高
（1）width:為元素設(shè)置寬度
（2）height:為元素設(shè)置高度
PS：塊級標(biāo)簽才能設(shè)置寬度/高度 行內(nèi)標(biāo)簽存放文本大小
例如：
p{width: 30px;height: 30px;}?
（2）字體樣式：
關(guān)鍵字：font-family
作用：更改字體的樣式
例如：
{font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif }?
（3）字體大小:
關(guān)鍵字：font-size
作用：更改用戶的字體大小
例如：
p{font-size: 30px;}?
（4）字重:
關(guān)鍵字：font-weight
作用：對字體加重或者減輕
例如：
{/*加重*/font-weight: bolder;/*減輕*/font-weight: lighter;}?
（4）文字顏色:
關(guān)鍵字：color
作用：更改樣式的顏色
例如：
{/* 方式一*//*color: red;*//*方式二*//* color: rgb(255,255,255);*//* 方式三第四個參數(shù)調(diào)整透明度（0-1）*//*color: rgba(255,255,255,0.1); *//* 方式四*/color: #ff0000;} 修改顏色的四種方式?
（5）文字對齊
關(guān)鍵字：text-aline
作用：調(diào)解文字位置
?例如：
/*居中*/text-align: center;/*左對齊 默認(rèn)*/text-align: left;/* 右對齊*/text-align: right;?
（5）文字裝飾
關(guān)鍵字：text-decoration
作用：對文字進(jìn)行裝飾
例
{/* 文字下面沒有任何裝飾 適用于超鏈接 超鏈接下沒有任何橫線*/text-decoration: none;/* 下劃線*/text-decoration: underline;/* 上劃線*/text-decoration: overline;/*穿過文字 有點類似于刪除*/text-decoration: line-through;} 裝飾文字的四種常用方式如：
?
（6）文字縮進(jìn)
關(guān)鍵字：text-indent
作用：文本進(jìn)行縮進(jìn)
{text-indent:32px ;}?
二：背景屬性
（1）關(guān)鍵字：background
（2）作用：對背景進(jìn)行操作
{/*背景顏色*/background-color: red;/* 背景圖片*/background-image: url("111.png");/* 默認(rèn)鋪滿整個屏幕*/background-repeat:repeat ;/* 禁止背景重復(fù)*/background-repeat: no-repeat;/* 水平方向重復(fù)*/background-repeat: repeat-x;/*垂直方向重復(fù)*/background-repeat: repeat-y;/*背景位置*/background-position: center;}
（3）語句整合
例如：
background: red center url("111.png");?
（4）使被裝飾的屬性 固定不動
關(guān)鍵字：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>圖片不動 圖片樣式不動?
三：邊框
關(guān)鍵字：border
作用：給被裝飾的對象加上邊框
（1）邊框?qū)傩?/p>
（1）border-width:邊框粗細(xì)
（2）border-color：邊框顏色
（3）border-style：邊框樣式
（2）邊框樣式
?例如（1）：
{/*邊框顏色*/border-color: blue;/*邊框粗細(xì)*/border-width: 3px;/*邊框樣式*/border-style: dashed;}（2）也可以單獨為某一個邊框設(shè)置樣式
例如（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）設(shè)置寬高為邊框的一半 可以設(shè)置成一個圓
例如：
{width: 100px;height: 100px;border: 3px solid black;background-color: red;/*設(shè)置為邊框的一半*/border-radius: 50%;}?
四：display屬性
（1）none：
（1）元素存在 但是在瀏覽器中不存在
（2）瀏覽器中的空間也不存在
例如：
{ display: none; }?
（2）bolck：將行內(nèi)標(biāo)簽轉(zhuǎn)換成塊標(biāo)簽 可以設(shè)置行內(nèi)標(biāo)簽的一些屬性值
例如：
{width: 100px;height: 100px;border: 3px solid red;/*將行內(nèi)標(biāo)簽 轉(zhuǎn)換成塊標(biāo)簽*/display: block;}?
（3）inline：將塊級元素 按行內(nèi)元素顯示
例如：
.c1{width: 100px;height: 100px;border: 3px solid red;/*將塊標(biāo)簽 轉(zhuǎn)換成行標(biāo)簽*/display: inline;}.c2{width: 100px;height: 100px;border: 3px solid blue;/*將塊標(biāo)簽轉(zhuǎn)換成行標(biāo)簽*/display: inline;}?
（4）inline-block 使元素同時含有行內(nèi)標(biāo)簽以及塊標(biāo)簽的特點
PS：
display:"none"與visibility:hidden的區(qū)別：
（1）visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
（2）display:none: 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失
?
五：CSS盒子模型
（1）margin：控制標(biāo)簽與標(biāo)簽的距離
（2）border：內(nèi)邊距與內(nèi)容外的邊框
（3）padding：內(nèi)部文本到邊框的距離
（4）content：內(nèi)部文本的邊框
如圖：
?
?
?（1）marg外邊距
.margin-test {margin-top:5px;margin-right:10px;margin-bottom:15px;margin-left:20px; }簡寫：
margin: 5px 10px 15px 20px;順序：邊框順時針 上右下左
?
（2）內(nèi)填充：
.padding-test {padding-top: 5px;padding-right: 10px;padding-bottom: 15px;padding-left: 20px; } 補(bǔ)充padding的常用簡寫方式： （1）提供一個，用于四邊； （2）提供兩個，第一個用于上－下，第二個用于左－右； （3）如果提供三個，第一個用于上，第二個用于左－右，第三個用于下； （4）提供四個參數(shù)值，將按上－右－下－左的順序作用于四邊?
六：float浮動
【1】基本概念
（1）在CSS樣式中任何元素都可以浮動
（2）浮動之后會生成一個塊級框 不論其本身是何種元素
?
【2】浮動的特點：
（1）浮動的邊框可以向左或者向右移動 如果碰到另外一個邊框會立馬停止浮動
（2）浮動的文本不在普通的文檔流中?
?
【3】取值方式
（1）left：左浮動
（2）right：右浮動
（3）none：沒有浮動
?
【4】clear:
作用：其規(guī)定了元素那一側(cè)不許浮動
?
?
?例如：
?
?PS:當(dāng)上述元素三遇到浮動元素的時候 會重新開辟一行
例如：
.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：默認(rèn)屬性溢出的屬性不會被修剪
（2）hidden：內(nèi)容會被修剪 并且溢出內(nèi)容不可見
（3）scroll：溢出的內(nèi)容會被修剪 但是瀏覽器會以滾輪的形式 查看溢出的部分
（4）auto：如果內(nèi)容被修剪 瀏覽器會以滾動條查看修剪的內(nèi)容
（2）方式設(shè)置：
（1）overflow：水平垂直方向均設(shè)置
（2）overflow-x：水平方向設(shè)置
（3）overflow-y：垂直方向設(shè)置
例如：
<!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> 圓形頭像設(shè)置?
六：定位
關(guān)鍵字：position
（1）static：默認(rèn)值 不能當(dāng)做定位的參照物
（2）relative（相對定位）：相當(dāng)于自己當(dāng)前的標(biāo)簽
（3）absolute（絕對定位）：相對于已經(jīng)定位的父標(biāo)簽
例如：
<!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）相對定位不脫離文檔流
?
七：模態(tài)框
關(guān)鍵字：z-index
作用：設(shè)置對象的層疊順序
例如：
<!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>自定義模態(tài)框</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>自定義模態(tài)框示例 模態(tài)框?
八：opacity
（1）用來定義透明效果。取值范圍是0~1，0是完全透明，1是完全不透明。
（2）其不但能透明文本效果 也可以透明圖片效果
?
轉(zhuǎn)載于:https://www.cnblogs.com/SR-Program/p/11469482.html
總結(jié)
以上是生活随笔為你收集整理的前端基础之CSS标签样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机系学天体物理,中科院南京天文光学技
- 下一篇： 前端学习之路CSS基础学习二