HTML——CSS的基礎文法1

來源:互聯網
上載者:User

標籤:同時存在   對齊   簽名   hidden   wrap   相容   規則   type   應該   

 

頁面中所有CSS代碼,需要寫入到<style></style>標籤中。

style標籤的type屬性應該選擇text/css,但是type屬性可以省略。

1、CSS常用選取器

CSS修改頁面中的所有標籤,必須藉助選取器選中。
選取器中可以寫多對CSS屬性,用{}包裹:每個屬性名稱與屬性值之間用:分隔,多對屬性之間,必須用;分隔

 選取器{
 屬性1:屬性值1;
 屬性2:屬性值2;
 }

1-1、標籤選取器

 寫法:HTML標籤名{}
作用:可以選中頁面中,所有與選取器同名的HTML標籤。

li{    color: red;    font-size: 24px;}

 

 

1-2、類別選取器(class選取器)

 寫法:.class名{}
調用:在需要調用選取器樣式的標籤上,使用class="class名"調用選取器

優先順序:class選取器>標籤選取器,兩個起衝突時,優先順序高的生效

 注意:如果需要兩個類名,用空格分隔

 

.first{    color: blue;}

 

 

 

1-3、id選取器

寫法:#id名{}
調用:需要調用樣式的標籤,起一個id="id名"

 優先順序:id選取器>class選取器

注意:一個頁面中,不能出現同名id

#one{    background-color: yellow;}

 


 


【class選取器與id選取器的區別】
1、寫法不同:class選取器用.聲明,id選取器用#聲明
2、優先順序不同:id選取器>class選取器
3、作用範圍不同:class選取器可以多次調用,id選取器只能使用一次。


選取器的命名規範
 1、只能有字母、數字、底線、減號組成;
 2、開頭不能是數字,也不能是只有一個減號

一般起名要求有語義,使用英文單詞與數位組合。

 

1-4、通用選取器

 寫法:*{}
作用:可以選中頁面中所有的HTML標籤
 優先順序:最低!!!

 

*{    color: orange;}

 

1-5、並集選取器

寫法:選取器1,選取器2,選取器3,……,選取器n{}
生效規則:多個選取器取並集,只要標籤滿足其中任意一個選取器,樣式即可生效。

li,.first{    color: red;}
1-6、交集選取器

 寫法:選取器1選取器2……選取器n{} 所有選取器挨著,沒有分隔
生效規則:多個選取器取交集,則必須滿足所有選取器的要求,才會生效

li .first{                }
1-7、後代選取器

 寫法:選取器1 選取器2 …… 選取器n{} 選取器之間空格分割
生效規則:只要滿足,後一選取器是前一個選取器的後代,即可生效。
(後代包括子代、孫代、重孫代。。。)

通俗地講:只要後一個選取器,在前一個選取器裡面即可。

 

div span{}

 

 

 

 

1-8、子代選取器

寫法:選取器1>選取器2>……>選取器n{} 選取器之間用>分隔
生效規則:必須滿足,後一個選取器是前一個選取器的直接子代,才會生效。(中間不能隔任何標籤)

div>span{}

[偽類別選取器]
寫法:偽類別選取器, 在選取器後面用:分隔,緊接偽類狀態;
 eg: .a:link .a:visited .a:hover .a:active


 2、超連結的偽類狀態:
 :link--未訪問狀態 :visited--已訪問狀態
 :hover--滑鼠指上狀態 :active--啟用選定狀態(滑鼠點下未松)

 注意:當超連結多種偽類狀態同時存在時,必須按照link--visited--hover--active的順序,
 否則會導致部分選取器不生效。


 3、input的偽類狀態:
 :hover :focus--獲得焦點狀態 :active

注意:input的多種狀態同時存在,必須按照上面的順序。

4、其他標籤,基本只用:hover狀態。

 

 2、CSS的匯入方式及優先順序權重

2-1、優先順序的權重
1、CSS生效的第一原則是:近者優先! 即,哪個選取器作用於最裡層標籤,則這個選取器生效;
2、當選取器作用於同一層時,可以根據優先順序權重進行累加計算:
id選取器*100>class選取器*10>標籤選取器*1

注意:並集選取器,相當於多個選取器拆開寫,所以,並集選取器的優先順序不能累加

3、當選取器作用於同一層,且優先順序權重相等時,寫在最後的選取器 生效

 

