這篇文章主要介紹“CSS基礎(chǔ)知識有什么”,在日常操作中,相信很多人在CSS基礎(chǔ)知識有什么問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”CSS基礎(chǔ)知識有什么”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
站在用戶的角度思考問題,與客戶深入溝通,找到汝城網(wǎng)站設(shè)計與汝城網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:成都網(wǎng)站設(shè)計、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、空間域名、虛擬主機、企業(yè)郵箱。業(yè)務(wù)覆蓋汝城地區(qū)。
CSS全稱為層疊樣式表(Cascading Style Sheets),通常又稱為風(fēng)格樣式表(Style Sheets),它是用來進(jìn)行網(wǎng)頁設(shè)計的;
在網(wǎng)頁制作時采用CSS技術(shù),可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制,只要對相應(yīng)的代碼做一些簡單的修改,就可以改變同一頁面的不同部分,或者頁數(shù)不同的網(wǎng)頁的外觀和格式;
內(nèi)容與表現(xiàn)分離,也就是使用前面學(xué)習(xí)得HTML語言制作網(wǎng)頁,使用CSS設(shè)置網(wǎng)頁樣式、風(fēng)格、并且CSS樣式單獨存放在一個文件中,這樣只要HTML文件引用CSS文件就可以了,便于后期的CSS樣式的維護(hù);
表現(xiàn)的統(tǒng)一,可以使網(wǎng)頁的表現(xiàn)非常同意,并且容易修改;
豐富的樣式,使得頁面布局靈活;
減少網(wǎng)頁的代碼量,增加網(wǎng)頁的瀏覽速度;
運用獨立頁面的CSS,有利于網(wǎng)頁被搜索引擎收錄;
CSS和HTML一樣都是瀏覽器能解析的計算機語言,因此CSS也有自己的語法結(jié)構(gòu);
CSS規(guī)則由兩部分構(gòu)成,選擇器和聲明,聲明必須放在大括號中{},可以是一條或多條;
每條聲明由一個屬性和值組成,屬性和值用冒號分開,每條語句以英文的分好結(jié)尾;
# h2表示選擇器 # font-size和color表示屬性 # 12px和#fff表示屬性值 p{ font-size:12px; color:#fff; }
在HTML中通過使用標(biāo)簽引入CSS樣式,
標(biāo)簽用于為HTML文檔定義樣式信息;
標(biāo)簽位于
標(biāo)簽中,它規(guī)定瀏覽器中如何呈現(xiàn)HTML文檔;
在標(biāo)簽中,type是必須屬性,用于定義style元素的內(nèi)容,值為“text/css”;
在 CSS 中,選擇器是一種模式,用于選擇需要添加樣式的元素;
所有HTML語言中的標(biāo)簽樣式都是通過不同的CSS選擇器進(jìn)行控制的;
CSS的選擇器分為三種,分別是:標(biāo)簽選擇器、類選擇器、ID選擇器;
標(biāo)簽選擇器:
一個HTML頁面由很多的標(biāo)簽組成,例如 每種HTML標(biāo)簽的名稱都可以作為相應(yīng)的標(biāo)簽選擇器的名稱,例如 需要注意的是,一個HTML頁面會有很多的 類選擇器: 類選擇器的名字可以由用戶自定義,屬性和值跟標(biāo)簽選擇器一樣,必須符合CSS規(guī)范,它的語法如下; 和標(biāo)簽選擇器不同的是,設(shè)置了類選擇器之后就要在HTML的標(biāo)簽中應(yīng)用相應(yīng)類樣式,使用標(biāo)簽的class屬性引用類樣式,如下所示; hello world! hello world! 如下圖所示,上面一行p標(biāo)簽是應(yīng)用了類樣式class1,下面一行則沒有,所以上面一行樣式有變化,下面一行沒有變化; ID選擇器: ID選擇器的使用方法和類選擇器相同,不同之處在于ID選擇器只能在HTML頁面中使用一次,因此它的針對性更強; 比如說有一個類選擇器.class1,那么它可以在頁面的多個標(biāo)簽中應(yīng)用,有一個ID選擇器class1,那么它只能在頁面 中用一次; 這是第一行喲 這是第二行喲 這是第三行喲 這是第二行喲 這是第二行喲 效果圖 在HTML頁面中,引入CSS樣式有三個方法,分別是:行內(nèi)樣式、內(nèi)部樣式和外部樣式; 行內(nèi)樣式: 行內(nèi)樣式就是在HTML中直接使用style屬性設(shè)置CSS樣式,用法為:<標(biāo)簽名 style=”樣式聲明;”>標(biāo)簽名>; 這種方法僅對當(dāng)前的HTML標(biāo)簽起作用,并且是寫在HTML標(biāo)簽中的,因此這種方法不能使得內(nèi)容和表現(xiàn)相分離,沒有體現(xiàn)出CSS的優(yōu)勢; 內(nèi)部樣式: 把CSS代碼寫在 的 這種方法的優(yōu)勢為方便在同頁面中修改樣式,但是不利于在多頁面間共享復(fù)用代碼和維護(hù)代碼,對內(nèi)容與樣式的分離也不夠徹底; 外部樣式: 實際開發(fā)中我們都是使用這種方式來引入CSS樣式,它是把CSS代碼另存為一個單獨的CSS文件,文件的擴展名為.css,然后在頁面中引入這個文件; 引入外部樣式的語法為: 這是第一行喲 這是第二行喲 這是第三行喲 這是第二行喲 這是第二行喲 css的全稱為層疊樣式表,顧名思義,css中的樣式可以疊加使用,頁面的最終效果為多個樣式疊加效果; 樣式的疊加會造成樣式之間的沖突,所以就存在優(yōu)先級的問題; 選擇器的優(yōu)先級為:標(biāo)簽選擇器>ID選擇器>類選擇器; 樣式優(yōu)先級:行內(nèi)樣式>內(nèi)部樣式>外部樣式; 由標(biāo)簽選擇器、類選擇器、ID選擇器三種基本的選擇器為基礎(chǔ),通過不同方式將兩個或者多個選擇器組合在一起而形成的選擇器叫做復(fù)合選擇器; 后代選擇器: 后代選擇器(descendant selector)又稱為包含選擇器,后代選擇器可以選擇作為某元素后代的元素; 它的語法為: 春眠不覺曉,處處聞啼鳥 后代選擇器: 交集選擇器由兩個選擇器直接連接構(gòu)成,其中第一個必須是標(biāo)記選擇器,第二個必須是類別選擇器或者ID選擇器,這兩個選擇器之間不能有空格; 它的語法為: 春眠不覺曉,處處聞啼鳥 并集選擇器: 并集選擇器簡稱集體聲明,并集選擇器是多個選擇器通過逗號連接而成的; 并集選擇器可以用來定義風(fēng)格完全相同,或者部分相同的選擇器; 語法為: CSS的繼承簡單的說就是將各個HTML標(biāo)記看做一個個容器,其中被包含的小容器會繼承包含它的大容器的風(fēng)格樣式; 所有的CSS語句都是基于各個標(biāo)記直接的繼承關(guān)系,CSS繼承是指子標(biāo)記會繼承父標(biāo)記的所有樣式風(fēng)格,并可以再父標(biāo)記樣式風(fēng)格的基礎(chǔ)上再加以修改,產(chǎn)生新的樣式,而子標(biāo)記的樣式完全不會影響父標(biāo)記。 到此,關(guān)于“CSS基礎(chǔ)知識有什么”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
、
、
、
等,CSS標(biāo)簽選擇器就是用來聲明這些標(biāo)簽的;
標(biāo)簽和
標(biāo)簽,如果我們需要在它們上面定義一個標(biāo)簽選擇器,那我們要怎么做呢;
p{
font-size:12px;
}
h2{
font-size:16px;
}
標(biāo)簽和
標(biāo)簽,標(biāo)簽選擇器一旦聲明,那么頁面的所有該標(biāo)簽都會應(yīng)用,這樣雖然用起來很方便,但是如果想要給其中一個標(biāo)簽單獨定義屬性則不能,此時需要使用類選擇器或者ID選擇器了;
# .class1為類選擇器的名字
# font-size為屬性
# 12px為屬性值
.class1{
font-size:12px;
}
六、CSS樣式引入方法
七、樣式優(yōu)先級
八、CSS復(fù)合選擇器
第一個
第二個
第三個
第四個
第五個
九、繼承特性
當(dāng)前文章:CSS基礎(chǔ)知識有什么
URL地址:http://weahome.cn/article/pjgjss.html