1. 程式人生 > >CSS基本知識1-CSS基本概念

CSS基本知識1-CSS基本概念

CSS基本概念:

選擇器屬性;屬性

CSS繼承:子元素繼承父元素樣式,父子關係看DOM結構。

CSS覆蓋:

  1. 瀏覽器預設設定
  2. 外部樣式表
  3. 內部樣式表(位於 <head> 標籤內部)
  4. 內聯樣式(在 HTML 元素內部)

CSS優先:

A:文字從上到下,後宣告的樣式優先於前面出現的同一樣式例:.a{background:black;}.b{background:yellow; }<div class=” b a″>dd</div>結果:所有瀏覽器均yellow色,注意:與class=”” 引號內的順序無關,只看.def1和.def2在宣告時的順序,.def2後宣告,所以權重高

B:id宣告 > class宣告 > 標籤宣告(即HTML固有標籤,例如 div)

C: ‘!important’ 相當於無限重量

<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>

IE6不支援!important,可以使用它對IE6做Hack

通過以上我們可以觀察到,CSS更象是一個視覺化的面向物件程式設計,擁有類定義,選擇,繼承,覆蓋,優先級別,可以說CSS是一種宣告式的,更好的面向物件程式設計。

相關推薦

CSS基本知識1-CSS基本概念

CSS基本概念: 選擇器{屬性:值;屬性:值} CSS繼承:子元素繼承父元素樣式,父子關係看DOM結構。 CSS覆蓋: 瀏覽器預設設定 外部樣式表 內部樣式表(位於 <head> 標籤內部) 內聯樣式(在 HTML 元素內部) CSS優先: A:文字從上到下,後宣告的樣式

CSS基本知識3-CSS盒模型

box-sizing: content-box|border-box|inherit; 值描述 content-box 這是由 CSS2.1 規定的寬度高度行為。 寬度和高度分別應用到元素的內容框。 在寬度和高度之外繪製元素的內邊距和邊框。 border-box

CSS基本知識2-CSS選擇

選擇就是CSS定義的第一部分,可以用面向物件的模式來理解,或者宣告式的面向物件。 標準選擇: #.E 進階選擇:“,”分隔多個相同項,相當於類的例項。 如:#btn1,#btn2,.btn {...} 後代元素選擇,相當於子類: 空格分隔: .nav p {...}    #header .nav

CSS基本知識5-CSS對齊

