CSS基础---日记4
1.CSS的概述：
問題：1.讓html頁面中所有的文本都變成紅色
? ? ? ? 2.頁面中所有的div都變成藍色
HTML的屬性不足：?
完成相同的效果，不同的標記使用不同的屬性：
< body text="red">文本顏色為紅色
<font color="red">文本顏色為紅色
2.什么是CSS？
層疊樣式表，級聯樣式表，樣式表（cascading style sheet）
定義HTML在頁面中的樣式
1.實現了內容（HTML元素）與表現（css樣式）相分離
2.提高了代碼的可重復性和可維護性
?CSS與HTml之間的關系和使用規則：
html:用于搭建網頁結構，構建內容
css:專門定義頁面的樣式，與內容無關
w3c建議盡量使用css樣式來取代HTML的屬性：
1.允許被css取代的屬性：
ex:< body text="">
? ? < font ?color="">
?
無法被取代的屬性：
< table>
? ? ? <tr>
? ? ? ?< td colspan="2"></td>
? ? ?</tr>
</table>
?
2.css的語法
1.使用css樣式表
1.css樣式表的使用方式
? ?1.內聯方式
內聯方式：又稱為行內樣式，內聯樣式
將樣式定義在HTML元素中
CSS語法（重點）
1.將樣式屬性及值 ?聲明在元素的style元素中
<ANY style="樣式聲明；樣式聲明；”>
2.樣式聲明的語法：
樣式聲明是由樣式屬性及值組成的
語法：樣式屬性：值； 樣式屬性：值
ex:樣式屬性：
屬性：color
取值：red,yellow,blue
屬性：background-color
作用：修飾元素的背景顏色
屬性：font-size
以px為單位的數值
修飾元素的文本大小
2.內部樣式表
將若干樣式規則聲明在style元素內，用于控制整個頁面的效果
1.在<head>元素中，添加style元素
? 在style中，追加樣式規則
樣式規則：
1、選擇器
作用：規范了頁面中哪些元素能夠使用聲明好的樣式
2、若干樣式聲明
有效范圍：只在當前頁面有效
語法：
選擇器{
樣式聲明;
樣式聲明;
||
樣式屬性:值;
樣式屬性:值;
}
ex:
div{
color:red;
font-size:24px;
}
3、外部樣式表
將 樣式定義在 外部的 樣式表文件(**.css)中，可以在使用的網頁中對樣式表文件進行引入
1、創建一個樣式表文件(**.css)，用來保存若干樣式規則
2、在使用的網頁上進行樣式表的引用
<head>
<link rel="stylesheet" type="text/css"(寫不寫都可以) href="**.css(css文件URL)">
</head>
2、CSS樣式表特征
1、繼承性
大部分的樣式屬性，是可以被繼承的
如：color，font-size，background-color
父元素定義好的樣式可以用在子元素上
2、層疊性
可以為 一個元素 定義多個樣式規則
樣式規則中的樣式屬性不沖突時，多個樣式規則中的規則可以層疊為一個
3、優先級
在層疊性的基礎上，如果樣式屬性沖突的話，按照不同的樣式規則的優先級來應用樣式
優先級
1、瀏覽器缺省設置(user agent style sheet) 優先級最低
2、外部樣式表和內部樣式表
就進原則
后定義優先
3、內聯樣式 優先級最高
4、!important規則
顯示調整樣式屬性的優先級
沖突的樣式中，以!important為準
選擇器{
屬性:值 !important;
}
注意：謹慎使用
3、基本排錯
1、提示Unknown property name
樣式屬性名寫錯
2、提示Invalid property value
樣式屬性值寫錯
3、缺失;(或者寫錯)
剩下屬性都認為是當前屬性的值
4、缺失}
從缺失的位置起，下面所有的選擇器全都不起作用
4、選擇器(重難點)
1、選擇器的作用
規范頁面中哪些元素能夠使用聲明好的樣式匹配頁面元素
2、選擇器詳解
1、通用選擇器
1、作用：匹配頁面中所有的元素
2、語法：*{樣式聲明;}
3、注意
盡量少用*{}
盡可能的使用 繼承性 來取代*{}
2、元素選擇器
1、作用
指定頁面元素的默認樣式
2、語法
以元素名稱來作為選擇器名稱
元素名{}
ex：h3{} div{}
3、類選擇器
1、作用
定義好之后，可以由任意標記通過class屬性來進行引用的選擇器
2、語法
.類名{}
類名：
1、不能以數字開始
2、除英文、數字、_,-之外，不能包含其他特殊字符
3、盡量見名知意
引用：<ANY class="類名">
ex： .redcolor{color:red;}
3、引用方式-多類選擇器
允許一個元素引用多個類選擇器，引用時，選擇器名稱用 空格 隔開即可
語法：<ANY class="class1 class2 class3...">
4、聲明方式-多類選擇器
將類選擇器 和 元素選擇器 結合起來使用，以實現對某種元素中不同樣式的細分控制
語法：
元素選擇器.類選擇器{}
ex：p.redcolor{font-size:48px;}
4、ID選擇器
1、作用
定義 頁面中 指定ID值 的元素的樣式
2、語法
#idValue{樣式聲明;}
注意：選擇器，實際上就是頁面元素的id值
5、群組選擇器
1、作用
選擇器聲明以逗號隔開的選擇器列表
2、語法
選擇器1,選擇器2,選擇器3,...{}
ex: #nav,.redcolor,.bigfont,#sec,span{
color:red;
}
id為nav的元素，class為redcolor的元素，class為bigfont的元素，id為sec的元素，頁面上所有的span元素，字體顏色為 紅色
6、后代選擇器
后代：只要具備層級關系的元素都可以稱之為后代
語法：選擇器1 選擇器2{}
ex：1、要匹配 id為d1元素中的所有span元素
#d1 span{}
2、要匹配class為redback的元素中 所有 class為bigfont的元素
.redback .bigfont{}
7、子代選擇器
子代：只具備一級層級關系的元素，稱之為子代元素
語法：選擇器1>選擇器2{}
特點：不想匹配任意后代，而是想縮小范圍
8、偽類選擇器
1、作用
為了匹配元素不同的狀態的
2、偽類選擇器
所有的偽類選擇器都是以 ：作為開始
多數會配合著其他選擇器一起使用
1、鏈接偽類
:link,匹配尚未訪問的超鏈接的狀態
:visited,匹配訪問過的超鏈接的狀態
2、動態偽類
:hover,匹配鼠標懸停時的狀態
:active,匹配元素被激活時的狀態(一瞬間)
:focus,匹配元素獲取焦點時的狀態(光標閃動時)
注意：
為 超鏈接 元素定義偽類樣式時，如果鏈接偽類和動態偽類同時設置時，必須按照以下順序設定
:link{}
:visited{}
:hover{}
:active{}
3、目標偽類
4、元素狀態偽類
5、結構偽類
6、否定偽類
3、選擇器優先級
主要看權值
元素選擇器：1
類選擇器：10
偽類選擇器：10
ID選擇器：100
內聯樣式：1000
選擇器權值加到一起大的優先，權值相同，后定義優先
注意：繼承的樣式與自定義的樣式相沖突時，永遠都是以自定義為主(與權值無關)
? ? ? ? ? ? ? ? ? ? ? ?
?
轉載于:https://www.cnblogs.com/zhangailing/p/6579479.html
總結
以上是生活随笔為你收集整理的CSS基础---日记4的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java——super的使用
- 下一篇： CSS： 首字母字体变大时下划线不对齐的