目標: 學習常用的樣式
1.行內樣式表 : 在元素上新增style屬性,屬性中定義樣式表
2.內部樣式表 : 在head中新增一對style標籤對,定義樣式
3.外部樣式表 : 在外部定義css檔案,使用link標籤在head中進行引入
樣式表的優先順序:
誰離元素更近優先顯示誰
選擇器
選擇器:選中某些元素元素|標籤選擇器 :根據標籤名匹配乙個,或多個元素
class|類選擇器 : 根據元素的class屬性的值,匹配乙個或者多個元素
元素的class屬性值可以重複,值列表可以有多個值
*選擇器 : 匹配頁面中的所有元素
清除瀏覽器的預設樣式:
*基礎選擇器的優先順序:
id>class>元素
選擇器1,選擇器2,選擇器3,…
選擇器位置可以使用任意選擇器選中元素。。
## 2.關係選擇器:
2)子元素(第一代子元素)選擇器1 > 選擇器2
3)相鄰兄弟選擇器 選擇器1 + 選擇器2
4)普通兄弟選擇器 選擇器1 ~ 選擇器2
background-color: 背景顏色
顏色的英文單詞
十六進製制#
rgb(0255,0255,0~255)
rgba() a是透明度 0~1 0完全透明,1完全不透明
background-image 背景
url(路徑)
background-repeat 背景影象是否平鋪
repeat 平鋪
no-repeat 不平鋪
repeat-x x軸平鋪
repeat-y y軸平鋪
background-size 背景影象大小
background-position 背景影象位置
text-align 使用在行內元素上無效
left
center
right
line-height 行高
預設一行中的內容在這一行中是垂直居中的
保證塊元素中的內容的行高與塊元素的高度相同,就能達到垂直居中的效果
vertical-align 塊元素無效
給同行的行內元素設定vertical-algin屬性控制其垂直方向的對其方式
top bottom middle
父元素:display:table;
子元素:
display: table-cell;
vertical-align: middle;
display:
inline 行內元素
block 塊元素
inline-block 行內塊 ,塊元素和行內元素的特點
以上垂直水平居中都是指行內,行內塊,文字的對齊方式
如果想要控制塊元素在其父級中的對其方式,需要利用到盒子模型
復合屬性:
background:推薦大家使用
通過復合屬性設定背景的相關樣式,沒有順序和內容個數的要求
font:不推薦使用
list-style: none ; 去除列表項標記
能看到的元素大小: 內容+內邊距+變框
給內外邊距設定值:
padding: 50px; 四周的內邊距都是50px
padding: 50px 100px; 上下50px 左右100px
padding: 10px 50px 100px; 上 右 下 左邊有對邊一樣50px
padding: 10px 50px 80px 100px; 上 右 下 左
padding:
元素設定背景的時候,內容區域設定背景,但是背景會延伸到內邊距上
border:寬度 樣式 顏色; 變框三要素
border-width:
border-style:
border-color:
border-top::寬度 樣式 顏色;
border-left::寬度 樣式 顏色;
border-right::寬度 樣式 顏色;
border-bottom::寬度 樣式 顏色;
margin:外邊距
塊元素的上下外邊距會合併,以大的值為主要
行內元素沒有上下外邊距
行內元素上下內邊距無效
文件流: 塊元素從上倒下 行內元素從左到右
讓元素按照一定的方向進行移動,當遇到周圍其他浮動元素|父級的邊界的時候停止移動
left right none
行內元素設定高度
塊元素一行顯示
clear:清除流
left 我的元素左邊不能有浮動元素
right 我的元素右邊不能有浮動元素
both 我的元素兩邊都不能有浮動元素—條件
CSS層疊樣式表
一般說來所有樣式有下面的規則 第四個最有優先性 1 browser default 瀏覽器預設 2 external style sheet 外部樣式表 3 internal style sheet inside the 瀏覽器將從mystyle.css檔案中讀採樣式定義資訊，並根據它來格式化文件 ...
CSS（層疊樣式表）
一.css是增加html的樣式,擁有對網頁物件和模型樣式編輯的能力 1 在html中引入css有3種方式 1.外部樣式表 2.內部樣式表 3.內聯樣式表 2 css選擇元素的方式 1.元素選擇器 通過元素名字進行選擇 2.id選擇器 3.class選擇器 4.子元素選擇器 5.相鄰選擇器 如果需要選...
CSS層疊樣式表
html主要控制內容 css主要控制格式。樣式表是用來指定樣式資訊的句法機制。之所以將css稱為層疊樣式表，是因為它可以在3個層次上進行定義。內聯樣式表位於開始標籤中，其設定只對該元素起作用 文件樣式表位於文件的頭部區域，能夠作用於文件的整個主體。文件樣式表的說明是作為乙個 3.通用選擇器 不管什麼...