標籤：style blog class c code java
CSSCSS(Cascading Style Sheets): 層疊樣式表 . 它是一種用來表現HTML或XML等檔案樣式的電腦語言. CSS能夠讓網頁表現與內容分離, 相對於HTML的表現而言, CSS能夠對網頁中的對象的位置排版進行像素級的精確控制, 支援幾乎所有的字型字型大小樣式, 擁有對網頁對象和模型樣式編輯的能力, 並能夠進行初步互動設計, 是目前基於文本展示最優秀的表現設計語言.
上面這段來自百度百科對CSS的定義,我的理解是CSS將每個HTML標籤的style進行單獨的定義,這樣就可以讓HTML專註於表現內容.
串連HTML與CSS只需在HTML的<head></head>下添加一個<link>標籤即可連結, link包含三個屬性:
1.type: 總是等於text/css
2.rel: 總是等於stylesheet
3.href:等於你css檔案的地址
實現是這樣的:
<head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title></title> </head>css基本結構
selector { property: value;}
selector: 可以是任何HTML元素, <p>, <img>, <table>, <span>...
property: 定於selecter的樣式, color, font-size, font-family, backgound-color...
value: ...
例如對<p>的定於:
p { font-family: Arial; color: blue; font-size: 24px;}
要注意的是每個語句後是有分號的.
注釋css的注釋和c與語言類似, 是這樣的:
/* I‘m a comment */數字調色盤
定義顏色時, 我們可以使用數字形式的, 這樣就以有更多的選擇, 例如:
h1 { color: #cc6666}
這裡的大小寫是不敏感的, 更多的顏色可以自己取找.
Pixels and ems前面我們調整字型大小使用的是px(像素),像這樣:
p { font-size: 10px;}
這個像素是你電腦上的, 這裡有一個問題, 如果瀏覽你網頁的裝置的像素和你電腦的不一樣會怎麼樣?
解決方案是使用em. 1em等於任何裝置上的一個顯示預設值, 因此可以這樣定義:
p { font-size: 10em;}css的內建font-family
大部分電腦理解一些流行的字型,像是Verdana, Courier, Garamond, 但每個電腦都裝有不同的字型. 為了顯示一致, CSS有一些內建字型:
serif
sans-serif
cursive
當然, 這些都是英文字型.
備用字型可以同時為font指定多個字型作為備用, 這樣第一個不行時, 會用下一個, 直到有一個行的, 像這樣:
p { font-family: Tahoma, Verdana, sans-serif;}邊框(border)屬性
可以這樣設定selecter的邊框屬性:
selector { border: 2px solid red;}
solid: 實線
dashed: 虛線
連結的特殊屬性一般建立的文本連結下面都會有一個底線, 可以設定text-decoration讓它不顯示:
a { text-decoration: none;}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
