CSS基礎(chǔ)教程

smartlion 發(fā)布于2019-08-28 18:08 / 3540人閱讀

摘要：簡介概述指層疊樣式表決定元素如何顯示內(nèi)容與樣式分離多個樣式定義可層疊為一層疊次序瀏覽器缺省設(shè)置外部樣式表內(nèi)部樣式表位于標(biāo)簽內(nèi)部內(nèi)聯(lián)樣式在元素內(nèi)部基本語法語法結(jié)構(gòu)高級語法選擇器的分組繼承繼承中的屬性重寫從中繼承的屬性

CSS簡介 CSS概述

CSS指層疊樣式表（Cascading Style Sheets）

決定HTML元素如何顯示

內(nèi)容與樣式分離

多個樣式定義可層疊為一

層疊次序

瀏覽器缺省設(shè)置

外部樣式表

內(nèi)部樣式表（位于標(biāo)簽內(nèi)部）

內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）

CSS基本語法 CSS語法結(jié)構(gòu)

CSS高級語法 選擇器的分組

h1,h2,h3,h4,h5,h6 {
  color: green;
}

繼承

body  {
     font-family: Verdana, sans-serif;
}


td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
}


p  {
     font-family: Times, "Times New Roman", serif;
}

派生選擇器


h2 strong {
     color: blue;
}

id選擇器


#sidebar {
    border: 1px dotted #000;
}


#sidebar h2 {
    font-size: 1em;
}

類選擇器







.fancy {
    color: #f60;
}

.fancy td {
    color: #f60;
}

td .fancy {
    color: #f60;
}

td.fancy {
    color: #f60;
}

屬性選擇器

[title]
{
    color:red;
}

[title=W3School]
{
    border:5px solid blue;
}

input[type="text"]
{
  width:150px;
}

CSS創(chuàng)建 外部樣式表

內(nèi)部樣式表

內(nèi)聯(lián)樣式

This is a paragraph

云服務(wù)器 GPU云服務(wù)器 css基礎(chǔ)教程 css基礎(chǔ) 基礎(chǔ)css 基礎(chǔ)選擇器css

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111044.html

相關(guān)文章

[譯]148個資源讓你成為CSS專家

摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關(guān)于基礎(chǔ)特性，一份關(guān)于布局。核心第一篇一份來自的基礎(chǔ)參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎(chǔ)指南，包含使用的好處介紹個方法快速寫成高質(zhì)量的寫出高效的一些提示。迄今為止，我已經(jīng)收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設(shè)計脫穎而出。 CSS3 資源 20個學(xué)習(xí)CSS3的有用資源 C...

impig33 2019-08-29 11:10 評論0 收藏0
HTML5+CSS3網(wǎng)站設(shè)計教程 (張曉景,胡克) [iso]

摘要：網(wǎng)站設(shè)計教程目錄第章網(wǎng)頁和網(wǎng)站的基礎(chǔ)知識第章使用標(biāo)準(zhǔn)設(shè)計和制作第章和基礎(chǔ)第章樣式基礎(chǔ)第章布局入門第章設(shè)置頁面背景圖像第章設(shè)置頁面中的圖像第章文本內(nèi)容排版第章設(shè)置表單樣式第章設(shè)置列表樣式第章設(shè)置頁面超鏈接樣式教程地址網(wǎng)站設(shè)計教程張曉景胡克《HTML5+CSS3網(wǎng)站設(shè)計教程》系統(tǒng)地講解了CSS的基礎(chǔ)理論和實際運用技術(shù)，并結(jié)合多個案例講解了采用CSS與層布局相結(jié)合制作網(wǎng)頁的方法，在詳細(xì)講解各個案例...

zombieda 2019-04-23 14:38 評論0 收藏0
前端之CSS基礎(chǔ)學(xué)習(xí)

摘要：上面五個問題就是我總結(jié)的基礎(chǔ)概念，學(xué)習(xí)過程中一定要把它們弄明白別忘了有哦。請帶著以下幾個問題進(jìn)行學(xué)習(xí) CSS是什么 CSS的引用方式 CSS選擇器 CSS優(yōu)先級 CSS盒模型基礎(chǔ)知識學(xué)習(xí)和實例演練教程 MDN中css教程CSS基礎(chǔ)學(xué)習(xí)教程（css快速入門）CSS參考手冊（便于了解更多css屬性）CSS3教程（適用于移動端開發(fā)的css新特性）入門學(xué)習(xí)，一定要快，沒有必要花大量時...

Hwg 2019-08-29 12:32 評論0 收藏0
前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
做IT這幾年，我整理了這些干貨想要送給你!

摘要：資源獲取方式根據(jù)下面的索引，大家可以選擇自己需要的資源，然后在松哥公眾號牧碼小子后臺回復(fù)對應(yīng)的口令，就可以獲取到資源的百度云盤下載地址。公眾號二維碼如下另外本文會定期更新，松哥有新資源的時候會及時分享給大家，歡迎各位小伙伴保持關(guān)注。沒有一條路是容易的，特別是轉(zhuǎn)行計算機這條路。松哥接觸過很多轉(zhuǎn)行做開發(fā)的小伙伴，我了解到很多轉(zhuǎn)行人的不容易，記得松哥大二時剛剛決定轉(zhuǎn)行計算機，完全不知道這...

王晗 2019-08-16 17:41 評論0 收藏0