CSS常用屬性和值
阿新 • • 發佈：2018-12-30
1.字型
<html> <head> <title>font</title> <style> h1{ font-family:times,courter; font-size:150% font-style:italic; font-variant:normal; font-weight:normal; } h2{ font-family:serif,times; font-size:1cm; font-style:normal; font-variant:small-caps; font-weight:900; } p{ font:oblique small-caps bold 1cm sans-serif; } </style> </head> <body> <h1>this is header one</h1> <h2>this is header two</h2> <p>this is a paragraph </p> </body> </html>
執行結果：
2.文字
<html> <head> <title>text</title> <style> h1{ letter-spacing:-3px; text-align:right; text-decoration:overline; } h2{ letter-spacing:0.5cm; text-align:center; text-decoration:line-through; } p{ text-align:left; text-decoration:underline; text-indent:1cm; text-transform:lowercase; } a{ /*去掉連結下劃線*/ text-decoration:none; text-indent:0.8cm; text-transform:uppercase; } </style> </head> <body> <h1>this is header one</h1> <h2>this is header two</h2> <p>this is a paragraph </p> <a href="http://www.baidu.com">baidu</a> </body> </html>
執行結果：
3.背景
由於博主懶的去找背景的素材，所以執行之後，醜的不堪入目，不過重點沒有錯誤嘛，大家關注程式碼所對應的效果就好了。
<html> <head> <title>background</title> <style> body{ background-color:yellow; background-image:url(a.png); background-repeat:repeat; background-attachment:fixed; } h1{ background-color:green; background-image:url(bb.png); background-repeat:repeat-x; background-position:bottom; } h2{ background-color:blue; } p{ background-image:url(bb.png); background-repeat:no-repeat; height:100px; background-position:center; } a{ background:red url(bb.png) no-repeat left center; padding:10px; } b </style> </head> <body> <h1>this is header one</h1> <h2>this is header two</h2> <p>this is a paragraph </p> <a href="http://www.baidu.com">aaaaaaaaaaaaaaaaa</a> </body> </html>
執行結果：
這張截圖有點，看起來亂七八糟的，但是根據程式碼來找效果，也是很快的。很容易搞明白，每一句程式碼的意思。url就是自己隨便哦新增的路徑，大家不必在意。
4.邊框（PS:加幾句關於滑鼠指標的程式碼）
<html>
<head>
<title>border</title>
<style>
div{
width:80px;
height:25px;
border-style:solid dotted;
cursor:move;
}
h1{
border-style:solid double dashed inset;
border-top-style:solid;
border-right-style:double;
border-bottom-style:dashed;
border-left-style:inset;
border-width:1px 2px 3px 4px;
/*
設定邊框第二種方式：
border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
*/
border-color:red yellow green blue;
cursor:wait;
}
h2{
border:3px solid green;
/*會覆蓋上面的border設定*/
border:1px dashed red;
cursor:pointer;
}
</style>
</head>
<body>
<div>
aaaaaa
</div>
<h1>this is header one</h1>
<h2>this is header two</h2>
</body>
</html>執行結果：
當滑鼠移到三個邊框上時，滑鼠指標會發生相應變化：分別變成移動，等待，還有小手的狀態。具體參考<style>標籤內的程式碼。
5.列表
<html>
<head>
<title>list</title>
<style>
</style>
</head>
<body>
<ul style="list-style-type:none; list-style-image:url(bb.png)">
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
</ul>
<ol style="list-style-type:upper-roman">
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
</ol>
</body>
</html>執行結果：
截圖中所顯示的兩個列表分別是一個無序列表和一個有序列表。
但是在以後的開發中，我們基本不會使用預設的影象，都是自定義列表前面的影象。style="list-style-type:none.這句程式碼就是將列表前的符號風格設定為空，然後我們就可以自行新增自己需要的影象了。
李碩