要對齊的關鍵,在於理解塊,行的概念,塊的對齊主要靠自動計算定位,比如margin:auto,及浮動,所以最好的辦法是儘量使用行來對齊。 例項: .box { border: 1px solid #808080; height: 200

CSS基本知識6-CSS字型

    首先要考慮的是文字的排版,實際上有這玩意,Word還需要嗎?不需要了。我們列下文字所涉及的操作: CSS 文字屬性 可見,以上的這些CSS文字屬性,主要就是操作文字的顯示,當然對於網頁來說,大多數不常用。但如果想做個網頁編輯器,那就都可以派上用場了。 有了文字,我們還要設下字型,先看

CSS基本知識4-CSS行模型

display:inline、block、inline-block block元素的特點是:  總是在新行上開始;  高度,行高以及頂和底邊距都可控制;  寬度預設是它的容器的100%,除非設定一個寬度 inline元素的特點是:   和其他元素都在一行上;  高,行高及頂和底邊距不可改變;  寬度就是它

CSS基礎知識1

htm 知識 中文 tle 添加 variant 20px 樣式 lin CSS (Cascading Style Sheets) 用於渲染HTML元素標簽的樣式. 1. CSS 可以通過以下方式添加到HTML中:內聯樣式- 在HTML元素中使用"style" 屬性內部樣式

js基本知識1

事件處理程序 hang 樣式 行為 order 多個 web標準 clas 顯示 Javascript 作用 1. 網頁特效 2. 用戶交互 3. 表單驗證 Js 就是可以用來控制 結構 和 樣式 。 1.2 體驗

CSS篇之1. CSS 盒子模型,絕對定位和相對定位

1. CSS 盒子模型,絕對定位和相對定位 解答: (1)css盒子模型: CSS中,盒子模型也叫框模型,它規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。在HTML文件中,每個元素都有盒子模型。 內邊距、邊框和外邊距可以應用於一個

1css語法和基本知識

href size 聯網 mar bubuko clas content ont 加粗 1、CSS全稱為“層疊樣式表”,它主要是用於定義HTML內容在瀏覽器內的顯示樣式,如文字大小、顏色、字體加粗等。     註:使用CSS樣式的一個好處是通過定義某個樣式,可以讓不同網

css布局基本知識

pad ati 窗口 htm type 適應 ant ans webkit 一,. 頁面導入樣式時,使用link和@import有什麽區別? 語法的角度: link屬於XHTML標簽,除了加載CSS外,還能用於定義RSS, 定義rel連接屬性等作用; 而@import是CS

CSS簡介及基本知識

htm 線型 行內樣式 HR 註意 長春 cell 設置方法 GC (CSS)cascading style sheets:層疊樣式表。級聯式樣式表,簡稱:樣式表。 Sheets :就是一個樣式文件,它的擴展名為.css Style:外觀,個性化 樣式表的位置 為了學習

CSS基本知識

分開 col tle -- body 定義 type text 參考 CSS規則有兩個主要部分組成:選擇器,一條或多條聲明 選擇器通常是需要改變樣式的HTML元素 每條聲明由一個屬性和一個值組成 屬性是希望設置的樣式屬性。每個屬性有一個值。屬性和值之間用冒號分開。 CSS

CSS樣式基本知識

目錄 內聯式css樣式,直接寫在現有的HTML標籤中 CSS樣式可以寫在哪些地方呢?從CSS 樣式程式碼插入的形式來看基本可以分為以下3種:內聯式、嵌入式和外部式三種。這一小節先來講解內聯式。 內聯式css樣式表就是把css程式碼直接寫在現有的HTM

CSS——NO.2(CSS樣式的基本知識

*/ * Copyright (c) 2016,煙臺大學計算機與控制工程學院 * All rights reserved. * 檔名:text.cpp * 作者:常軒 * 微信公眾號:Wor

(7)CSS樣式基本知識

CSS樣式基本知識 內聯式css樣式,直接寫在現有的HTML標籤中。 嵌入式css樣式,寫在當前的檔案中。 外部式css樣式,寫在單獨的一個檔案中。 三種方法的優先順序:總結來說,就是–

CSS樣式基本知識,新增樣式,

認識CSS樣式 CSS全稱為”層疊樣式表(Cascading Style Sheets)”, 它主要是用於定於HTML內容在瀏覽器內的顯示樣式,如文字大小,顏色,字型加粗等。 如下列程式碼: p{ font-size:12px; c

css樣式的基本知識

1 css是什麼? 層疊樣式表,修飾網頁結構 2 如何去使用css? a.在html網頁中,加入一個style標籤,在這個style標籤裡面寫css程式碼 b.可以直接把style裡面的程式碼放到一個單獨的檔案中,通過link標籤

第七章 CSS樣式基本知識

宣告:這篇博文是通過在慕課網課程學習後,整理的筆記用來複習,在這裡非常感謝老師的講解。(我是在☞html+css基礎學習☜學習的) 內聯式css樣式,直接寫在現有的HTML標籤中 CSS樣式可以寫在哪些地方呢?從CSS 樣式程式碼插入的形式來看基本可

7. CSS樣式基本知識與選擇器、繼承、層疊和特殊性

css 樣式由選擇符和宣告組成,而宣告又由屬性和值組成   p{ color: blue }   p_選擇符   {}_宣告   color_屬性   blue_值 第7章 CSS樣式基本知識     內聯式、嵌入式和外部式三種   三種方法的優先順序:內聯式 >