當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

java基础57 css样式、选择器和css定位（网页知识）

發布時間：2023/12/10 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 java基础57 css样式、选择器和css定位（网页知识）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文知識點（目錄）：

??? 1、CSS樣式
??? 2、選擇器
??? 3、CSS定位

1、CSS樣式

??? 1.html 在一個網頁中負責的是一個頁面的結構
??? 2.css(層疊樣式表)在一個頁面中負責了一個頁面的樣式.

css文檔（教程）：http://www.w3school.com.cn/css/index.asp

1.1、編寫css代碼的方式

第一種方式：在style標簽中編寫css代碼。? 缺點：只能用于本頁中復用性不強.

格式: <style type="text/css"> 編寫css的代碼 </style>

第二種方式：可以引入外部的css文件（推薦使用）
?? ?方式1：使用link標簽

格式：<link href="css文件的路徑" rel="stylesheep"/>

??? 方式2:使用style引入

格式:<style type="text/css">@import url(路徑);</style>?? ??? ????

第三種方式：直接在html標簽中使用style屬性編寫。?? 缺點：只能本標簽中，復用性較差，不推薦使用??

1.2、實例

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>css樣式練習</title> 6 </head> 7  30  31 <style type="text/css"> 32 a{ 33 color:#00FF00; 34 text-decoration:none;/* 去掉下劃線 */ 35 font-size:24px; 36 } 37 div{ 38 text-align:center; 39 } 40 </style> 41 42  43 <link href="css1.css" rel="stylesheet"/> 44  45 <style type="text/css"> 46 @import url("css1.css"); 47 </style> 48 49 <body> 50 <div>  51 <a href="#" style="color:#0000FF ">新聞標題1</a>    52 <a href="#">新聞標題2</a>    53 <a href="#">新聞標題3</a>    54 <a href="#">新聞標題4</a>    55 <a href="#">新聞標題5</a>    56 </div> 57 </body> 58 </html>

下面是導入css1.css文件后的效果圖

?1.3、附錄（小知識點）：??????? 下面相關屬性的詳細解析：http://www.w3school.com.cn/css/index.asp

1 （小知識1） 2 <style type="text/css"> 3 table{ 4 background-color:#00FF00;/*背景顏色*/ 5 border-color:#000000;/*邊框顏色*/ 6 } 7 th:hover{/*當有鼠標懸停在鏈接上的時候，就變顏色*/ 8 background-color:#FF0000; 9 } 10 </style> 11 12 （小知識2） 13 <style type="text/css"> 14 body{ 15 background-image:url(newscreen2152439.jpg);/*背景圖片*/ 16 background-repeat:no-repeat;/*背景重復（比如，一張小的背景圖放到網頁上，默認情況下是鋪滿整個屏幕的，可用此屬性去掉重復的，只剩一張，即：不用鋪滿屏幕）*/ 17 background-position:500px 10px;/*背景位置（設置背景圖的位置）*/ 18 } 19 div{ 20 margin-left:560px;/*邊緣離左邊多遠（即：左往右移動多遠的距離）*/ 21 margin-top:272px;/*邊緣離頭部多遠（即：上往下移動多遠的距離）*/ 22 color:#CCFF00;/*顏色*/ 23 text-decoration:none;;/*文字修飾*/ 24 text-transform:uppercase;;/*是字母改變成...樣（比如：小寫字母變成了大寫字母）*/ 25 } 26 span{ 27 margin-left:58px; 28 } 29 </style> 30 31 （小知識3） 32 <style type="text/css"> 33 table{ 34 border-collapse:collapse;/*作用：使表格中的單元格間的距離為零（即：最終效果是合成了一條線）*/ 35 /*border-spacing:20px;*/ /*設置單元格間距的大小*/ 36 caption-side:top;/*標題的位置*/ 37 table-layout:fixed;/*表格排版*/ 38 border-style:dashed solid double;/*邊框樣式*/ 39 border-bottom-color:#99FF00;/*邊框底部的顏色*/ 40 } 41 </style>

2、選擇器

選擇器：選擇器的作用就是找到對應的數據進行樣式化

1.標簽選擇器：找到所有的指定標簽進行格式化

格式:標簽名{樣式1,樣式2.......}

2.類選擇器：使用類選擇器首先要給html標簽指定對應的class屬性值

格式:.class屬性值{樣式1:樣式2........}?

3.ID選擇器：首先個給html元素添加一個id屬性值

格式:#id屬性值{樣式1:樣式2........}

4.交集選擇器：就是對選擇1中的選擇器2里面的數據經行樣式化

格式:選擇器1 選擇器2{樣式1,樣式......}

5.并集選擇器

格式:選擇器1,選擇器2{樣式1,樣式2.....}

6.通配選擇器:

格式：
*{樣式1,樣式2....}

7.偽類選擇器：偽類選擇器就是對元素處于某種狀態下進行樣式的

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>選擇器的練習</title> 6 </head> 7 <style type="text/css"> 8 /* 9 偽類選擇器:偽類選擇器就是對元素處于某種狀態下進行樣式的 10 */ 11 a:link{color: #CCFF00}/*沒點擊時的顏色*/ 12 a:visited{color:#3300CC}/*已經點擊過的顏色*/ 13 a:hover {color: #FF00FF}/*鼠標懸停在鏈接上的顏色*/ 14 a:active {color:#00FFFF}/*被選定的鏈接的顏色(按住不放)*/ 15 </style> 16 17 <body> 18 <a href="#">百度</a> 19 </body> 20 </html>

2.1選擇器要注意的事項

??? 1.html元素的選擇器屬性值一定不能以數字開頭的.
??? 2.類選擇器的樣式要優先于標簽選擇器的樣式
??? 3.id選擇器優先級最高,優先于標簽選擇器與類選擇器
??? 4.ID選擇器屬性值只能在html頁面中出現一次
【ID選擇器 > 類選擇器 > 標簽選擇器】

2.2、實例

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>選擇器的練習</title> 6 </head> 7 <style type="text/css"> 8 /* 9 div{ 10 font-size:36px; 11 } 12 13 .one{ 14 font-size:9px; 15 } 16 17 #two{ 18 font-size:18px; 19 } 20 21 div span{ 22 font-size:30px; 23 div,span{ 24 font-size:30px; 25 } 26 }*/ 27 28 *{ 29 font-size:36px; 30 } 31 32 </style> 33 <body> 34 <div class="one">這個是<span>這是我的一個div標簽</span></div> 35 <div id="two">這是我的二個div標簽</div> 36 37 </body> 38 </html>

3、CSS定位

3.1、CSS的三種常用定位

??? 相對定位：相對應元素原本的位置進行移動
?? ??? ?position:relative
?? ?
?? ?絕對定位：相對應整個頁面而言的
?? ??? ??? ?position:absolute;
?? ??? ??? ?
?? ?固定定位：相對應整個頁面來說的
?? ??? ??? ?position:fixed;???

3.2、實例

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>css定位的練習</title> 6 </head> 7 <style type="text/css"> 8 /* 9 css的定位: 10 相對定位:相對應元素原本的位置進行移動 11 position:relative 12 13 絕對定位:相對應整個頁面而言的 14 position:absolute; 15 16 固定定位:相對應整個頁面來說的 17 position:fixed; 18 */ 19 div{ 20 border-style:solid;/*邊框樣式（solid：實線）*/ 21 width:100px; 22 height:100px; 23 } 24 .one{ 25 background-color:#0000FF; 26 } 27 .two{ 28 background-color:#00FF00; 29 position:relative;/*相對定位*/ 30 /*position:absolute;*//*絕對定位*/ 31 top:10px; 32 left:20px; 33 } 34 .three{ 35 background-color:#FFFF00; 36 position:absolute; 37 top:220px; 38 } 39 #ad{ 40 position:fixed;/*固定定位*/ 41 top:640px; 42 left:1670px; 43 } 44 </style> 45 <body> 46 <div class="one">one</div> 47 <div class="two">two</div> 48 <div class="three">three</div> 49 50 <div id="ad"> 51 <img src="1885.jpg" height="320" width="240"/> 52 </div> 53 </body> 54 </html>

實例效果圖

原創作者：DSHORE

作者主頁：http://www.cnblogs.com/dshore123/

原文出自：https://www.cnblogs.com/dshore123/p/9379125.html

歡迎轉載，轉載務必說明出處。（如果本文對您有幫助，可以點擊一下右下角的推薦，或評論，謝謝！）

G M T

檢測語言世界語中文簡體中文繁體丹麥語烏克蘭語烏茲別克語烏爾都語亞美尼亞語伊博語俄語保加利亞語信德語修納語僧伽羅語克羅地亞語冰島語加利西亞語加泰羅尼亞語匈牙利語南非祖魯語卡納達語盧森堡語印地語印尼巽他語印尼爪哇語印尼語古吉拉特語吉爾吉斯語哈薩克語土耳其語塔吉克語塞爾維亞語塞索托語夏威夷語威爾士語孟加拉語宿務語尼泊爾語巴斯克語布爾語(南非荷蘭語)希伯來語希臘語庫爾德語弗里西語德語意大利語意第緒語拉丁語拉脫維亞語挪威語捷克語斯洛伐克語斯洛文尼亞語斯瓦希里語旁遮普語日語普什圖語格魯吉亞語毛利語法語波蘭語波斯尼亞語波斯語泰盧固語泰米爾語泰語海地克里奧爾語愛爾蘭語愛沙尼亞語瑞典語白俄羅斯語科薩科西嘉語立陶宛語索馬里語約魯巴語緬甸語羅馬尼亞語老撾語芬蘭語蘇格蘭蓋爾語苗語英語荷蘭語菲律賓語薩摩亞語葡萄牙語蒙古語西班牙語豪薩語越南語阿塞拜疆語阿姆哈拉語阿爾巴尼亞語阿拉伯語韓語馬其頓語馬爾加什語馬拉地語馬拉雅拉姆語馬來語馬耳他語高棉語齊切瓦語

世界語中文簡體中文繁體丹麥語烏克蘭語烏茲別克語烏爾都語亞美尼亞語伊博語俄語保加利亞語信德語修納語僧伽羅語克羅地亞語冰島語加利西亞語加泰羅尼亞語匈牙利語南非祖魯語卡納達語盧森堡語印地語印尼巽他語印尼爪哇語印尼語古吉拉特語吉爾吉斯語哈薩克語土耳其語塔吉克語塞爾維亞語塞索托語夏威夷語威爾士語孟加拉語宿務語尼泊爾語巴斯克語布爾語(南非荷蘭語)希伯來語希臘語庫爾德語弗里西語德語意大利語意第緒語拉丁語拉脫維亞語挪威語捷克語斯洛伐克語斯洛文尼亞語斯瓦希里語旁遮普語日語普什圖語格魯吉亞語毛利語法語波蘭語波斯尼亞語波斯語泰盧固語泰米爾語泰語海地克里奧爾語愛爾蘭語愛沙尼亞語瑞典語白俄羅斯語科薩科西嘉語立陶宛語索馬里語約魯巴語緬甸語羅馬尼亞語老撾語芬蘭語蘇格蘭蓋爾語苗語英語荷蘭語菲律賓語薩摩亞語葡萄牙語蒙古語西班牙語豪薩語越南語阿塞拜疆語阿姆哈拉語阿爾巴尼亞語阿拉伯語韓語馬其頓語馬爾加什語馬拉地語馬拉雅拉姆語馬來語馬耳他語高棉語齊切瓦語

文本轉語音功能僅限200個字符

選項 : 歷史 : 反饋 : Donate

關閉

轉載于:https://www.cnblogs.com/dshore123/p/9379125.html

總結

以上是生活随笔為你收集整理的java基础57 css样式、选择器和css定位（网页知识）的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：数据库工具-DBeaver工具
下一篇： BZOJ1488: [HNOI2009]