tags:
- css
style: summer
JavaDay29 CSS
@toc
一、CSS 選擇器
就是根據標記，確定哪些內容是用該修飾器修飾的，可以認爲是一種格式化；
六種修飾器都是定義在<style></style>標籤中；
選擇器一： 標籤選擇器 通過標籤名來確定要修飾的內容是什麼，下面代碼中只有P標籤被修飾了；
選擇器二：class選擇器，根據標籤裏的class屬性來確定需要哪一個標籤；使用點開頭；
選擇器三：id選擇器，通過標籤的id屬性來確定修飾哪一個標籤，ID選擇器用#開頭；
選擇器四：組合選擇器 每一個不同的選擇通過,逗號隔開，做一個組合選擇；
選擇器五：層級選擇器 ，下面代碼中修飾的是“北方喫甜糉“；
選擇器六：屬性選擇器 ，根據標籤屬性選擇哪一個；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS選擇器</title>
<style>
/*選擇器一： 標籤選擇器 通過標籤名來確定要修飾的內容是什麼，這裏只有P標籤被修飾了 */
p {
color: red;
}
/* 選擇器二：class選擇器，根據標籤裏面的class屬性來確定需要哪一個標籤
class選擇器使用點開頭 */
.sdj {
background: red;
color: white;
width: 300px;
height: 50px;
/* 注意：在CSS樣式中，修飾長度的屬性，都有帶有數據單位 */
}
/* 選擇器三：id選擇器，通過標籤的id屬性來確定修飾哪一個標籤，ID選擇器用#開頭*/
#chunjie {
background: #F21000;
width: 300px;
height: 100px;
color: gold;
}
/* 選擇器四：組合選擇器 每一個不同的選擇通過,逗號隔開，做一個組合選擇*/
p, .sdj, #chunjie {
font-size: 32px;
}
/* 選擇器五：層級選擇器 ，這裏修飾的是“北方喫甜糉”*/
#box .one div {
font-size: 20px;
color: greenyellow;
}
/* 選擇器六：屬性選擇器 ，根據標籤屬性選擇哪一個*/
input[type=text] {
color: red;
}
/* 通配符，以及字體修飾過的不再改變，屬性越確定優先級越高 */
* {
font-size: 24px;
}
</style>
</head>
<body>
<p>我的家在東北，松花江上啊~~~哪裏有漫山遍野，大豆高粱啊~~~</p>
<div class="sdj">
Merry 聖誕節
</div>
<div id="chunjie">
大年初一中午團圓飯
</div>
<div id="box">
<div class="one">
<div> 北方喫甜糉 </div>
</div>
<div class="two">
<div> 南方喫肉糉 </div>
</div>
</div>
<input type="text" />
<input type="password" />
<input type="submit" />
</body>
</html>
執行效果：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-rVxYLZ3m-1569851891952)($resource/%E9%80%89%E6%8B%A9%E5%99%A8%E6%98%BE%E7%A4%BA%E7%BB%93%E6%9E%9C.jpg)]
二、僞類選擇器
針對鼠標點擊前、放置、點擊、點擊後的變化進行設置；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>僞類選擇器</title>
<style type="text/css">
/* 僞類選擇器 */
/* a:link 表示a標籤的連接狀態，未點擊狀態 */
a:link {
color: hotpink;
}
/* 點擊之後的狀態 */
a:visited {
color: purple;
}
/* 鼠標懸停的狀態 */
a:hover {
color: red;
}
/* 鼠標點擊之後的活動狀態 */
a:active {
color: forestgreen;
}
</style>
</head>
<body>
<a href="http://www.mogujie.com/">蘑菇街-我的買手街</a>
</body>
</html>
size 設置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>尺寸設置</title>
<style>
html {
font-size: 30px;
}
body {
font-size: 32px;
}
div {
font-size: 2em;
/*
em相對於父元素的比例
當前div的父元素是body標籤
當前字體大小是32px * 2 = 64px
*/
}
p {
font-size: 1.5rem;
/* 相對於HTML標籤(20)的比例 */
}
</style>
</head>
<body>
今天中午喫什麼？？？
<div style="color: red;">東哥今天中午大盤雞~~~</div>
<p style="color: gold;">照燒雞米飯</p>
</body>
</html>
front 設置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字體設置</title>
<style type="text/css">
#fonttest {
/* 設置斜體 */
font-style: italic;
/* 設置加粗 */
font-weight: bolder;
/* 設置字體大小 */
font-size: 32px;
/* 設置字體樣式 */
font-family: 幼圓;
}
</style>
</head>
<body>
<div id="fonttest">
中午我定的炒米飯，愛馬仕米飯
</div>
</body>
</html>
text
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本設置</title>
<style>
.taobao {
width: 500px;
height: 300px;
background-color: #FF5000;
color: white;
/* 首行縮進兩個字符 */
text-indent: 2em;
/* 設置文字居中 */
text-align: center;
}
#jd {
width: 380px;
height: 50px;
background-color: #F10215;
color: white;
/* 超出部分隱藏 */
overflow: hidden;
/*
ellipsis:超出部分用...替換
clip: 截斷
*/
text-overflow: ellipsis;
/* 行高 */
line-height: 50px;
/* 強制不換行 */
white-space: nowrap;
}
#shadowtest {
font: 32px 幼圓;
/*
text-shadow：文本陰影，
第一個參數X方向偏移，
第二個參數Y軸方向偏移
第三參數虛化程度
第四個參數陰影顏色
* */
text-shadow: 5px 5px 1px red;
}
</style>
</head>
<body>
<p class="taobao">
淘寶網 - 亞洲較大的網上交易平臺，提供各類服飾、美容、家居、數碼、話費/點卡充值…
數億優質商品，同時提供擔保交易(先收貨後付款)等安全交易保障服務，
並由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！
</p>
<div id="jd">
京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾
、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!
京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾
、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!
京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾
、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!
</div>
<span id="shadowtest">
我的米飯已經到了，多半是涼了~~~
</span>
</body>
</html>
background
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景</title>
<style type="text/css">
#hlm {
width: 800px;
height: 500px;
background-color: mediumturquoise;
overflow: auto;
/*
url(圖片的地址) 這裏可以是服務器本地的地址，也可以是一個網絡端的圖片地址
*/
background-image: url(img/u=168663427,492053552&fm=27&gp=0.jpg);
/*
是否平鋪圖片：no-repeat
repeat-x X軸方向平鋪
repeat-y Y軸方向平鋪
*/
background-repeat:no-repeat;
/*background-position: right bottom*/;
background-attachment: local;
/*
fixed:相對於整個頁面窗口固定
scroll:相對於當前元素固定，如果是整個頁面，隨着元素的移動而且移動
local:固定於當前元素，隨着元素的滾動而滾動
*/
}
body {
background-image: url(img/u=168663427,492053552&fm=27&gp=0.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
}
</style>
</head>
<body>
<div id="hlm">
話說平兒聽迎春之言，正自好笑，忽見寶玉也來了。原來管廚房柳家媳婦之妹，
也因放頭開賭得了不是。這園中有素與柳家不睦的，便又告出柳家的來，說她和
她妹子是夥計，雖然她妹子出名，其實賺了錢，兩個人平分。因此鳳姐要治柳家
之罪。那柳家的因得此信，便慌了手腳，因思素與怡紅院人最爲深厚，故走來悄
悄的央求晴雯、金星玻璃等人。金星玻璃告訴了寶玉。寶玉因思內中迎春之乳母
也現有此罪，不若來約同迎春討情，比自己獨去，單爲柳家說情，又更妥當，故
此前來。忽見許多人在此，見他來時，都問：“你的病可好了？跑來作什麼？”寶
玉不便說出討情一事，只說：“來看二姐姐。”當下衆人也不在意，且說些閒話。
平兒便出去辦累絲金鳳一事。那王住兒媳婦緊跟在後，口內百般央求，只說：“姑
娘好歹口內超生，我橫豎去贖了來。”平兒笑道：“你遲也贖，早也贖，既有今日，
何必當初。你的意思得過去就過去了。既是這樣，我也不好意思告人，趁早去贖了
來，交與我送去，我一字不提。”王住兒媳婦聽說，方放下心來，就拜謝，又說：“
姑娘自去貴幹，我趕晚拿了來，先回了姑娘，再送去，如何？”平兒道：“趕晚不來，
娘好歹口內超生，我橫豎去贖了來。”平兒笑道：“你遲也贖，早也贖，既有今日，
何必當初。你的意思得過去就過去了。既是這樣，我也不好意思告人，趁早去贖了
來，交與我送去，我一字不提。”王住兒媳婦聽說，方放下心來，就拜謝，又說：“
姑娘自去貴幹，我趕晚拿了來，先回了姑娘，再送去，如何？”平兒道：“趕晚不來，
可別怨我。”說畢，二人方分路各自散了。
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
position
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
div {
width: 300px;
height: 200px;
}
#div1 {
background-color: greenyellow;
/* 絕對absolute: 是和body標籤的位置
* 會脫離文檔流，和原本的標籤順序無關 */
position: absolute;
left: 358px;
top: 258px;
}
#div2 {
background-color: pink;
position: fixed;
right: 0px;
bottom: 0px;
}
#div3 {
background-color: deepskyblue;
position: absolute;
top: 50px;
left: 50px;
z-index: 5;
}
.d {
width: 300px;
height: 200px;
background-color: hotpink;
position: relative; /* 相對，相對於當前父元素的位置 */
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="div1">
河南省鄭州市二七區航海中路與京廣路交叉口向西100米海爲科技園C區10/12層
</div>
<div id="div2">
河南省鄭州市金水區農業路*********
</div>
<div id="div3">
河南省鄭州市金水區緯五路21號河南教育學院
<div class="d">
???
</div>
</div>
<p>佔位置</p>
<p>佔位置</p>
<p>佔位置</p>
<p>佔位置</p>
<p>佔位置</p>
</body>
</html>
list
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul li {
font-size: 20px;
font-weight: bolder;
color: #555;
list-style-type: none;
/*list-style-image: url(img/u=168663427,492053552&fm=27&gp=0.jpg);
list-style-position: inside;*/
display: inline-block;
margin-left: 10px;
}
a {
text-decoration: none;
}
a:link {
color: #555555;
}
a:visited {
color: #555555;
}
a:hover {
color: #C81623;
}
</style>
</head>
<body>
<ul>
<li><a href="#">秒殺</a></li>
<li><a href="#">優惠券</a></li>
<li><a href="#">閃購</a></li>
<li><a href="#">拍賣</a></li>
<li>|</li>
<li><a href="#">京東服飾</a></li>
</ul>
</body>
</html>