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

CSS

CSS基础二

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

生活随笔收集整理的這篇文章主要介紹了 CSS基础二小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

CSS屬性相關(guān)

樣式操作：

（1）width:為元素設(shè)置寬度

（2）height:為元素設(shè)置高度

ps:塊兒級(jí)標(biāo)簽才能設(shè)置長(zhǎng)寬行內(nèi)標(biāo)簽設(shè)置長(zhǎng)寬沒(méi)有任何影響

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

文字操作

/*字體樣式：關(guān)鍵字：font-family作用：更改字體的樣式*/ {font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif }/*字體大小:關(guān)鍵字：font-size作用：更改用戶的字體大小*/ p{font-size: 30px;}/*文字顏色:關(guān)鍵字：color作用：更改樣式的顏色*/ {/*方式一*//*color: red;*//*方式二*//* color: rgb(255,255,255);*//*方式三*/color: #ff0000;}/*文字裝飾關(guān)鍵字：text-decoration作用：對(duì)文字進(jìn)行裝飾*/ {/* 文字下面沒(méi)有任何裝飾適用于超鏈接超鏈接下沒(méi)有任何橫線*/text-decoration: none;/* 下劃線*/text-decoration: underline;/* 上劃線*/text-decoration: overline;/*穿過(guò)文字有點(diǎn)類(lèi)似于刪除*/text-decoration: line-through;}/*文字對(duì)齊關(guān)鍵字：text-aline作用：調(diào)解文字位置*//*居中*/text-align: center;/*左對(duì)齊默認(rèn)*/text-align: left;/*右對(duì)齊*/text-align: right;/*兩端對(duì)齊*/text-align:justify/*字重:關(guān)鍵字：font-weight作用：對(duì)字體加重或者減輕*/ {/*加重*/font-weight: bolder;/*減輕*/font-weight: lighter;}/*）文字縮進(jìn)關(guān)鍵字：text-indent作用：文本進(jìn)行縮進(jìn)*/ {text-indent:32px ;}

背景屬性

（1）關(guān)鍵字：background

（2）作用：對(duì)背景進(jìn)行操作

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

使被裝飾的屬性固定不動(dòng)

關(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>滾動(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>圖片樣式不動(dòng) 圖片樣式不動(dòng) 支持簡(jiǎn)寫(xiě)backgroud:red url('') no-repeat center center背景圖片應(yīng)用場(chǎng)景所有瀏覽器你能夠看到的都是走網(wǎng)路請(qǐng)求傳輸過(guò)來(lái)的當(dāng)你的網(wǎng)站需要用到很多小圖標(biāo)的時(shí)候，可以將所有的小圖片放在一張圖片上，然后通過(guò)背景圖片的位置來(lái)控制顯示哪一個(gè)小圖片從而節(jié)省加載資源

邊框

關(guān)鍵字：border

作用：給被裝飾的對(duì)象加上邊框

（1）邊框?qū)傩?/span>

　　1、border-width:邊框粗細(xì)

　　2、border-color：邊框顏色

　　3、border-style：邊框樣式

（2）邊框樣式

/*顏色、粗細(xì)、樣式*/ {/*邊框顏色*/border-color: blue;/*邊框粗細(xì)*/border-width: 3px;/*邊框樣式*/border-style: dashed; } /*單獨(dú)為某一個(gè)邊框設(shè)置樣式*/ {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è)置成一個(gè)圓*/ {width: 100px;height: 100px;border: 3px solid black;background-color: red;/*設(shè)置為邊框的一半*/border-radius: 50%;}

display屬性

/*（1）none： ①元素存在但是在瀏覽器中不存在 ②瀏覽器中的空間也不存在*/ { 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：將塊級(jí)元素按行內(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;} .c3{ /*同時(shí)擁有行內(nèi)標(biāo)簽以及塊標(biāo)簽的特點(diǎn)*/display: inline-block;}

display:"none"與visibility:hidden的區(qū)別：

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

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

盒子模型

（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; } /*簡(jiǎn)寫(xiě)*/ margin: 5px 10px 15px 20px; 順序：邊框順時(shí)針（上右下左）

（2）內(nèi)填充：

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

補(bǔ)充padding的常用簡(jiǎn)寫(xiě)方式：

（1）提供一個(gè)，用于四邊；

（2）提供兩個(gè)，第一個(gè)是上下，第二個(gè)是左右

（3）如果是三個(gè)參數(shù)，第一個(gè)上，第二個(gè)是左右，第三個(gè)是下

（4）四個(gè)參數(shù)，上右下左

float浮動(dòng)

【1】基本概念

①、在CSS樣式中任何元素都可以浮動(dòng)

②、浮動(dòng)之后會(huì)生成一個(gè)塊級(jí)框不論其本身是何種元素

【2】浮動(dòng)的特點(diǎn)：

①、浮動(dòng)的邊框可以向左或者向右移動(dòng) 如果碰到另外一個(gè)邊框會(huì)立馬停止浮動(dòng)

②、浮動(dòng)的文本不在普通的文檔流中?

【3】取值方式

①、left：左浮動(dòng)

②、right：右浮動(dòng)

③、none：沒(méi)有浮動(dòng)

（浮動(dòng)會(huì)出現(xiàn)父標(biāo)簽塌陷的問(wèn)題，為了解決這個(gè)問(wèn)題我們會(huì)用到clear）

【4】clear

作用：清除浮動(dòng)帶來(lái)的影響

.clearfix:after{content:''display:block;clear:both} /*哪里塌陷就給誰(shuí)加一個(gè)clearfix類(lèi)屬性即可如果給當(dāng)前標(biāo)簽加沒(méi)有效果那么你可以考慮給目標(biāo)標(biāo)簽外層再套一個(gè)div 然后給這個(gè)新的div加*/

overflow溢出屬性

（1）屬性：

　?、佟isible：默認(rèn)屬性溢出的屬性不會(huì)被修剪

　?、?、hidden：內(nèi)容會(huì)被修剪并且溢出內(nèi)容不可見(jiàn)

　?、?、scroll：溢出的內(nèi)容會(huì)被修剪但是瀏覽器會(huì)以滾輪的形式查看溢出的部分

　?、堋uto：如果內(nèi)容被修剪瀏覽器會(huì)以滾動(dòng)條查看修剪的內(nèi)容

（2）方式設(shè)置：

　?、?、overflow：水平垂直方向均設(shè)置

　?、凇verflow-x：水平方向設(shè)置

　?、?、overflow-y：垂直方向設(shè)置

圓形頭像設(shè)置

* {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%;*/ /*左右拉伸*/ height: 100%; /*上下拉伸*/}

定位

（1）relative（相對(duì)定位）：相當(dāng)于自己當(dāng)前的標(biāo)簽

（2）absolute（絕對(duì)定位）：相對(duì)于已經(jīng)定位的父標(biāo)簽

（3）fixe（固定定位）：相對(duì)于瀏覽器窗口固定在某個(gè)位置

脫離文檔流和不脫離文檔流

（1）：脫離文檔流

　　①、浮動(dòng)元素脫離文檔流

　?、?、絕對(duì)定位脫離文檔流

　　③、固定定位脫離文檔流

（2）：不脫離文檔流

　　相對(duì)定位不脫離文檔流

模態(tài)框

關(guān)鍵字：z-index

作用：設(shè)置對(duì)象的層疊順序

z-index 值表示誰(shuí)壓著誰(shuí)，數(shù)值大的壓蓋住數(shù)值小的，

只有定位了的元素，才能有z-index,也就是說(shuō)，不管相對(duì)定位，絕對(duì)定位，固定定位，都可以使用z-index，而浮動(dòng)元素不能使用z-index

z-index值沒(méi)有單位，就是一個(gè)正整數(shù)，默認(rèn)的z-index值為0如果大家都沒(méi)有z-index值，或者z-index值一樣，那么誰(shuí)寫(xiě)在HTML后面，誰(shuí)在上面壓著別人，定位了元素，永遠(yuǎn)壓住沒(méi)有定位的元素。

從父現(xiàn)象：父親慫了，兒子再牛逼也沒(méi)用

<!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）用來(lái)定義透明效果。取值范圍是0~1，0是完全透明，1是完全不透明。

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

轉(zhuǎn)載于:https://www.cnblogs.com/AbrahamChen/p/11480881.html

總結(jié)

以上是生活随笔為你收集整理的CSS基础二的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

css
基础

上一篇：计算机物联网应用技术工资,物联网专业毕业
下一篇： CSS 选择器及常用属性介绍