CSS浮动+背景图片+边框+文字排版+段落设置
生活随笔
收集整理的這篇文章主要介紹了
CSS浮动+背景图片+边框+文字排版+段落设置
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一.CSS浮動(dòng)
1.簡(jiǎn)介
默認(rèn)的框是上下移動(dòng),CSS浮動(dòng)可以控制浮動(dòng)的框向左或者向右移動(dòng)float屬性屬性值 說(shuō)明 left 元素向左浮動(dòng) right 元素向右浮動(dòng) none 默認(rèn)值,元素不浮動(dòng)浮動(dòng)意思是取消原來(lái)所占的一行,讓浮動(dòng)標(biāo)簽后面的一個(gè)標(biāo)簽樣式接上浮動(dòng)標(biāo)簽的樣式 <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">.div {/* float: left; *//* margin-left: 100px; */}/* 浮動(dòng)意思是取消原來(lái)所占的一行,讓浮動(dòng)標(biāo)簽后面的一個(gè)標(biāo)簽樣式接上浮動(dòng)標(biāo)簽的樣式 */#div1 {/* left表示左浮動(dòng)right表示右浮動(dòng)none表示不浮動(dòng)*/float: left;}#div2 {float: left;}#div3 {float: left;}</style></head><body><div id="div1" class="div" style="background-color: red;">蕪湖,起飛</div><div id="div2" class="div" style="background-color: yellow;">啊哈,金色傳說(shuō)</div><div id="div3" class="div" style="background-color: aqua;">這把我門(mén)就遇到了高手了</div><!-- 清除浮動(dòng) --><div id="div4" class="div" style="clear: both;">外幣外幣,外幣巴布</div></body> </html>2.CSS浮動(dòng)圖片
當(dāng)對(duì)圖片進(jìn)行浮動(dòng)時(shí),圖片會(huì)取消邊框,按照浮動(dòng)順序排列; 當(dāng)調(diào)整窗口時(shí),圖片大小不變,會(huì)自動(dòng)調(diào)整位置 <!DOCTYPE html> <html><head><meta charset="utf-8"><title>css浮動(dòng)圖片</title><style type="text/css">img{float: left;}</style></head><body><img src="img/girl1.jpg" width="400px" height="300px"><img src="img/girl2.jpg" width="400px" height="300px"><img src="img/girl3.jpg" width="400px" height="300px"><img src="img/girl4.jpg" width="400px" height="300px"></body> </html>3.邊框塌陷
作用:清除浮動(dòng)屬性值 說(shuō)明 left 在左側(cè)不允許出現(xiàn)浮動(dòng)元素 right 在右側(cè)不允許出現(xiàn)浮動(dòng)元素 both 在左、右兩側(cè)不允許浮動(dòng)元素 none 默認(rèn)值。允許浮動(dòng)元素出現(xiàn)在兩側(cè) <!DOCTYPE html> <html><head><meta charset="utf-8"><title>css清除浮動(dòng)</title><style type="text/css">img {float: left;margin-left: 20px;}#div2{clear: both;}</style></head><body><div id="div1">圖片</div><img src="img/girl1.jpg" width="400px" height="300px"><img src="img/girl2.jpg" width="400px" height="300px"><!-- 清除浮動(dòng) 如果不添加clear,文字會(huì)出現(xiàn)在圖片右側(cè)--><div id="div2">圖片2</div><img src="img/girl3.jpg" width="400px" height="300px"><img src="img/girl4.jpg" width="400px" height="300px"><img src="img/girl5.jpg" width="400px" height="300px" ></body> </html>4.display屬性
屬性值 說(shuō)明 block 塊級(jí)元素的默認(rèn)值，元素會(huì)被顯示為塊級(jí)元素，該元素前后會(huì)帶有換行符 inline 內(nèi)聯(lián)元素的默認(rèn)值。元素會(huì)被顯示為內(nèi)聯(lián)元素，該元素前后沒(méi)有換行符 inline-block 行內(nèi)塊元素，元素既具有內(nèi)聯(lián)元素的特性，也具有塊元素的特性 none 設(shè)置元素不會(huì)被顯示塊元素排在一起有兩種方法： inline-block float <!DOCTYPE html> <html><head><meta charset="utf-8"><title>display屬性</title><style type="text/css">p{background-color: red;display: inline;}</style></head><body><p>蕪湖起飛</p><p>外幣外幣</p></body> </html>二.CSS屬性
1.字體的設(shè)置
1.font-family設(shè)置字體形式,如黑體隸書(shū)楷書(shū)等 2.font-size:絕對(duì)尺寸/關(guān)鍵字/相對(duì)尺寸/百分比關(guān)鍵字:xx-small(極小),x-small（較小）,smaller,small（小）,medium（標(biāo)準(zhǔn)）,large（大） 3.font-style 設(shè)置字體的樣式font-style 設(shè)置字體的樣式（設(shè)置字體是否為斜體字）normal----正常顯示字體italic---斜體字oblique--歪斜體（傾斜角度大一點(diǎn)） 4.font-weight 設(shè)置字體的加粗取值：normal ---- 正常顯示bold ----粗體（數(shù)字700粗細(xì)值）bolder ---加粗lighter ---細(xì)體（比正常字體稍微細(xì)一點(diǎn)）number ----數(shù)字型（一般整百設(shè)置，有9個(gè)級(jí)別（100----900）數(shù)字取值越大越粗） 5.text-shadow設(shè)置字體的陰影從左到右依次為陰影的左右距離,上下距離,陰影范圍,陰影顏色 6.font-variant 設(shè)置字體的變體設(shè)置字體是否顯示為小型的大寫(xiě)字母主要用于設(shè)置英文字體normal --正常字體small-caps 表示英文字母顯示為小型的大寫(xiě)字母 <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">body{color: red;font-family: 楷體;font-style: normal;font-weight: bold;/* text-shadow設(shè)置字體的陰影 *//* 左右位置 上下位置 陰影范圍 陰影顏色 */text-shadow: 1px 1px 5px aqua;}h2{/* font-size設(shè)置字體大小 */font-size: 100px;color: #000000;font-style: italic;font-weight: normal;}div{font-size: x-large;font-style: oblique;font-weight: lighter;}#div2{font-variant: small-caps;}#div3{font-variant: normal;}</style></head><body><h1>蕪湖起飛</h1><h2>外幣外幣</h2><p>啊哈,金色傳說(shuō)</p><div id="div1">這把我們就遇到了高手了</div><div id="div2">HelloWorld!</div><div id="div3">buffterflaay</div></body> </html>2.顏色的設(shè)置
1.color 設(shè)置顏色 2.background-color設(shè)置背景顏色 3.background-image設(shè)置背景圖片 <!DOCTYPE html> <html><head><meta charset="utf-8"><title>顏色的設(shè)置</title><style type="text/css">#div1{color:red;}#div2{background-color: #FFD700;}.div{background-image: url(img/girl1.jpg);}</style></head><body><div id="div1">外幣外幣,外幣巴布</div><div id="div2">飛吧</div><div id="div3" class="div">蕪湖</div><div id="div4" class="div">起飛</div></body> </html>3.背景的設(shè)置
(1)背景的顏色+圖片+尺寸
1.background-color設(shè)置背景顏色 2.background-image設(shè)置背景圖片 3.background-size設(shè)置背景圖片的尺寸,第一個(gè)參數(shù)表示左右拉伸,第二個(gè)參數(shù)表示上下拉伸 4. background-repeat設(shè)置背景圖片是否重復(fù)設(shè)置背景圖片總是在水平和垂直方向重復(fù)顯示鋪平整個(gè)網(wǎng)頁(yè)。repeat 背景圖片在水平和垂直方向平鋪repeat-x 背景圖片在水平方向平鋪repeat-y 背景圖片在垂直方向平鋪no-repeat 背景圖片不平鋪 5.background-attachment設(shè)置背景圖片是否隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)scroll ---表示背景圖片隨著滾動(dòng)條的移動(dòng)而移動(dòng)fixed---表示背景圖片固定在頁(yè)面上不動(dòng)，不隨滾動(dòng)條移動(dòng)而移動(dòng) <!DOCTYPE html> <html><head><meta charset="utf-8"><title>背景的設(shè)置</title><style type="text/css">body{background-image: url(img/girl3.jpg);/* 是否隨著滾動(dòng)條的滾動(dòng)而滾動(dòng) */background-attachment: scroll;/* 設(shè)置圖片不平鋪 */background-repeat: no-repeat;/* 設(shè)置圖片尺寸 */background-size: 800px 1800px;}/* 字出現(xiàn)在圖片上,且字和圖片一起隨著滾動(dòng)條的滾動(dòng)而滾動(dòng) */#div1{height: 50rem;}</style></head><body><div id="div1">蕪湖</div></body> </html>(2)背景圖片的位置
background-position:關(guān)鍵字 百分比 位置說(shuō)明top left 0% 0% 左上位置top center 50% 0% 靠上居中top right 100% 0% 右上位置left center 0% 50% 靠左居中center center 50% 50% 正中位置right center 100% 50% 靠右居中bottom left 0% 100% 左下位置bottom center 50% 100% 靠下居中bottom right 100% 100% 右下位置 <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{width: 1400px;height: 1100px;background-image: url(img/bb.png);background-repeat: no-repeat;border: 1px #00FFFF solid;/* 設(shè)置圖片的位置 */background-position: right center;}</style></head><body><div id="div1" style="height: 800px;"></div></body> </html>4.邊框的設(shè)置
(1)邊框的基本設(shè)置
邊框線條的粗細(xì) 邊框的顏色 邊框的粗細(xì) border: 1px black solid; 1.邊框的寬度border-width基本語(yǔ)句：border-widthborder-top-width 上寬border-bottom-width 下寬border-left-width 左寬border-right-width 右寬取值；thin ----細(xì)邊框medium ---中等邊框thick--粗邊框長(zhǎng)度---數(shù)字 2.邊框的顏色border-colorborder-top-colorborder-bottom-colorborder-left-colorborder-right-color 3.邊距border邊距指的是設(shè)置網(wǎng)頁(yè)中某個(gè)元素的四邊和網(wǎng)頁(yè)中其他元素之間的空白距離上邊距 margin-top下邊距 margin-bottom左邊距 margin-left右邊距 margin-right <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#div1 {width: 300px;height: 400px;/* border: 1px red solid; */border-width: 10px;border-color: red;border-style: solid;/* 上邊框的寬 */border-top-width: 1px;/* 下邊框的顏色 */border-bottom-color: #FFD700;/* 左邊框的格式 */border-left-style: none;/* 上邊距 */margin-top: 100px;}</style></head><body><div id="div1"></div></body> </html>(2)邊框的圓角和陰影
border-radius設(shè)置邊框圓角,注意先把邊框設(shè)置后再設(shè)置圓角div { border:2px solid; border-radius:25px; }box-shadow設(shè)置邊框陰影 <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{width: 300px;height: 400px;border: 1px darkred solid;background-image: url(img/girl2.jpg);background-repeat: no-repeat;/* 設(shè)置邊框的圓角 */border-radius: 10px;/* 設(shè)置邊框的陰影 */box-shadow: 1px 1px 1px #8B0000}</style></head><body><div id="div1"></div></body> </html>(3)內(nèi)邊距
用來(lái)設(shè)置邊框和其內(nèi)部的元素之間的空白距離上邊距 padding-top距離頂部的距離下邊距 padding-bottom左邊距 padding-left右邊距 padding-right 注意:添加距離后,會(huì)把原有的邊框進(jìn)行擴(kuò)大如果想要不擴(kuò)大原有的邊框,通過(guò)設(shè)置box-sizing為:border-box即可 <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{width: 400px;height: 300px;border: 1px #000000 solid;/* 外邊距 */margin-top: 100px;/* 內(nèi)邊距 */padding-left: 100px;padding-top: 100px;/* 不擴(kuò)大原有的邊框 */box-sizing: border-box;}</style></head><body><div id="div1">蕪湖,起飛</div></body> </html>5.CSS對(duì)文字的排版
1.letter-spacing,調(diào)整字符間距,用來(lái)控制字符之間的間距，這個(gè)間距實(shí)際上就是在瀏覽器中所顯示的字符間的空格距離。取值：normal ---表示正常顯示（默認(rèn)）長(zhǎng)度--可以使用負(fù)數(shù)，帶上單位單位px(像素) 2.添加下劃線+刪除線等text-decoration屬性的取值：underline----添加下劃線overline---添加上劃線line-through--添加刪除線blink---添加閃爍效果（只能在Netscape的瀏覽器中正常顯示）none--沒(méi)有任何的修飾 3.文本的對(duì)齊方式text-align用來(lái)控制文本的排列和對(duì)齊方式屬性的取值：left--左對(duì)齊right--右對(duì)齊center--居中對(duì)齊justify--兩端對(duì)齊 <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{/* letter-spacing,調(diào)整字符間距 */letter-spacing: 2px;/* 添加下劃線 *//* text-decoration: underline; *//* 添加刪除線 */text-decoration: line-through;/* 文本的對(duì)齊方式 */text-align: center;}</style></head><body><div id="div1">出題人一到店，所有喝酒的人便都看著他笑，有的叫道，“出題人，你又出景點(diǎn)了！”他不回答，對(duì)柜里說(shuō)，“溫兩碗酒，要一疊景點(diǎn)報(bào)告。”便排出九張?jiān)嚲怼Ｋ麄冇止室獾母呗暼碌?#xff0c;“你一定又欺負(fù)高考考生了！“出題人睜大眼睛說(shuō)，“你怎么這樣憑空污人清白……”“什么清白？我昨天親眼見(jiàn)你偷偷溜進(jìn)胡夫金字塔，被巴耶克吊著打。”出題人便漲紅了臉，額上的青筋條條綻出，爭(zhēng)辯道，“偷入景點(diǎn)不能算偷……潛入！……讀書(shū)人的事，能算偷么？”接連便是難懂的話，什么“葛軍我大哥”，什么“巴黎圣母院”之類(lèi)，引得眾人都哄笑起來(lái)：店內(nèi)外充滿了快活的空氣。</div></body> </html>6.字母大小寫(xiě)轉(zhuǎn)換
text-transform: uppercase;轉(zhuǎn)換為大寫(xiě) text-transform: lowercase;轉(zhuǎn)換為小寫(xiě) <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{/* text-transform: uppercase; */text-transform: lowercase;}</style></head><body><div id="div1">With the rapid development of computer technology, information security has become a major problem in thedevelopment of the Internet. Secret sharing is an important guarantee mechanism to ensure information security. Itcan share secrets among a group of participants and provide a good security mechanism for the confidentiality of thekey, so it has been widely used.</div></body> </html>7.段落的設(shè)置
text-indent 用來(lái)控制每個(gè)段落的首行縮進(jìn)的距離。屬性取值：長(zhǎng)度（數(shù)字）帶上單位百分比相對(duì)于上一級(jí)元素的寬度 em 倍數(shù)對(duì)p標(biāo)簽中的文本進(jìn)行首行縮進(jìn)line-height: 2em;設(shè)置行高 <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#p1{/* 首行縮進(jìn)兩個(gè)字符 */text-indent: 2em;}#p2{/* 設(shè)置行高 */line-height: 2em;}</style></head><body><p id="p1">美國(guó)參眾兩院于 1948 年 6 月同意美國(guó)加入世衛(wèi)組織時(shí)的聯(lián)合決議案（jointresolution）中其實(shí)有相關(guān)規(guī)定。</p><p id="p2">決議案的第四條款提到：因應(yīng)世衛(wèi)組織章程沒(méi)有關(guān)于退會(huì)之條文，美國(guó)保留退出組織之權(quán)利，但需在一年前提出（one yearnotice），且美國(guó)應(yīng)已付清對(duì)世衛(wèi)組織的一切債務(wù)。這是當(dāng)時(shí)美國(guó)加入世衛(wèi)組織時(shí)，認(rèn)可的條款。也就是說(shuō)即使美國(guó)國(guó)會(huì)應(yīng)特朗普要求，同意通過(guò)退出世衛(wèi)組織，也至少是2021年7月以后。并且付清對(duì)世衛(wèi)組織的一切債務(wù)。美國(guó)人在世衛(wèi)組織有一萬(wàn)多員工，世衛(wèi)組織的費(fèi)用都是用來(lái)發(fā)工資，做研究燒錢(qián)。其中很大一部分是被美國(guó)人拿走了，包括工資和研發(fā)經(jīng)費(fèi)。不可能這么輕易一句話就退出，我無(wú)法猜測(cè)如果美國(guó)真的這么輕飄飄的拍拍屁股走人，世界會(huì)怎么看待美國(guó)加入的組織，后面大家都會(huì)后怕，你美國(guó)人來(lái)拿工資，燒研發(fā)經(jīng)費(fèi)，又不付清債務(wù)就跑了。</p></body> </html>總結(jié)
以上是生活随笔為你收集整理的CSS浮动+背景图片+边框+文字排版+段落设置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： C# 自制微信登录窗口，100%还原，数
- 下一篇： CSS核心基础