css/css3知識
Css/css3知識點
定義: CSS : Cascading Style Sheet ,層疊樣式表,級聯樣式表,樣式表
作用
1、實現內容和表現分離
2、提高代碼的可重用性和可維護性
使用css的理由:
1、相同的效果，不同的標簽會通過不同的屬性來表示
2、使用屬性 很不通用，一對一的修改，而不是整體修改
Css樣式表
1、使用CSS的方式
1、內聯方式(行內樣式)
將css樣式定義在某個單獨的標簽中即將 樣式內容 寫在 html元素中的style屬性中
<div style="color:red;"></div>
CSS語法:
屬性:屬性值;
<div style="屬性:屬性值;屬性:屬性值;...."></div>
常用屬性:
color : 修改當前標簽中文本的顏色
background-color : 修改當前標簽的背景顏色
2、內部樣式表
將CSS樣式定義在網頁中的 <head></head> 中
特點：針對當前網頁網頁有效
【樣式規則】 存放在 html文檔頭部 【head標簽】中的 【style 標簽】內
語法：<style type=“text/css”>
p{
color:red;
background-color:blue;
}
.content{
font-size:16px;
}
.content ,#contentWrap{
font-size:16px;
}
</style>
外部樣式表
將 樣式規則 單獨存放在 樣式表文件中(**.css),哪個頁面想使用，哪個頁面就引入當前的樣式表文件
step 1 :
創建一個文本文件，將其後綴修改為 .css
在該文件中編寫若幹 樣式規則
step 2 :
在想使用的頁面上， 通過 <link /> 引入外部樣式表
樣式表特征
1、繼承性
大多數的css樣式規則可以被繼承的。
2、層疊性
為同一個元素 定義多個 樣式規則
多個樣式規則同時存在時不沖突，多個樣式規則會合並成一個，屬性重復時以最後一個出現為準。
3、優先級
各級樣式表沖突時(行內、內部、外部)，會按照不同的優先級來應用樣式
0 : 瀏覽器缺省設置
1 : 內部樣式表 或 外部樣式表
沖突時：就近原則，誰在下，以誰為主
2 : 行內樣式(內聯樣式)
4、!important 規則
通過 !important 顯示調整樣式規則的優先級
放在屬性值之後，用 空格 來區分。 例如：font-size: 16px !important;
由!important 標識的屬性值，優先級別最高 請謹慎使用
Css基礎選擇器
別名:標簽選擇器、標記選擇器
特點：通過元素名稱作為選擇器名稱
作用：修改某一元素的默認樣式
body{}
h1{}
h2{}
2、類選擇器(類樣式)
特點：通過元素的 class 屬性來進行引用
作用：定義某一組標簽的統一樣式
語法：.className{color:red;bakcground:yellow;}
註意：className不能以數字開頭
引用：<div class="className"></div>
<h3 class="className"></h3>
註意：在一個class 中可以引用多個 類樣式,多個類樣式用 空格 隔開
例如 <div class=“myDiv firstDiv”> 我是div</div>
3、分類選擇器
由類選擇器衍生出來的新選擇器
將類選擇器 與 元素選擇器 結合使用
目的：為了更精準的定位的頁面的元素
語法：元素選擇器.類選擇器{}
例如： p.content{}
4、通用選擇器
作用：適配頁面上所用的元素，改變他們的樣式
語法：*{}
5、id選擇器(id樣式)
作用：通過頁面元素的id值來進行選擇器的引用,非常方便的定位到頁面上的一個元素。精確定位。
語法：#id{}
eg : #top{background-color:red;}
<div id="top"></div>
id的作用：
1、定義元素在頁面中的唯一標識
2、引用樣式表中的id樣式
6、群組選擇器
選擇器聲明是以 , 隔開的 選擇器列表
作用：定義一組元素的樣式
h3,p,.new,#test,div.newDiv,p.test{}
7、後代選擇器
根據元素的嵌套關系來定義的樣式
根據一個元素 去定位 它裏面的其他元素
語法：
selector1 selector2{}
<div>
<div>
<p>
<span></span>
</p>
</div>
<span></span>
</div>
8、子代選擇器
要求選擇器之間只能存在父子關系
語法:
selector1>selector2
#test>.news{
修改 id為test裏面的 class為news的元素
}
後代選擇器 和 子代選擇器 目的是為了精確匹配範圍
9、偽類選擇器
匹配元素 不同狀態時候的選擇器
語法：selector1:偽類選擇器
偽類選擇器分類：
1、鏈接偽類
:link : 適用於尚未訪問的鏈接，與:visited互斥
:visited : 適用於已訪問過的超鏈接，與:link相斥
2、動態偽類
:hover : 適用於鼠標懸停在元素上面時候的狀態
:active : 元素被激活的一瞬間的狀態
:focus : 適用於元素獲取焦點時的狀態
顏色值:
1、顏色的英文表示法(沒人用)
2、rgb(R,G,B)
R : red 0-255
G : green 0-255
B : blue 0-255
rgb(0,0,0) : 表示黑色
rgb(255,255,255) : 表示白色
rgb(125,16,72) :
3、rgb(x%,x%,x%)
rgb(30%,25%,78%)
4、#rrggbb
r:0-9 A-F
g:0-9 A-F
b:0-9 A-F
#000000 : 黑色#ffffff : 白色
#ff0000 : 紅色 #e4393c : 京東紅
5、#rgb -> #rrggbb 的縮寫
#ff0000 --> #f00;
#77aaee --> #7ae;
#e4393c --> 無
6、rgba(0,0,0,0.5)
R: 紅色值。正整數 | 百分數
G：綠色值。正整數 | 百分數
B：藍色值。正整數 | 百分數
A：Alpha透明度。取值0~1之間。
7、 opacity:設置透明度（0~1）
屬性----邊框:
1、寬度
width :
max-width:
min-width: 與 max-width一同定義元素寬度的範圍，與width沖突
2、高度
height :
max-height:
min-height:
註意：
只有 塊級以及行內塊 能夠更改 width 和 height
行內元素不能修改 width 和 height
3、溢出
屬性：overflow
作用：當內容溢出元素框時，如何處理
值: visible 顯示(默認)
hidden 隱藏(常用)
scroll 有滾動條
auto 自動,溢出則顯示滾動條，不溢出，沒有滾動條
屬性:overflow-x : 橫向溢出時處理
overflow-y ： 縱向溢出時的處理方式
簡寫方式:
border:width style color;
width:邊框線條的寬度
style:邊框線條的樣式,如實現(solid)、虛線(dotted)
color:邊框線條的顏色
一次性 設置 上下左右 四個邊框的 寬度 樣式 顏色
border:1px solid #f00;
單邊定義：
border-方向:width style color;
方向:top,bottom,left,right
border-top:2px solid #000;
border-width:四個邊框的寬度
border-style:四個邊框的樣式
border-color:四個邊框的顏色
border-方向-屬性:
方向：top,bottom,left,right
屬性：color,width,style
註意：邊框顏色 除了可以設置正常顏色值之外，還可以設置為 transparent(透明)
border-color:transparent;
border:2px solid transparent;
屬性-邊框倒角:
邊框倒角元素 的四個方向的圓角設置
屬性：border-radius
取值：
1、給定4個值， 分別表示從左上角開始 按順時針方向的四個角圓角半徑
2、給定1個值，表示四個角的圓角半徑
例如：
給定指定數值，2px , 10px
百分比,當前元素的寬度 的百分比 作為圓角半徑
單獨定義:
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius
屬性—邊框陰影:
邊框陰影
屬性:box-shadow : 給指定元素邊框增加陰影
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:陰影水平位置
v-shadow:垂直位置
blur : 可選,模糊的距離
spread :可選,陰影尺寸
color : 可選,顏色
inset : 可選,將陰影改為 內陰影 默認outset
常用寫法:box-shadow:h-shadow v-shadow blur color;
如： box-shadow: 10px 10px 5px #888888
屬性—背景:
1、背景色
2、背景圖像
屬性：background-image
取值：url(圖像路徑)
background-image:url(images/1.jpg);
background-image:url("images/1.jpg");
background-image:url(‘images/1.jpg‘);
3、背景重復(repeat)(重點)
屬性:background-repeat
取值:
repeat : 垂直、水平 雙方向重復，默認值
repeat-x:水平方向重復
repeat-y:垂直方向重復
no-repeat:不重復
4、背景定位(重點)
指的是背景圖在元素中的位置
屬性：background-position
取值1(x y 值為像素)
x y : x水平偏移位置 y垂直偏移位置
x 為正 則向右移動
x 為負 則向左移動
y 為正 則向下移動
y 為負 則向上移動
取值2(x,y為百分比）
x% y% : 相對於所在的元素的寬度 和 高度來設置 相對比例
多數用於背景圖像居中顯示
取值3： left right center top bottom
屬性----漸變:
1、什麽是漸變
在多種顏色之間進行柔和的過渡
2、語法
屬性:background-image:
取值:
linear-gradient(值,值...) --> 線性漸變
radial-gradient(值,值...) --> 徑向漸變
repeating-linear-gradient() --> 重復線性漸變
repeating-radial-gradient() --> 重復徑向漸變
屬性-線性漸變:
線性漸變 linear gradient :直線漸變
方向：向上/向下/向左/向右
語法：background-image:linear gradient (angle,color-point,colot-point ….)
其中angle 代表漸變的方向或角度 ，常見方向取值為: to top/to left/ to right/to bottom
常見 角度取值：0deg ，90deg …
color-point 代表 顏色的起始點 過渡點 結束點 一般至少我們取兩個值
常見取值 red 0%，green 50%,blue 100%
常見例子：background-image:gradient(to top,red 0%,green 50%,blue 100% )
涉及到瀏覽器兼容性問題
對不支持的瀏覽器版本:
通過瀏覽器前綴，去匹配不同的瀏覽器
Firefox : 火狐 -moz-
Chrome、Safari : -webkit-
Opera :歐鵬 -o-
屬性: 徑向漸變
徑向漸變
radial-gradient([size at position],color-point,color-point....);
size : 圓的半徑
position : 圓心出現的位置，默認為元素的中心
常見例子: background-image: radial-gradient(200px at left,red 0%,green 50%,blue 100%)
color-point的值至少取2個
屬性:重復漸變
常見用法：repeating-linear-gradient(to bottom,red 0px,green 10px,blue 20px);
屬性—轉換:
Transform ：向元素應用2D或3D轉換 。該屬性允許我們對元素進行旋轉 、縮放、移動或傾倒
在3D transform 中有下面三個方法：
transform:rotateX(angle)
transform:rotateY(angle)
transform:rotateZ(angle)
常用表達的方法：transform:rotate(7deg);
常見實現效果旋轉木馬（後期實現）
css/css3知識