博主信息
DELETE的博客
博文
1
粉絲
0
評論
0
訪問量
384
積分:0
P豆:2
最新更新
CSS樣式簡單總結2019-05-22
博文分類
CSS樣式簡單了解1篇
熱門文章
CSS樣式簡單總結386

新疆十一选五综合走势图乐彩网:CSS樣式簡單總結

2019年05月22日 19:18:37閱讀數:386博客 / DELETE的博客 / CSS樣式簡單了解

新疆十一选五预测号码今天 www.envkt.com <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<pre>

標簽四個通用屬性是:id,class,title style

id:相等于網頁元素***號,用來唯一標識網頁元素

class:相等于標簽的類屬性,用于元素分類

title:相等于元素簡介,如元素的用途

style:是用來描述元素的寬度,高度,顏色,輪廓等


css中樣式由二部分組成:選擇符和聲明塊

聲明塊中的每一條語句就是一個樣式聲明,由屬性名與對應的值構成。元素是通過標簽來包裝,用屬性來描述,因其,可以通過標簽和標簽中的屬性來選擇元素


用屬性選擇元素可以用id,class,title等

例:

img{

border-radius:50%;  設置圖形輪廓

border:2px solid red;  設置圖像邊框

}



選擇符是根據元素特征來定位,因此元素標簽與屬性以及位置都可以當做選擇符來使用

選擇符:

1.標簽選擇符(常用)

例:p{text-align:center;}  段落文本居中(用標簽名稱表示,用來描述網頁元素類型的通常與其他選擇符使用,返回一組元素)



2.id選擇符

例:#header{backgroud-color:#ccc;}    設置背景為灰色(id選擇符用#表示,用來選擇網頁中用id屬性聲明的元素,只返回一個元素)



3.類選擇符

例:.blue{color:blue;}  設置元素文本顏色為藍色(類選擇符用英文的點"."來表示 用來選擇使用了class屬性聲明的元素,通常返回一組相關元素)



4.屬性選擇符

例:[title="//www.envkt.com"]{font-size:20px;}  將具有改屬性的元素文本大小設置為20像素  (除class和style以外的屬性,都可以。屬性放在一對方括號中[]可同時指定多個屬性還可以對屬性值進行正則查詢)



5.群組選擇符

h1,h2,h3,h4,h5,h6{font-weight:lighter;}  去掉標題元素的加粗樣式 (可以設置多個元素共用樣式,用逗號隔開每個選擇符)



6.后代選擇符

例:section h1{color:red;} 將section元素下面所有h1元素文本設置為紅色  (根據元素之間di屬關系來選擇,多個選擇符之間,用空格分隔)



7.子代選擇符

例:div>h1{color:green;} 將div 元素下面子級h1元素文本設置為綠色  (子代選擇符,只選擇當前元素直接子元素,用>號表示 子代選擇符,非常的復雜,里面應用了大量的偽類元素,是我們學習的重點?。。。?/p>



8.偽類選擇符

例:visited{color:gray;} 將訪問過的鏈接文本顏色設置為灰色  (偽類主要應用在特定標簽上,表示當前的元素的狀態,例如標簽的4種狀態;未訪問,已訪問,鼠標懸停,點擊中等)



9.偽元素

例:first-letter:設置段落首行的首字母樣式

first-line:設置段落首行文本的樣式

(設置段落首字母下沉效果,或者首行的顯示效果  比較合適英文,中文應用不多)



10.通用與同輩選擇符(不常用)

例:*{font-size:12px;}  設置網頁中文本均為12像素

p + a {color:pink;}  設置p和相鄰a標簽文本為粉色

通用選擇符星號"*"與同輩選擇符加號"+"

通用選擇符:一次性設置所有標簽的統一樣式,不僅效率低,而且影響了樣式繼承

同輩選擇符:我們通常用其他更加高效的選擇符代替它



樣式寫在哪里呢?

1.寫在元素標簽的style屬性中。(僅對當前元素有效)

2.寫在當前頁面頭部的style標簽中。(僅對當前頁面所有元素有效)

3.寫在獨立的css文件中。(對所有引用該文件的頁面均有效)

css文件引入方式:<link rel="stylesheet" href="style.css">



(1).在實際生活中,標簽選擇符很少單獨使用,通常與其他類型選擇符組合在一起以達到精準定位元素的目的。

用標簽來選擇網頁元素是最直觀的方法?。。。ɑ靖袷劍罕昵┟?空格 { 屬性名 冒號:屬性值; }  )



