認識css
css全稱為「層疊樣式表 (cascading style sheets)」,它主要是用於定義html內容在瀏覽器內的顯示樣式,如文字大小、顏色、字型加粗等。
例如:
type="text/css">
p
css**語法
css 樣式由選擇符和宣告組成,而宣告又由屬性和值組成。
選擇符:又稱選擇器,指明網頁中要應用樣式規則的元素。
宣告:在英文大括號「{}」中的的就是宣告,屬性和值之間用英文冒號「:」分隔。當有多條宣告時,中間可以英文分號「;」分隔。
例如:
p
注意:1、最後一條宣告可以沒有分號,但是為了以後修改方便,一般也加上分號。
2、為了使用樣式更加容易閱讀,可以將每條**寫在乙個新行內。
css樣式基本知識
內聯式css樣式,直接寫在現有的html標籤中。(適用情況:區域性特殊化)
例如:
style="color:red">這裡文字是紅色p>
css樣式**要寫在style=""雙引號中,如果有多條css樣式**設定可以寫在一起,中間用分號隔開。如:
style="color:red;font-size:12px">這裡文字是紅色p>
嵌入式css樣式,寫在當前的檔案中(適用情況:統一標籤樣式格式)
嵌入式css樣式,就是可以把css樣式**寫在type="text/css">
style>標籤之間,一般情況下嵌入式css樣式寫在
head>之間。
例如:type="text/css">
span
style>
外部式css樣式,寫在單獨的乙個檔案中(適用情況:方便**重用和管理)
外部式css樣式(也可稱為外聯式)就是把css**寫乙個單獨的外部檔案中,這個css樣式檔案以「.css」為副檔名,在內(不是在標籤內)使用<
link
<
link href=
"base.css" rel=
"stylesheet"
type
="text/css"
/>
注意:1、css樣式檔名稱以有意義的英文本母命名,如 main.css。
2、rel=
"stylesheet"
type
="text/css" 是固定寫法不可修改。
3、<
link
>標籤位置一般寫在標籤之內。
三種方法的優先順序:就近原則(離被設定元素越近優先級別越高)。
css選擇器
每一條css樣式宣告(定義)由兩部分組成,形式如下:
選擇器
選擇器指明了{}中的「樣式」的作用物件
標籤選擇器
標籤選擇器其實就是html**中的標籤。如右側**編輯器中的、、、、
類選擇器
語法:
.類選器名稱
注意:1、英文圓點開頭
2、其中類選器名稱可以任意起名(但不要起中文噢)
使用方法:
第一步:使用合適的標籤把要修飾的內容標記起來,如下:
膽小如鼠span>
第二步:使用class="類選擇器名稱"為標籤設定乙個類,如下:
class="stress">膽小如鼠span>
第三步:設定類選器css樣式,如下:
.stress/*類前面要加入乙個英文圓點*/
id選擇器
在很多方面,id選擇器都類似於類選擇符,但也有一些重要的區別:
1、為標籤設定id=」id名稱」,而不是class=」類名稱」。
2、id選擇符的前面是井號(#)號,而不是英文圓點(.)。
類選擇器和id選擇器的區別
相同點:可以應用於任何元素
不同點:
1、id選擇器只能在文件中使用一次。與類選擇器不同,在乙個html文件中,id選擇器只能使用一次,而且僅一次。而類選擇器可以使用多次。
2、可以使用類選擇器詞列表方法為乙個元素同時設定多個樣式。我們可以為乙個元素同時設多個樣式,但只可以用類選擇器的方法實現,id選擇器是不可以的(不能使用 id 詞列表)。例如:
class="類名1 類名2">
子選擇器
子選擇器,即大於符號(>),用於選擇指定標籤元素的第一代子元素。
包含(後代)選擇器
包含選擇器,即加入空格,用於選擇指定標籤元素下的後輩元素。如:
.first span
>作用於元素的第一代後代,空格作用於元素的所有後代。
通用選擇器
通用選擇器是功能最強大的選擇器,它使用乙個(*)號指定,它的作用是匹配html中所有標籤元素。
偽選擇符
類選擇符,它允許給html不存在的標籤(標籤的某種狀態)設定樣式,比如說我們給html中乙個標籤元素的滑鼠滑過的狀態來設定字型顏色:
a:hover,現在比較常用的還是 a:hover 的組合。
分組選擇符
為html中多個標籤元素設定同乙個樣式時,可以使用分組選擇符(,)
例如:
h1,span
css的繼承、層疊和特殊性
繼承繼承是一種規則,它允許樣式不僅應用於某個特定html標籤元素,而且應用於其後代。但注意有一些css樣式是不具有繼承性的。如border:1px solid red;
特殊性:瀏覽器是根據權值來判斷使用哪種css樣式的,權值高的就使用哪種css樣式。
標籤的權值為1,類選擇符的權值為10,id選擇符的權值最高為100。層疊
層疊就是在html檔案中對於同乙個元素可以有多個css樣式存在,當有相同權重的樣式存在時,會根據這些css樣式的前後順序來決定,處於最後面的css樣式會被應用。
重要性有些特殊的情況需要為某些樣式設定具有最高權值,可以使用!important來解決,注意:!important要寫在分號的前面。
當網頁製作者不設定css樣式時:
瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式,但記住!important優先順序樣式是個例外,權值高於使用者自己設定的樣式。
HTML CSS學習筆記
利用標籤中style屬性來改變每個標籤的顯示樣式 適用於單個標籤的樣式修改。不靈活 this is p tag 內嵌形式 可用於同類標籤的樣式統一修改 依然不夠靈活 表示後面的所有table中的文字預設顏色如我所設定。前提是已經存在乙個定義好的css檔案,網頁的一部分樣式需要用到,那麼可以採用這種方...
html css學習筆記
本人正經職業位android 開發,無奈現在社會壓力太大,對做人的要求越來越高,只掌握一門技術根本不好意思說自己是一名程式設計師,更無法在這個社會生存。本人只好順應時代發展的需要,不斷提高自己的綜合水平,提高對自身的要求,選擇了去學習html和css等前端的有關知識,新手入門,記錄一些學習過程中的筆...
html css學習筆記
1.html結構標準 2.css樣式標準 3.js行為標準1.ie 2.谷歌 3.火狐 4.蘋果 5.歐朋 注意 其他瀏覽器都用別人瀏覽器技術,只是更換了 doctype html 描述當前檔案的版本資訊,如果沒有詳細說明就是5.0版本 html html檔案 head 網頁的頭部 meta cha...