2-2、引入CSS的三種方式
1、行內樣式表:直接在HTML標籤中,使用style=""的方式引用;
<div style="height: 100px; "></div>
優點:使用靈活,優先順序權重最高;
 缺點:不符合w3c關於“內容與表現”分離的要求;不利於樣式複用;
 2、內部樣式表:在<head></head>標籤中,使用<style>標籤包裹CSS代碼;
 特點:一定程度上實現了HTML與CSS的分離,但是分離不夠徹底,沒有辦法多頁面共用樣式。
 3、外部樣式表:將CSS單獨寫入CSS檔案中,並於HTML檔案關聯。
優點:徹底實現HTML與CSS的分離,符合W3C規範,有利於多頁面複用統一樣式。

2-2-1、匯入CSS檔案的兩種方式
1、在<head></head>標籤中,使用link連結:

引入外部CSS樣式表:
rel:選擇stylesheet
type:選擇text/css,可以省略
href:表示連結的CSS檔案路徑

 <link rel="stylesheet" type="text/css" href="CSS/02-CSS.css" />

2、在style標籤中使用@import匯入

@import url("CSS/02-CSS.css");

[兩種匯入方式的區別]

①link屬於標準的HTML標籤,而@import不是標準標籤;
②link可以相容所有低版本瀏覽器,而@import只在CSS2之後能用;
③link是將兩個檔案連結起來,起橋樑作用,而@import相當於將CSS檔案複製到HTML檔案中;
④link會在HTML檔案邊載入的過程中,邊連結CSS檔案;
 而@import會在HTML檔案全部載入完以後,再匯入CSS檔案

 

 

 

3、CSS常用文字屬性

^CSS中的顏色表示方式^
①直接使用顏色的單詞表示:red green blue
②使用顏色的十六進位丨表示:#ffffff
    六位元,兩兩分組,分別表示紅、綠、藍的配比;
③使用rgb(0~255,0~255,0~255)三位元,分別表示紅、綠、藍的配比;
④rgba():第四位元表示透明度。

width: 200px;height: 200px;background-color: rgb(255,255,255);

 

3-1、CSS常用文字屬性

1、字型字型大小類:
①font-weight: 字型粗細, bold-加粗、normal-正常、lighter-細體
 也可以使用100~900數值,400表示normal,700表示bold
②font-style: 字型樣式。 italic-傾斜、normal-正常
③font-size:可以寫像素單位px,也可以寫%
200%表示瀏覽器預設大小(16px)的兩倍=32px
④font-family: 字型系列(字型族)。
>>>可以直接寫字型名,也可以直接寫字型系列名。
>>>常用字型:serif-襯線體 sans-serif-非襯線體
font-family可以接收多個值,用逗號分隔。表示優先使用第一個,
>>>如果沒有這個字型,依次向後使用。通常,最後一個值放字型系列名:
eg:fongt-family: "微軟雅黑","宋體",sans-serif;
⑤font縮寫形式:
>>>順序必須是font-weight font-style font-size/line-height font-family
>>>不同屬性之間用空格分隔;
>>>font-size/line-height必須一組,用/分隔
>>>font-family多個字型之間,用逗號分隔
eg: font: bold丁italic 32px/50px "微軟雅黑",serif;

 


