css介紹
概述:css指層疊樣式表，極大提高了工作效率（好處：使我們的ui看起來更加完美）。
css基礎語法
語法：屬性選擇器
selector
例：
h1
p
css高階語法
1、選擇器分組
h1,h2,h3,h4,h5,h6
2、繼承
body
例：
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
style
type
="text/css"
>
h1,a
body
style
>
head
>
<
body
>
<
h1>
應用了樣式表
h1>
<
a href
="www.cowyun.com"
>這是乙個a標籤樣式
a>
body
>
html
>
備註：根據上面例子可知，已定義的屬性會選擇自己屬性選擇器的屬性值，未定義屬性會繼承body或者其他父類的屬性值。
css派生選擇器
1、派生選擇器
通過依據元素在其位置的上下文關係來定義樣式
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
style
type
="text/css"
>
li strong
strong
style
>
head
>
<
body
>
<
p><
strong
>p標籤hello
strong
>
p>
<
ul><
li><
strong
>li標籤hello
strong
>
li>
ul>
body
>
html
>
備註：已經定義好的效果是不會被覆蓋的，沒有具體指定被我們當前的strong效果覆蓋掉。這就是派生選擇器的使用。
cssid選擇器
1、id選擇器
id選擇器可以為標有id的html元素指定特定的樣式
id選擇器以"#"定義
2、id選擇器和派生選擇器
目前比較常用的方式是id選擇器常常用於建立派生選擇器
例：html文件
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
link
rel="stylesheet"
type
="text/css"
href
="style.css"
>
head
>
<
body
>
<
p id
="pid"
>hello css<
a href
="">科沃雲
a>
p>
<
div
id="divid"
>這是div<
p>這是第乙個div
p>
div>
body
>
html
>
css文件
#pid#pid a#divid p
css類選擇器
1、類選擇器
類選擇器以一點來顯示
2、class也可以用作派生選擇器
例：html文件
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
link
rel="stylesheet"
type
="text/css"
href
="style.css"
>
head
>
<
body
>
<
p class
="pclass"
>這是乙個class效果<
a href
="">科沃雲
a>
p>
<
div
class
="divclass"
>
hello div
<
p>我愛你
p>
div>
body
>
html
>
css文件
.pclass.divclass.pclass a.divclass p
css屬性選擇器
1、屬性選擇器
對帶有指定屬性的html元素設定樣式
2、屬性和值選擇器
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
style
type
="text/css"
>
[title]
[title=te]
style
>
head
>
<
body
>
<
p title
="t"
>屬性選擇器
p>
<
p title
="te"
>屬性和值選擇器
p>
body
>
html
>
備註：屬性選擇器如果沒有指定值，他的值怎麼顯示無所謂，但如果指定其值，必須按照其具體的值來生效，如果值變化將不再生效。注意：屬性選擇器在ie6或者更低的版本是不支援的。
繁星CSS3之旅 CSS基本樣式 CSS文字
css文字 1 css文字屬性可定義文字外觀 通過文字屬性，可以改變文字的顏色 字元間距 對齊文字 裝飾文字 對文字縮排。例 doctype html html lang en head meta charset utf 8 title document title link rel stylesh...
CSS基礎 CSS3動畫
通過css3動畫屬性，我們可以建立動畫，實現簡單的動畫效果。css3動畫的實現需要用到animation屬性並配合關鍵幀 keyframes 使用。1.對需要設定動畫的元素新增animation屬性。2.設定關鍵幀 keyframes animation是所有動畫屬性的簡寫屬性，除了 animati...
css3入門筆記
1.border radius 用於建立圓角邊框 2.box shadow 新增陰影 3.border image 使用建立邊框 1.background size 能夠規定背景的尺寸，重複使用背景 以畫素或百分比規定尺寸。百分比規定，尺寸相對于父元素 2.background origin 規定背...