CSS3初步

時間 2019-11-11

標籤 css3 css 初步欄目 CSS 简体版

原文原文鏈接

1、CSS與CSS3的區別css

很是簡單，CSS表明「Casading Style Sheets」，就是樣式表，是一種替代併爲網站添加樣式的標記性語言。如今所使用的CSS基本是在1998年推出的CSS2的基礎上發展而來的。10年前在internet開始普及的時候，就可以使用樣式表對網頁進行視覺效果的統一編輯，可是在10年間CSS基本沒有什麼太大的變化，一直到2010年終於推出了一個全新的版本---CSS3 。CSS3只是表示下一代CSS，3只是版本號，css3在css2.1版本上加入了一些新特性。 CSS3到底給咱們帶來了哪些新特性呢？簡單的說，CSS3把不少之前須要使用圖片和腳原本實現的效果，只須要短短几行代碼就能搞定。好比圓角，圖片邊框，文字陰影和盒陰影等。CSS3不只能簡化前端開發工做人員的設計過程，還能加快頁面載入速度。html

2、CSS3 的新特性前端

圓角效果 java

圖形化邊界css3

塊陰影與文字陰影 web

使用 RGBA 實現透明效果 jsp

漸變效果佈局

使用 @Font-Face 實現定製字體字體

多背景圖網站

文字或圖像的變形處理（旋轉、縮放、傾斜、移動）

多欄佈局

媒體查詢

3、CSS3技術概述

CSS3選擇器

CSS3文字與文字相關樣式

CSS3盒相關樣式

CSS3背景與邊框相關樣式

CSS3中的變形處理

CSS3佈局相關樣式

CSS3媒體查詢（Media Queries）

CSS3顏色相關樣式

CSS3漸變

4、CSS3選擇器

1. 屬性選擇器

[att=「value」] 匹配屬性等於某特定值的元素

[att^="value"] 匹配屬性包含以特定的值開頭的元素

[att$="value"] 匹配屬性包含以特定的值結尾的元素

[att*=「value」] 匹配屬性包含含有特定的值的元素

二、僞元素

僞元素選擇器不是針對真正的元素使用的選擇器，而是針對css中已定義好的僞元素使用的選擇器，

css中有以下四種 first-line，first-letter，before，after

例如：p:first-line{color:red;},p:after{content：」內容」}

<p>
今兒天氣能夠！！<br /> 今兒天氣能夠！！<br /> 今兒天氣能夠！！<br />
</p>

三、結構性僞類選擇器

在css3中引入的結構行僞類選擇器的共同特性是容許開發者根據文檔樹中的結構來指定元素樣式。

:root :not :empty :target

:nth-child(n) :nth-last-child(n)

:only-child :first-child :last-child

詳解：

1. root :root 僞類選擇頁面的根元素。十有八九根節點是 <html> 元素，例如： :root { background-color: yellow; }

2. not :not 想對某個結構元素使用樣式，可是想排除這個結構元素下面的子結構元素。例如： body *:not(h1) { background-color: yellow; }

3.empty empty 當元素內容爲空時被選中。例如： :target 目標當跳轉到目標是進行改變 :empty { background-color: yellow; }

4.target 例如： :target 目標當跳轉到目標是進行改變

<table>
		<tr>
			<td>a</td>
			<td>b</td>
		</tr>
		<tr>
			<td>c</td>
			<td></td>
		</tr>
	</table>

<a href="#html">html</a>
	<a href="#jsp">jsp</a>

	<div id="html">
		<h3>this is html</h3>
	</div>

	<div id="jsp">
		<h3>this is jsp</h3>
	</div>

<ul>
		<li>今兒天氣能夠！！</li>
		<li class="la">今兒天氣能夠！！</li>
		<li>今兒天氣能夠！！</li>
		<li>今兒天氣能夠！！</li>
</ul>

<ul>
		<li>今兒天氣能夠！！</li>
		<li class="la">今兒天氣能夠！！</li>
		<li><p>哈哈</p></li>
		<li>今兒天氣能夠！！</li>
		<li>今兒天氣能夠！！</li>
	</ul>

5、CSS3漸變效果

background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue))

漸變的類型? (linear)
漸變起頭的X Y 軸座標(0 0 – 或者left-top)
漸變結束的X Y 軸座標(0 100% 或者left-bottom)
起頭的顏色? (from(red))
竣事的顏色? (to(blue))

background:-webkit-linear-gradient(top, red, blue);

請注重咱們將漸變的類型——linear——放到了屬性前綴中了
漸變從哪裏起頭 ? (top – 咱們也可使費用數，比如 -45deg)
起頭的顏色? (red)
竣事的顏色? (blue)

<div class="div"></div>

6、CSS3文字陰影

  <p class="p">
         今每天氣不錯，很是適合提早放學1節課<br>
         今每天氣不錯，很是適合提早放學2節課<br>
         今每天氣不錯，很是適合提早放學3節課<br>
         今每天氣不錯，很是適合提早放學4節課<br>
   </p>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。