2、字型顏色
①color:字型顏色 可以是單詞、十六進位、RGB等
②opacity:透明度,可選值0-1
[rgba和opacity的區別]
>>>RGBA本身可以設定顏色,而opacity必須配合其他顏色屬性使用
>>>rgba僅僅是讓當前元素設定的顏色透明;
而opacity,會讓當前元素裡面的所有文字、背景、子項目都透明。
3、行距、對齊、其他類
①line-height:行高。 可以寫像素單位、可以直接寫數字(表示預設行距的幾倍)
 可以寫%(表示預設行距的百分比
>>>行高重要作用:讓單行文字在div中垂直置中
設定行高等於div的高度,及可讓單行文字垂直置中。(非常 常用)
②text-algin:設定地區內的行級元素水平對齊;left、center、right
③letter-spacing: 字元間距,字與字之間的距離
④text-decoration: 文本修飾;
underline-底線、overline-上劃線、line-through-刪除線、none

⑤overflow:設定超出地區文字的顯示方式。
>>>overflow: hidden; 超出地區的文字吟唱不顯示;
>>>overflow: scroll:無論文字多少,都會顯示水平垂直捲軸;
>>>overflow: auto:自動,預設效果。文字多顯示捲軸,文字少不顯示捲軸
>>>可以使用overflow-x和overflow-y單獨修改兩個方向的捲軸。
overflow-x: scroll;overflow-y: hidden;

⑥text-overflow:設定行末多餘文字的顯示方式;
>>>clip:多餘文字裁剪掉 ellipsis: 多餘文字顯示省略符號
>>>顯示省略符號需要配合white-space:nowrap;使用
>>>【重點】設定行末顯示省略符號(三行代碼,缺一不可)

overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

 



⑦white-space:nowrap;設定中文行末,不斷行顯示

 ⑧text-indent:首行縮排。

⑨-webkit-text-stroke: 文字描邊。
-webkit-表示摯友webkit核心的瀏覽器生效,常見的有chrome、safari

⑩text-shadow: 文字陰影,有四個屬性值,空格分隔
>>>水平陰影距離,正數:表示陰影右移,負數:表示陰影左移;(左負右正)
 >>>垂直陰影距離,正數:表示陰影下移,負數:表示陰影上移;(上負下正)
 >>>陰影模糊距離,0表示陰影一點不模糊;
>>>陰影顏色;
縮寫形式:text-shadow: 2px 2px 2px blue;

 

#div{                font-weight: bold;                font-style:italic;                font-size: ;                font-family: serif;                font: bold italic 16px/50px "微軟雅黑",serif;                background-color: red;                opacity: 0.5;                line-height: 20px;                text-align: center;                letter-spacing: 5px;                text-decoration: underline;                overflow: auto;                white-space: nowrap;                text-overflow: ellipsis;                text-indent: 20px;                -webkit-text-stroke:0.5px blue;                text-shadow: 2px 2px 2px blue;            }

 

 

3-2、CSS常用背景屬性

1、background-color:背景色

2、background-image: 背景圖。 使用url("")選擇背景圖片。
背景圖和背景色同時存在時,背景圖覆蓋背景色。

3、background-repeat: 背景圖的重複方式,
 no-repeat:不平鋪,repeat:平鋪,repeat-x:沿x軸平鋪,repeat-y:沿y軸平鋪

 4、background-size:背景圖的大小
[指定寬度 高度的寫法]
>>>寬度高度的指定,可以寫px,也可以寫%(父容器寬高的百分比)
>>>當寫兩個屬性時,分別表示寬度、高度
>>>當寫一個屬性時,表示寬度,高度將會 等比縮放

[其他屬性]
>>>contain:圖片等比縮放,直到寬或高中較大的一邊所放到100%為止。
(可能導致較短的一邊<100%,圖片無法覆蓋全部地區)
>>>cover:圖片等比縮放,直到寬或高中較小的一邊縮放到100%為止。
(可能導致較大的一邊>100%,圖片超出地區顯示不全)

5、background-position: 背景圖位移量
>>>指定位置:left/center/right top/center/bottom
 當唯寫一個值時,另一個預設置中。
>>>指定座標:兩個屬性分別表示 水平位移 垂直位移
①座標的值,可以是px單位,也可以是百分數
②當寫像素單位時:
水平方向:正數右移 負數左移;垂直方向:正數下移 負數上移;
(左負右正 上負下正)
③當寫%百分數時:一般只能是正數。
表示的是,父容器去掉圖片的寬高,剩餘空白地區的分布比例。
eg:background-position:30%; 水平方向去掉圖片寬度,剩餘地區3:7分

            #div2{                width: 25px;                height: 25px;                /*background-color: yellow;*/                background-image: url("img/icon.gif");                white-space: nowrap;                text-indent: 30px;                line-height: 25px;                background-position: -133px 0px;            }            #div3{                width: 24px;                height: 28px;                background-image: url("img/icon.gif");                white-space: nowrap;                text-indent: 30px;                background-position: 0px -170px;            }            #div4{                width: 42px;                height: 19px;                background-image: url("img/icon.gif");                text-indent: 9px;                font-size: 14px;                white-space: nowrap;                line-height: 16px;                background-position: 0px -30px;            }

 

 

 

※這裡還有個小知識點

list-style: 修改小黑點的樣式;
none 去點小黑點
url() 可以使用url匯入一個小圖片,作為列表的標識符號

float: 浮動  可以實現讓區塊層級元素,在一行中顯示

 

HTML——CSS的基礎文法1

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.