day 48-css-part1
css是前端的優化器,如果說我們的html是把前端的大體骨架搭起來的話,那麽我們的css就是在這個骨架的基礎上進行修飾,使之更有立體感,更光鮮亮麗,就類似於一個人在解決了基本衣食住行之後,會去追求更有品質的生活是一樣的概念.其實我們的學習都是這個狀態,不論是前面學習函數還是學習面相對象,以及後面的網絡編程或者數據庫使用,都是在能夠寫出代碼的基礎上,進行一些擴充,優化,找到更優的解決方案,更漂亮地解決問題.
我們的css要做的就是找到標簽,然後設置標簽的樣式.就這麽兩件事而已.
CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。l
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）
基本語法:
CSS語法: 選擇器 {屬性1: 值1; 屬性2: 值2} CSS放置的位置: 1. 直接寫在標簽裏面,通過style屬性來設置CSS樣式 2. 在head標簽裏面通過style來寫樣式 3. 放到一個文件裏面去 CSS選擇器: 1. 標簽選擇器 (給哪個標簽寫樣式就寫那個標簽名) CSS屬性: color font-size width height background-color border(簡寫) 寬度 類型 顏色View Code
CSS實例
每個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之後用分號結束。
那麽具體來怎麽操作呢,下面我們一一說明方法.
q1 {color:red;font-size:10px}============這裏面的q1就是選擇器,color和font-size就是屬性,而red和10px就是值.一組屬性和值的組合即是聲明. ------------這裏我們分別認清了選擇器\聲明\屬性\值這四個概念,下面會反復用到他們的.
Ⅰ找到標簽{選擇器} ====這裏我們引入一個選擇器的概念,在css裏面我們用選擇器來找到標簽
我們的選擇器分為4個大類,分別是:基本選擇器,屬性選擇器,層級選擇器,偽類選擇器.
1,基本選擇器:
根據標簽的名字去找選擇器,
例如我們寫一行代碼:
<div >gai爺的歌前無古人,把中國的方言文化推向了從未到達過的頂點,掀起的狂潮前所未有<div>
我們要找到上面這行的標簽,就直接用該標簽的名字去找就可以====div{這裏加上聲明即可--font-size:3px;}
根據id去找選擇器,寫作 #id [用#開頭,#後面寫上對應的id的值,用於給指定的標簽設置樣式,]
例如:
<p id=‘qwer‘>年輕人都會喜歡聽嘻哈,gai爺的歌絕對有代表性,可以在年輕人心中占有一席之地</p>
我們要找到上面的標簽,這樣寫即可得到結果====#qwer {聲明寫進來即可--font-size:2px;}
根據class去找選擇器,寫作 .class [用.開頭 .後面寫上class屬性對應的值,用於給指定的標簽設置樣式]
例如:
<p class=‘az‘>歐陽靖絕對是中國嘻哈的領軍人物以及靈魂人物</p>
找到上面的標簽,寫作這樣======.az{聲明寫入--font-size:4px;}
基本上的選擇器就都在上面了,下面我們來介紹一個組合查找法
標簽名.class名,也就是把上面第一個和第三個聯合起來用.寫作 標簽名.class名 [用標簽名開頭,接著加上.再接著是class值的名,用於給指定標簽設置樣式]
例如:
<p class=‘abc‘>此刻我怎麽可以輸給你,所以我每一個都選c<p>
<p>我填上acbc你卻罵我是爛泥,我淋著11月的雨,聽你罵我沒出息<p> 這裏有兩條標簽代碼,我們要找到帶有class屬性的那個標簽就需要用到這個組合查找法,這就是應用場景.
寫作p.abc{color:gold;}
找到上面的標簽
* 全選中也就是所有的標簽都選中,進行設置[通常用於設置頁面默認方式]
例如:
<p class=‘abc‘>此刻我怎麽可以輸給你,所以我每一個都選c<p>
<p>我填上acbc你卻罵我是爛泥,我淋著11月的雨,聽你罵我沒出息<p> 要把這兩個都選中就用 *{color:black}即可得到結果
樣式類名不要用數字開頭（有的瀏覽器不認）。
標簽中的class屬性如果有多個，要用空格分隔
2.層級選擇器
後代選擇器,毗鄰選擇器,兒子選擇器,組合選擇器,弟弟選擇器
後代選擇器 從所有後代中去找到符合條件的,子代孫代,曾孫代,等等不論嵌套多少層,
<div>
<a href=‘‘>who cares</a>
<p>
<a>i care!<a>
</p>
</div>
div a{color:red;}---這樣就是把所有div裏面嵌套的不論多少層的子代的a標簽都找到了然後進行設置,結果是who cares,i care 這兩句話都會變成紅色
毗鄰選擇器 彼此之間有關聯的選擇器
例如:
<label for=‘aq‘>縫紉機樂隊</label>
<input id=‘aq‘ type=‘text‘>
label+input{color:green} 直接寫作兩個緊鄰的標簽名, 就直接這麽寫即可label+input,結果就是‘‘縫紉機樂隊‘‘變成綠色
兒子選擇器 只是從直接關系的子代元素中找到標簽
例如:
<div>
<a href=‘‘>who cares</a>
<p>
<a>i care!<a>
</p>
</div>
div >a {color:red;} 這裏寫作 div>a 用>連接父與子之間的關系,只有who cares會變成紅色,只有它是直接跟div標簽關聯的子代元素
組合選擇器 就是寫多個選擇器放到一起,然後多個選擇器都會被執行為了減少重復的代碼,彼此之間用 , 連接
<div>
<a href=‘‘>who cares</a>
<p>
<a>i care!<a>
</p>
<a href=‘‘>你總是提出問題,後面掛著abc</a>
</div>
div> a,p~a {color:black;} 這裏的div> a 是 div的子標簽a-----who cares ---這句話會變黑色,p~a是p的弟標簽a------你總是提出問題,後面掛著abc----會變黑色
弟弟選擇器 兄與弟之間是同級的
<div>
<a href=‘‘>who cares</a>
<p>
<a>i care!<a>
</p>
<a href=‘‘>你總是提出問題,後面掛著abc</a>
</div>
p~a {color:red;} 這裏寫作 p~a 兄與弟之間用~來連接,只要是這個符號出現了就是兄關聯弟的查找方式,沒有弟關聯兄一說.所以得到的結果是‘你總是提出問題,後面掛著abc‘這一句變成紅色,所謂的兄與弟之間肯定是同級的.
屬性選擇器:
我們的屬性選擇器就是簡單粗暴的方式,把這個標簽裏面的內容直接拿出來,然後進行設置即可,省去了那些判斷比較彼此之間的關系的步驟.
用於選取帶有指定屬性的元素例如:
p[title]{color:black} ====這裏是把p標簽裏帶有title屬性的標簽設置成黑色
用於帶有屬性和屬性值的選擇器,例如:
p[title=‘abd‘]{color:darkgreen}======這裏是把p標簽裏面帶有title=‘abd‘屬性值的標簽設置成暗綠色
/*用於選取帶有指定屬性的元素。*/
p[title] {
color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
color: green;
}
/*上面常用↑*/
/*用於選取屬性值包含指定值的每個元素*/
div[class~="c2"] {
color: red;
}
/*用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。*/
div[class|="c2"] {
color: red;
}
/*匹配屬性值以指定值開頭的每個元素*/
div[class^="my"] {
color: red;
}
/*匹配屬性值以指定值結尾的每個元素*/
div[class$="s"] {
color: red;
}
/*匹配屬性值以指定值結尾的每個元素*/
div[class$="s"] {
color: red;
}
/*匹配屬性值包含指定值的每個元素*/
div[class*="sb"] {
color: red;
}
View Code
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>屬性選擇器示例</title> <style> /*[class] {*/ /*color: darkred;*/ /*}*/ /*[type="button"] {*/ /*background-color: red;*/ /*}*/ /*[class~="green"] {*/ /*color: red;*/ /*}*/ /**/ /*[class^="g"] {*/ /*color: blueviolet;*/ /*}*/ /*[class|="green"] {*/ /*color: blueviolet;*/ /*}*/ /*[class^="my"] {*/ /*background-color: deeppink;*/ /*}*/ /*[class$="k"] {*/ /*color: brown;*/ /*}*/ /*[class*="ee"] {*/ /*color: goldenrod;*/ /*}*/ </style> </head> <body> <div class="green v1">我是綠色的Egon</div> <div>我沒有egon屬性</div> <div class="green-red pink">被汙染的Egon</div> <div class="gray gray v1">被汙染的Egon2號</div> <input class="my-submit1" type="submit" value="提交"> <input class="my-submit2" type="button" value="按鈕"> </body> </html>View Code
偽類選擇器:
這裏的偽類選擇器就是我們為a標簽專設的只針對a標簽進行操作,因為a標簽裏面有url鏈接地址,我們的偽類選擇器就是針對a標簽裏面的url鏈接地址進行操作的,讓url地址通過不同的顏色呈現不同的狀態,具體狀態是:該url未訪問過,已訪問過,鼠標移動到鏈接上,選定的鏈接(這裏的意思是當你點擊到該url的時候,那一瞬間,在跳轉之前它就會改變顏色).這四種狀態,用不同的顏色來分別表示.
a:hover {color:red} 這是當鼠標滑動到該地址時
a:active {color:green} 這是當鼠標選中該地址的時候在跳轉頁面之前的時候顏色的變化
a:link {color:bule} 這是該地址還未訪問過的時候,
a:visited {color:yellow} 這是該地址已經訪問過
選擇器優先級:
繼承--是權重最低的繼承,我如果沒有我自己的樣式,那麽就默認使用祖先的樣式,也就是嵌套的裏面的標簽沒有自己的樣式就使用所外層的標簽的樣式
優先級的權重比例:
!import 它淩駕於所有的優先級之上,是例外的存在
內聯{寫在標簽裏面的,style屬性},權重為 1000
id選擇器,權重為 100
class選擇器,權重為 10
標簽選擇器,權重為 1
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>CSS選擇器優先級示例</title> <style> /*.c1 {*/ /*color: red;*/ /*}*/ /*p {*/ /*color: green;*/ /*}*/ /*如果全部其他內容都加上註釋的話,只留出這裏的,那麽它的優先級就是除了最高的內聯 "<div class="c1" id="d1" style="color: goldenrod">"最高級的.內聯是直接把設置寫入了標簽裏面, 除了內聯其他的選擇器都不可以把設置直接寫入標簽裏面,都是要通過選擇器找到標簽然後再進行設置,在head.style裏面執行, 如果刪除掉內聯裏面的style部分,這裏的#d1設置就可以實現,當然了下面的!import是例外,對於所有的優先級而言, 它是例外的存在,淩駕於所有的優先級之上*/ #d1 { color: blue; } /*!import是不講道理的,只要該選擇器裏面有它,那麽不管什麽優先級,但凡包含了它的,都統統按照這裏的設置去執行*/ /*.c1 {*/ /*color: red!important;*/ /*}*/ /*div.c1 {*/ /*color: red;*/ /*}*/ /*#d1>#d2 {*/ /*color: brown;*/ /*}*/ .c3 { color: rebeccapurple; } /*不建議使用,特定情況可以使用*/ /*span {*/ /*color: aqua!important;*/ /*}*/ /*.c3 {*/ /*color: chartreuse;*/ /*}*/ </style> <link rel="stylesheet" href="my-style2.css"> <link rel="stylesheet" href="my-style1.css"> </head> <body> <div class="c1" >我是爺爺 <div>這是兒子 <p>這是孫子</p> </div> </div> <div class="c1" id="d1" style="color: goldenrod"> 誰是d1啊 <div class="c2" id="d2">id是d2的標簽 <div class="c3"> div我是什麽顏色的呢? </div> </div> </div> <div > <p><span class="c3">aaa</span></p> </div> <div> <div></div> </div> </body> </html>View Code
Ⅱ設置標簽的樣式{前面找到了選擇器之後就要開始對找到的標簽進行設置了}
1.color設置 (顏色設置有三種方式,)
,16進制的方式-- 如: ＃FF0000
,一個reg值,(用qq截圖的時候把截圖的框選中,然後用鼠標在屏幕上挪動,鼠標箭頭會出現一些數字,那些就是reg值,)
,直接寫顏色的名字
2.對齊
text-align該屬性是規定文本對齊的方式
left--把文本排到左邊,瀏覽器決定默認值
right--排文本到右邊,
center--排文本到中間,
justify--實現文本兩端對齊效果
文本的其他用法:
/*
font-size: 10px;
line-height: 200px; 文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比
vertical-align:－4px 設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效
text-decoration:none text-decoration 屬性用來設置或刪除文本的裝飾。主要是用來刪除鏈接的下劃線
font-family: ‘Lucida Bright‘
font-weight: lighter/bold/border/
font-style: oblique
text-indent: 150px; 首行縮進150px
letter-spacing: 10px; 字母間距
word-spacing: 20px; 單詞間距
text-transform: capitalize/uppercase/lowercase ; 文本轉換，用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫
*/
文本其他
View Code
3.
background-color 背景顏色
背景的屬性:
/*背景顏色*/
background-color: red;
/*背景圖片*/
background-image: url(‘1.jpg‘);
/*
背景重復
repeat(默認):背景圖片平鋪排滿整個網頁
repeat-x：背景圖片只在水平方向上平鋪
repeat-y：背景圖片只在垂直方向上平鋪
no-repeat：背景圖片不平鋪
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: right top（20px 20px）;
View Code
背景屬性支持簡寫操作: background:#ffffff url(‘1.png‘) no-repeat right top;
border 邊框設定(四周皆可設定指定值)
border裏面的屬性包含{width,style,color}
li{border-width:10px; border-style:solid; border-color:green;} =========簡寫方式:li{border:10px,solid,green}
border裏面的style屬性單獨設置:
li {border-top-style:dotted; border-right-style:solid;border-bottom-style:dotted;border-left-style:none;}
display:
display="block"將內聯標簽設定為塊級標簽
display="inline"將塊級標簽設定為內聯標簽
display="inline-block"行內塊元素
盒子模型:
- margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
- padding: 用於控制內容與邊框之間的距離；
- Border(邊框): 圍繞在內邊距和內容外的邊框。
- Content(內容): 盒子的內容，顯示文本和圖像。
padding 內填充 (四周皆可設定指定值)[這裏需要特別說明默認值的特點:默認順序是順時針,上-右-下-左;如果是三個值,那就是上-右左(右邊設定後,直接把右邊的值賦給左邊),-下;如果只有兩個值那麽就是上下,左右]
margin外邊距 (四周皆可設定指定值)默認值同上
如圖所示:
.margin-test {
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
簡寫:
.margin-test {
margin: 5px 10px 15px 20px;
}
padding:
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
.padding-test {
padding: 5px 10px 15px 20px;
}
float
三種取值方式:left左浮動,right有浮動,none默認值,不浮動
清除浮動,clear語法,
clear : none | left | right | both
取值：
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
但是需要註意的是：clear屬性只會對自身起作用，而不會影響其他元素。
Ⅲ 瀏覽器調試相關內容
打開一個頁面,ctrl+shift+i,可以查看html屬性,每一個塊級標簽都有一個可以折疊的三角符號,打開就可讀取裏面的內容.
1. 查看HTML標簽層級關系
2. 查看CSS屬性
3. 查看偽類屬性(:hover)
4. 查看CSS BOX模型
day 48-css-part1