(2).用id選擇符選擇的元素,必須在當前頁面中,是唯一的(id 選擇符,通常用來設置網頁中的唯一元素如網頁頭部,底部或者側邊欄等大多與布局元素配對使用)   (頁面僅有唯一一個id選擇符?。。。。。。?/p>

例:

#green{

color:green;

}

<h1 id="green">永久免費</h1>



(3).如果網頁上有多個具有相同樣式的元素就使用類選擇符,不僅高效,而且靈活,類選擇符是我們工作中使用最多的一種選擇符(多多練習?。。?/p>

例:.circle {

border-radius:50%;  設置邊框樣式為圓形

opacity:0.5;  設置透明度為0.5

}

<img src="images/vfj.jpg" width="120" alt="">


(4).css的屬性選擇符中,屬性名是放在一對方括號"[]"中的例如:[title]

如果要使用多個屬性時,可以連續寫多個,另外還可以指定屬性具體的值,來更精確的選擇元素,甚至可以用正則,來進行范圍匹配

例:

/*css文件*/

[alt] {border-radius:50%; border: 50px solid red;}

[alt="小魔女"] {border: 5px solid blue;}

[alt] [title] {border: 5px solid green;}

[alt^="china"] {border: 5px solid pink;}

[alt$="heyzo"] {border: 5px solid purple;}

[alt~="php"] {border: 5px solid yellow;}

[alt|="tokyo"] {border: 5px solid tomato;}



<link rel="stylesheet" type="text/css" href="style.css">


<img src="images/xdb.jpg" width="110" alt="小魔女">

<img src="images/xdb.jpg" width="110" alt=" " title="">

<img src="images/xdb.jpg" width="110" alt="china hefei">

<img src="images/xdb.jpg" width="110" alt="japan heyzo">

<img src="images/xdb.jpg" width="110" alt="php mysql">

<img src="images/xdb.jpg" width="110" alt="tokyo-hot">


方法:

[屬性名^=屬性值]:指定起始字符

[屬性名$=屬性值]:指定結束字符

[屬性名|=屬性值]:以該值開頭并以空格分隔

[屬性名~=屬性值]:以該值開頭并以'-'分隔

屬性選擇符,提供了一個更加強大的選擇元素的方法



(5).群組選擇符,從字面意義上看,就是一次性的選擇多個元素統一進行樣式設置,每個選擇符之間用逗號分隔,然后把共用樣式寫到聲明塊中即可

例:

h1,p {

font-size:40px;

color:#f69;

}


<h1>php</h1>

<p>你好呀</p>



(6).后代選擇器 :第一個選擇符是起始點,用空格與后面的選擇符分隔開 可以找到所有符合條件的元素包括兒子級,孫子級

例:

父選擇符 后代選擇符

div p img {

border: 2px solid #F00;

}




例:

h1 span {

font-size:16px;

color:blue;

}

ol li img {

width: 60px;

}

ol li {

font-size:20px;

color:red;

}


<h1>php<span>中文網</span></h1>

<div>

<h3>電影</h3>

<ol>

<li><img src="images/xdb.jpg" width="110" alt="">xcsd</li>

<li><img src="images/xdb.jpg" width="110" alt="">cdf</li>

<li><img src="images/xdb.jpg" width="110" alt="">cdw</li>

</ol>

</div>




(7).子代選擇符:僅選擇直接子元素。子代選擇符還支持偽類

例:

div>a {     

color: red;

}

li:first-child {color: red;}  設置li第一行為紅色

li:last-child {color:red;}  設置最后面一行為紅色

li:nth-child(5) {color:red;}  設置第五行為紅色

li:nth-child(even) {color:red;}  設置偶數行文本成紅色

li:nth-child(odd) {color:red;}  設置基數行文本成紅色


<ol>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

</ol>



(8).通用選擇符:通用選擇符是用一個" * "號,一次性將頁面上所有的元素設置成指定的樣式  ,經常用來重置頁面所有的默認樣式。(謹慎使用?。。。?/p>

例:

/*元素默認樣式全部被自定義樣式所替代*/

* {         

font-size: 16px;

color: tomato;

margin:0;

padding: 0;

}


/*同級且相鄰的關系 (僅設置一個h2元素而另一個標題沒有發生變化)*/

h1+h2 {

color: red;

}


/*同級不相鄰的關系  (設置了另外一個元素為紅色了)*/

h1~h2 {

color: red;

}


/*同輩選擇符又叫兄弟選擇符*/





樣式層疊的問題(對于同一個元素,將不同的樣式,層層疊加上去,這就是層疊樣式表css名稱的由來)

標簽樣式的來源:

1.瀏覽器默認樣式

2.用戶自定義樣式(重點?。。。?/p>


樣式層疊的問題,是通過樣式聲明的位置,以及涉及的對象來設置樣式不同的優先級來解決的


類樣式的優先級明顯高于標簽樣式




標簽樣式:將包裝元素的標簽樣式重新定義,如果標簽樣式修改了,那么標簽的元素樣式自然也被修改

例:

/*標簽樣式直接修改默認樣式*/

h2 {

font-size: 3em;   設置自定義樣式,使得瀏覽器默認的值被修改

color: red;

}




類樣式:如果要將頁面上某些元素設置成統一的外觀就使用類樣式(類樣式,僅僅做為標簽class屬性的值存在,因此,類樣式可以應用到更多的標簽上甚至其他頁面都可以引用,所以更加通用)

例:

/*維護時想修改某一些代碼時會產生代碼冗余,利用類樣式這樣做就不會了*/

.heagline {

font-size: 1.5em;

font-weight: bold;

color: green;

}

.red {

color: red;

}


/*同一個class可以寫多個類名以" " 空格隔開,不用寫太多代碼,使得代碼簡潔*/

<p class="heagline red">類樣式的優先級明顯高于標簽樣式</p>




id樣式:具有id屬性的元素,在當前頁面中,應該是唯一的,所以通過id屬性添加到元素的樣式,(優先級要大于類元素?。。。┯玫牟⒉歡?,但有的時候非他不可

例:

/*這里樣式會變成紅色,因為id的級別比其他的都要高,它會覆蓋掉標簽樣式和類樣式*/

h2 {

color: green;

}

.blue {

color: blue;

}

#red {

color: red;

}

<h2 id="red">優先級要大于類元素?。?!</h2>





行內樣式:是通過標簽屬性style,進行設置,其樣式僅適用當前元素。類樣式和id樣式,也是通過標簽屬性來調用,但是他們的樣式代碼是寫在標簽外面的,可以被多個標簽調用,所以行內樣式的作用范圍最小,級別也是最高

例:

img {

border: 15px solid green;  設置邊框為綠色

}

.blue {

border: 15px solid blue;

}

#red {

border: 15px solid red;

}

/*在img標簽中,添加style屬性 在它的屬性值中寫入樣式聲明*/

<img id="red" 

style="border: 15px solid yellow;" 

src="timg.peg" width="300" alt="">



行內樣式的優先級大于id樣式,大于類樣式,大于標簽樣式??!











</pre>

</body>

</html>



全部評論

文明上網理性發言,請遵守新聞評論服務協議

條評論
暫無評論暫無評論!