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