推廣 熱搜: WEB前端教程  雅思培訓班  雅思培訓 

WEB前端教程:05css基本樣式和c3選擇器

   日期:2019-04-21     瀏覽:327    
核心提示:一、背景1.background-color 背景顏色默認值是transparent(透明的)當同時定義了背景圖像和顏色時,背景圖像將覆蓋在背景顏色之上

一、背景

1.background-color  背景顏色

默認值是transparent(透明的)

當同時定義了背景圖像和顏色時,背景圖像將覆蓋在背景顏色之上

.divclass{ background-color:#808080;}

顏色的取值:

1.關鍵字:red、blue等

2.16進制:#000000、#cccccc、#ff0000等

3.rgb(0,0,0)

4.rgba(0,0,0,.5)

2.background-image  背景圖片

默認值是none(沒有圖片)

元素的背景占據了元素的全部尺寸,包括內邊距和邊框,但不包括外邊距

通過url使用絕對或相對地址指定圖片

background-image: url("images/img.jpg");

1.絕對路徑:文件在網絡或本地的絕對地址,從盤符開始  C:\Users\Administrator\Desktop\a.jpg

2.相對路徑:相對于你當前目錄,同一等級直接寫圖片名稱即可,在下一級,用\查找,在上一級,用../查找。一般不使用絕對地址。


7.background

background 簡寫屬性在一個聲明中設置所有的背景屬性。

可以設置如下屬性:

background-color

background-position

background-size

background-repeat

background-attachment

background-image

如果不設置其中的某個值,也不會出問題,取默認值,比如 background:url('smiley.gif') no-repeat; 也是允許的。


二、字體屬性

1.color  規定文本的顏色

  如:

  div{ color:red;}

  div{ color:#ff0000;}

  div{ color:rgb(255,0,0);}

  div{ color:rgba(255,0,0,.5);}

2.font-style 指定文本的字體樣式(正常、斜體)

默認值 normal

屬性值

normal  正常字體

italic  斜體字

p{ font-style:italic; }

3.font-size 指定文本字體大小

通過像素來指定字體大小  1px = 1像素

p{ font-size:12px; }

4.font-family 定義文本使用某個字體

默認值 由瀏覽器確定

示例

font-family:microsoft YaHei;

font-family:"Microsoft YaHei","Simsun","SimHei";

6.letter-spacing:;設置字的間距

如:div{letter-spacing:2px;}

7.overflow: hidden|auto|scroll;當內容溢出元素框時隱藏|自動|顯示滾動條

8.讓溢出的文字以省略號顯示

p{ height: 20px; width:100px; background:#ddd;

white-space: nowrap;    //讓文字在同一行顯示,不換行

overflow: hidden;       //溢出部分隱藏

text-overflow: ellipsis; //文字溢出部分省略號顯示,另外一個值為clip

}

 <p>這段文字多余的部分會顯示為省略號</p>


三、文本屬性

1.text-align 內容對齊方式,它是針對于元素的內容

屬性值  left |center |right 

p{text-align: center;} 

p是塊元素,left、right和center會作用于整個行


2.text-decoration 指定文字有無裝飾,默認值為none

屬性值:

 underline  指定文字的裝飾是下劃線

overline  指定文字的裝飾是上劃線

line-through 指定文字的裝飾是貫穿線,類似于刪除標簽的效果


3.text-transform 設置對象中的文本的大小寫

默認值none  無轉換

屬性值

capitalize  將每個單詞的第一個字母轉換成大寫

p{ text-transform: capitalize; }

<p>this is paragraph</p>

uppercase  全部轉換成大寫

p{ text-transform: uppercase; }

lowercase  轉換成小寫

p{ text-transform: lowercase; }

<p>THIS IS PARAGRAPH</p>


4.text-indent文本縮進 

文本縮進屬性是用來指定文本的第一行的縮進。

如:p {text-indent:2em;}

1em和當前字體大小相等。在瀏覽器中默認的文字大小是16px。

因此,1em的默認大小是16px。


5.word-wrap  設置當前行超過指定容器的邊界時是否換行

首先我們要知道一種情況:如果你容器中的單詞過長,超出了容器本身的寬度,會造成“長單詞溢出”

word-wrap: break-word;可設置過長的文本自動換行


5.vertical-align  設置對象內容的垂直對其方式。

是容器中元素相對于內容的顯示

示例

 div{ background:orange; height: 100px;}

 a {display:inline-block; height:100px; width:80px; background:red; vertical-align: middle;}

 <div>這里有內容<a href="#"></a></div>    

 *div中定義a,vertical定義的是a相對于div內容的對齊方式,它和容器的高度無關,與文字內容有關

示例2

p{ background:orange; }

img{ width:100px; vertical-align: middle; }

<p>this is paragraph!!!<img src=https://www.school#/skin/m03skinBlue/image/nopic.gif alt=""/></p>

8.opacity  設置顏色的透明度,整個元素都會透明

默認值1,取值為0-1

1為不透明,0為完全透明

示例

  p{ opacity: 0;}  隱藏一個元素 ,完全不顯示,但是會占空間,只是看不到。

  p{ opacity: 1;}  顯示一個元素

它和rgba中的”a”作用一樣


四、列表屬性

1.list-style-image  設置列表項標記的圖像(項目符號)

  只有一個屬性url,引導一個圖片

  ul{ list-style-image: url("images/icon.png");}

示例

用list-style-image重置項目符號示例

.test{list-style-image:url(skin/ico.png);} 

 //整體重置作用于ul,單個設置用于li上

<ul>

<li>列表項一</li>

<li>列表項一</li>

<li>列表項一</li>

<li>列表項一</li>

</ul>


2.list-style-position 設置列表項標記如何根據文本排列

這個屬性有兩個值outside和inside

outside項目符號放在文本以外(默認)

ul li{ list-style-position:outside;  width:100px;   border:1px solid red;}

inside項目符號放在文本以內

ul li{ list-style-position:inside;  width:100px;   border:1px solid red;}

3.list-style-type 設置列表項所使用的預設標記

可選值

none不使用項目符號

disc實心圓(相當于html屬性type=”disc”)

circle空心圓

square實心方塊

示例

ul{ list-style-type:circle;}

4.list-style

復合屬性

寫法

list-style:list-style-image  list-style-position   list-style-type

把之前幾個屬性值 寫在一個list-style中

示例

ul{ list-style: url("images/icon.png") outside disc;}

前面設置了圖片,最后再設置項目符號的目的是,如果圖片未能正常顯示,可以有符號來代替


css3選擇器

首先CSS選擇器分這么幾大類:

1.基礎選擇器

2.關系選擇器

3.屬性選擇器

4.偽類選擇器

5.偽對象選擇器


一、關系選擇器

1.后代選擇器 (E F)

選擇所有被E元素包含的F元素,中間用空格隔開

ul li{ color:red; }

<ul>

<li>蘋果</li>

<li>橙子</li>

 <li>西瓜</li>

</ul>


2.子代選擇器 (E > F)

 選擇所有作為E元素的直接子元素F,對孫子元素不起作用,用大于號表示

div>a{ color:red;}   //div下的一級子元素a

<div>

<a href="#">這是子元素</a>

<p><a href="#">這是孫子元素</a></p>

</div>


3.相鄰兄弟選擇器 (E+F)

選擇緊貼在E元素之后F元素,用加號表示,選擇相鄰的第一個兄弟元素。

p+span{ color:red;}   //只會選中第一個span

<p>這是p元素</p>

<span>這是緊挨著p元素的第一個span</span>

<span>這是第二個span</span>


4.通用兄弟選擇器 (E~F)

選擇E元素之后的所有兄弟元素F,作用于多個元素,用~號隔開。

p~span{ color:red;}   

//和p之后平級的span元素都被選中了,有幾個選中幾個

<span>這span在p元素之前不會被選中</span>   

<p>這是p元素</p>

<span>這是緊挨著p元素的第一個span</span>

<span>這是第二個span</span>

<span>這是第三個span,它和p是兄弟關系</span>


二、CSS屬性選擇器:

通過html的屬性來選擇元素,<p class=”p1”></p>  class即是屬性,p1是class的屬性值。 

寫法:元素[ 屬性名= “屬性值”] ,等號不固定,可換其它符號

1.E[att]

2.E[att="val"]

3.E[att~="val"]

4.E[att^=“val"]    以val開頭

5.E[att$=“val"]    以val結尾

6.E[att*=“val"]    包含val

7.E[att|="val"]


1.E[att]  選擇具有attr屬性的E元素

p[class]{ color:red;}    //選擇帶有class屬性的p標簽

<p>這是p1標簽</p>

<p>這是p2標簽</p>

<p>這是p3標簽</p>

<p>這是p4標簽</p>

 *不管class名為什么,只要有class屬性,即符合


2.E[att="val"]  選擇具有att屬性且屬性值等于val的E元素。

它不僅要有符合的屬性,值也要符合才會被選中。

 p[class="p4"]{ color:red;}    //選擇p元素里class等于p4的元素,屬性值要用引號引起來

<p>這是p1標簽</p>

<p>這是p2標簽</p>

<p>這是p3標簽</p>

<p>這是p4標簽</p>


3.E[att~="val"]  選擇有att屬性的元素,且屬性值列表中有一個符合val的元素

比如我們的class屬性,它的值通常是多個樣式,中間以空格隔開,只要有一個值符合就被選中

p[class~="p1"]{ color:red;}    //選中p元素下class值包含p1的元素

<p class="p1 paragraph p11">這是個段落</p>

<p class="p1paragraph p11">這是個段落</p>   //不會被選中,p1paragraph被看作一個整體

<p class="p1">這是個段落</p>

<p class="paragraph p1 p11">這是個段落</p>   //與位置無關,這行也會被選中

<p>這是個段落</p>


4.E[att^=“val"] 選擇E元素中有att屬性,且以”val”開頭的元素

p[class^="p"]{ color:red;}  //選擇帶有class屬性,屬性值以p開頭的元素

<p class="p1 paragraph p11">這是個段落</p>

<p class="p1paragraph p11">這是個段落</p>

<p>這是個段落</p>

<p class="paragraph p11">這是個段落</p>

<p>這是個段落</p>

*以上全部是以class值以p開頭的,所以全部選中


5.E[att$=“val"]  選擇具有att屬性且屬性值為以val結尾的字符串的E元素

p[class$="p"]{ color:red;}     //選擇p元素中class屬性值以p結尾的元素

<p class="p1 paragraph p11p">這是個段落</p> 

<p class="p1paragraph p11">這是個段落</p>

<p>這是個段落</p>

<p class="paragraph p1 p11">這是個段落</p>

<p class="p11p">這是個段落</p>


6.E[att*=“val"] 選擇具有att屬性且屬性值包含val的字符串的E元素。  

a[href*="baidu"]{font-weight: bold;}   //選擇a標簽中href屬性值包含baidu的元素

<a href="http://www.baidu.com">百度</a>

<a href="#">空的超鏈接</a>

<a href="http://www.youdao.com">有道</a>


7.E[att|="val"]  選擇具有att屬性,并且屬性值用“鏈接符隔開”,以val開頭的元素(val指鏈接符前完整的前綴)

  項目中我們命名class名時,經常會以這種方式”sxt-work”,中間以一個中劃線隔開。這時候使用此屬性再合適不過。

  div[class|="sxt"]{ color:red;}   //div里class類名中有鏈接符,并且以sxt開頭的元素

<div class="sxt-work">這是塊元素work</div>

<div>這是塊元素car</div>   //不是以sxt開頭

<div class="sxt-pen">這是塊元素pen</div>

<div>這是塊元素pen</div>   //沒有鏈接符


三、偽類選擇器

偽類通過冒號來定義,它定義了元素的狀態,如點擊按下、點擊完等等,我們之前都是直接操作元素的樣式,現在可以為元素的狀態改樣式,使元素看上去更“動態”。

1.E:link

2.E:visited

3.E:hover

4.E:active

5.E:not()

6.E:first-child

7.E:last-child

8.E:only-child

9.E:empty

10.E:checked

11.E:focus


1.E:link

設置超鏈接a在未被訪問前的樣式(特指a標簽)

 a:link{ color:red;}   //未訪問時a的顏色,設置別的元素沒有效果

2.E:visited

設置超鏈接a在其鏈接地址已被訪問過時的樣式(特指a標簽)

 a:visited{ color:green;}  //點擊過后的超鏈接樣式

*測試時,在url后面加參數使頁面達到未訪問過的狀態

3.E:hover

設置鼠標懸停在元素上時的樣式。不限于a標簽,p、li也可以使用

a:hover{ color:red;}

p:hover{ color:red;}

<a href="#">這是個超級鏈接</a>

<p>這是個段落</p>

4.E:active   

設置元素在鼠標按下時的樣式(不限于a標簽)

 a:active{ color:red;}

p:active{color:yellow;}

div:active{ color:blue;}

<a href="#">百度</a>

<p>這是段落</p>

<div>這是div</div>

5.E:not(s選擇器)  匹配不含有s選擇器的元素E。

div:not(.d1){ color: red;}

 //選擇除了類名為d1的元素,注意,not()中的值不加引號!

<div>塊元素</div>

<div>塊元素</div>

<div>塊元素</div>

<div class="d2 d1">塊元素</div>

<div id="div2">塊元素</div>

6.E:first-child 父元素的第一個子元素E。

要使該屬性生效,E元素必須是某個元素的子元素。一般元素都是body的子元素,所以都可以使用此偽類。而body標簽不是子元素,所以 body:first-child

{ background:#ddd;} 是無效的。

    <ul>

        <h2>標題</h2>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>

    </ul>

    <ul>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>

    </ul>

注意觀察兩個樣式的區別

li:first-child{ color:red;}

ul:first-child{ color:red;}

這個屬性的意思是被選元素本身是子元素,并且是它父元素中的第一個


7.E:last-child 父元素的最后一個子元素E

    <ul>

        <h2>標題</h2>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>                     

    </ul>

    <ul>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>      不會變紅,因為它不是最后一個

        <h3>底部第一個</h3>                 

     </ul>


8.E:only-child   E元素是唯一的子元素時被匹配

<body>

    <p>段落</p>   

</body>

此時body中只有這一個元素,所以 p:only-child{ color: deepskyblue;}  會生效

<body>

    <p>段落</p> 

    <p>段落</p>

</body>

這時body的子元素不是唯一的了,所以 p:only-child{ color: deepskyblue;} 不會生效

9.E:empty    匹配沒有任何子元素(并且不包括text節點)的元素E

     p:empty{ border:1px solid red;padding:10px;}


    <p></p>    

    <div></div>   //空,但不是P元素

    <p>我是一個p元素</p>   //有text文本節點

    <p><a href="#">百度</a></p>   //有子元素

10.E:checked  

匹配用戶界面上處于選中狀態的元素E。(用于input type為radio與checkbox時)

input:checked+span{color:red;}  

<input type="radio" name="sex"/><span>男生</span>

<input type="radio" name="sex" checked="checked"/><span>女生</span>

*input下被選中的元素緊挨著的span顏色為紅色,因為選中狀態會變,所以看著像動態的

11.E:nth-child()   選中第幾個子元素

<div>

    <p>1</p>

    <p>2</p>

    <p>3</p>

</div>


.box p:nth-child(2){

           color: red;

       }

//選中第二個p元素

 .box p:nth-child(even){

           color: red;

       }

//選中第偶數個子元素

 .box p:nth-child(odd){

           color: red;

       }

//選中第奇數個子元素

四、偽對象選擇器

偽對象也叫偽元素,在過去,偽類和偽元素都被書寫成前面只加一個冒號,實際上應該    :weilei    ::weiyuansu,而現在我們為了兼容舊的書寫方式,用一個冒號引導偽類也是能被解析的。

偽類一般反映無法在CSS中輕松或者可靠檢測到的某個元素的狀態或者屬性;

偽元素表示DOM外部的某種文檔結構

偽類更多是定義元素的狀態,而偽元素則是改變文檔結構,在結構外另加一個沒有實際存在的元素(偽元素)

常用偽元素

1.E:before/E::before

2.E:after/E::after


1.E:before/E::before

  before 選擇器在被選元素的”內容”前面插入內容。用來和content屬性一起使用

  雖然E:before可轉化為E::before,但是你寫偽元素時要規范,用兩個冒號  p::before{ content:"在P標簽元素內容前加了內容"; color: red;}

      //它并沒有在html文件結構中

  <p></p>

2.E:after/E::after

  after選擇器在被選元素的”內容”后面插入內容

  p::after{ content:"在P標簽元素內容前加了內容"; color: red;}

  <p></p>

*content屬性與 :before 及 :after 偽元素配合使用,來插入生成內容。


CSS Hack

由于不同廠商的瀏覽器,或者是同一廠商的瀏覽器的不同版本,如IE6和IE7,對CSS的解析認識不一樣,因此會導致生成的頁面效果不同,得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS,讓它能夠同時兼容不同的瀏覽器,能在不同的瀏覽器中也能得到我們想要的頁面效果。

css hack并不是什么技術,只是針對于在不同瀏覽器上的bug的解決方案。一般都是利用各瀏覽器的支持CSS的能力和BUG來進行的。

hack這個詞,看翻譯也知道它屬于是一種“暴力”的作法,盡量找到通用方法而減少對CSS Hack的使用,大規模使用CSS Hack會帶來維護成本的提高以及瀏覽器版本變化而帶來類似Hack失效等系列問題。(對當前瀏覽器版本起作用的hack,也許升級一下,界面就又亂了)

下面我們學習常用的幾個hack,主要僅針對IE瀏覽器,IE6以下不再考慮。


1.條件hack

實例1

<!--[if IE 9]>

<style>

  body{ background-color:orange; }  //在IE9下,背景顏色為橘色

</style>

<![endif]-->

示例2

<!--[if IE]>

     <p>如果你使用IE瀏覽器將能看到我</p>   //在IE瀏覽器顯示段落p

<![endif]-->


示例3

<!--[if gt IE 6]>

<style>

.test{color:red;}

</style>

<![endif]-->

//大于ie6版本的.test類字體為紅色

通過上面三個例子我們可以發現:

條件注釋它的格式為

  <!--[ if 條件 ]>

  代碼塊

  <![ endif ]-->


大于  gt

大于或等于  gte

小于  lt

小于或等于 lte

非指定版本  !

這些條件幫我們更精確的篩選瀏覽器版本


 
標簽: WEB前端教程
打賞
 
更多>同類資訊

推薦圖文
推薦資訊
點擊排行
網站首頁  |  關于我們  |  聯系方式  |  使用協議  |  版權隱私  |  網站地圖  |  排名推廣  |  廣告服務  |  網站留言  |  RSS訂閱  |  違規舉報  |  粵ICP備19057289號-9
 
伦理电影在线手机观看神马一视频