css學習01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--頁面標題-->
<title>歡迎來到夢想之都</title>
<!--links方式引入css文件-->
<!--link標籤在文檔中聲明外部資源的時候使用-->
<link rel="stylesheet" type="text/css" href="./css/test.css">
<!--@import方式引入css文件-->
<style type="text/css">@import url(http://XXXX/style.css);</style>
<!--本質上都link與@import都是爲了加載css文件可是有一些細微的差異-->
<!--
差異1：老祖宗的差異。link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。
link標籤除了能夠加載CSS外，還能夠作不少其它的事情，好比定義RSS，定義rel鏈接屬性等，@import就只能加載CSS了。
差異2：加載順序的差異。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯（夢之都加載CSS的方式就是使用@import，我一邊下載一邊瀏覽夢之都網頁時，就會出現上述問題）。
差異3：兼容性的差異。因爲@import是CSS2.1提出的因此老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題。
差異4：使用dom控制樣式時的差異。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。
大體就這幾種差異了（若是還有什麼差異，你們告訴我，我再補充上去），其它的都同樣，從上面的分析來看，仍是使用link標籤比較好。
標準網頁製做加載CSS文件時，還應該選定要加載的媒體（media），好比screen，print，或者所有all等。這個我到CSS高級教程中再給你們介紹
-->
<!--css文件內部引用-->
<!--
css選擇字符名稱{
屬性：屬性值
屬性2:屬性值2
}
-->
<style type="text/css">
.p1{
/**color：前景色**/
color: #FF0000;
}
#div1{
color: #F8AE11;
height: 20px;
with:10px;
/*opacity:設置顏色透明度*/
opacity: 0.5;
/*background-color：背景顏色*/
background-color: #006486;
/*background-image：設置背景圖片，默認重複*/
background-image: url(./image/share-btn-face.png);
/*取消重複，與background-image配合使用時
repeat: 平鋪整個頁面,左右與上下
repeat-x: 在x軸上平鋪,左右
repeat-y: 在y軸上平鋪,上下
no-repeat: 圖片不重複
*/
background-repeat: no-repeat;
/*background-position：定義背景圖片的位置，一般是平面的x,y的座標定位,一般取兩個值，而且支持百分比*/
background-position: right bottom;
/*是否隨着滾動軸移動*/
background-attachment: fixed;
/*backgroud:該屬性能夠看做是以上5大屬性的集合*/
background: transparent url(./image/share-btn-face.png) repeat-x scroll center center;;
}
#ls{
/*letter-spacing：定義字符間距：letter表示英文，space表示中文*/
letter-spacing: 3px;
}
#lsw{
/*word-spacing:定義以空格爲間隔的字符間距*/
word-spacing:30px ;
}
#tt{
/*定義文本是否有下劃線 上劃線
underline: 定義有下劃線的文本
overline: 定義有上劃線的文本
line-through: 定義直線穿過文本
blink: 定義閃爍的文本
*/
width: 200px;
text-decoration: underline overline line-through;
/*定義字母大小寫狀態：capitalize首字母大寫，uppercase 大寫，lowercase小寫，可是對中文不起做用*/
text-transform: capitalize;
/*text-align:定義文本的劇中方式：left，right，center，justify 對齊每一行的文字*/
text-align: left start;
/*text-indent:定義首字母縮進*/
text-indent: 5px;
/*white-space:空格內元素的顯示方式
normal: 正常無變化(默認處理方式.文本自動處理換行.假如抵達容器邊界內容會轉到下一行)
pre: 保持HTML源代碼的空格與換行,等同與pre標籤
nowrap: 強制文本在一行,除非遇到br換行標籤
pre-wrap: 同pre屬性,可是遇到超出容器範圍的時候會自動換行
pre-line: 同pre屬性,可是遇到連續空格會被看做一個空格
*/
white-space: pre-wrap;
}
#f{
/*font-family:定義使用的字體*/
font-family: "宋體,Arial";
}
#fs{
/*font-size:能夠本身取值；也能夠取得相對尺寸（相對於其父類容器的大小），支持百分比*/
font-size: small;
/*字體的顯示方式：斜體*/
font-style: italic;
/*font-weight：定義字體的粗細*/
font-weight: bold;
/*font：font屬性和backgroud屬性同樣是一個集合定義*/
font:italic;
}
#ul{
/*
disc: 點;circle: 圓圈
square: 正方形;decimal: 數字
decimal-leading-zero: 十進制數，不足兩位的補齊前導0，例如: 01, 02, 03, ..., 98, 99
lower-roman: 小寫羅馬文字，例如: i, ii, iii, iv, v, ...
upper-roman: 大寫羅馬文字，例如: I, II, III, IV, V, ...
lower-greek: 小寫希臘字母，例如: α(alpha), β(beta), γ(gamma), ...
lower-latin: 小寫拉丁文，例如: a, b, c, ... z
upper-latin: 大寫拉丁文，例如: A, B, C, ... Z
armenian: 亞美尼亞數字;georgian: 喬治亞數字，例如: an, ban, gan, ..., he, tan, in, in-an, ...
lower-alpha: 小寫拉丁文，例如: a, b, c, ... z;upper-alpha: 大寫拉丁文，例如: A, B, C, ... Z
*/
list-style-type: square;
/*定義列的樣式圖片
list-style-image: url(./image/share-btn-face.png);
*/
/*定義列表樣式的位置*/
list-style-position:outside;
/*和backgroud集合同樣*/
list-style: circle;
}
</style>
</head>
<body>
<!--標題標籤，不能夠用來作字體大小的調整-->
<h1>歡迎來到夢想之都</h1>
<h2>歡迎來到夢想之都</h2>
<h3>歡迎來到夢想之都</h3>
<a href="#">夢想之都</a>
<p>張志剛</p>
<p>dfafa</p>
<p>dfafa</p>
<p>dfafa</p>
<p>dfffdfdfddfa</p>
<!--css文件內聯引用-->
<p style="color: #3080CB">dfaffdafdasfaf</p>
<div id="div1" >
sdfafa
</div>
<p id="ls">sfafafsf</p>
<p id="lsw">士大夫短髮短髮短髮短髮短髮 發放</p>
<p id="tt">fdf短髮短髮短髮短髮短髮短髮 可是反對分身乏術的奮鬥舒服的沙發的發生地方 短髮短髮短髮短髮地方df誰發發 收到發發</p>
<p id="f">dsfafs大發放</p>
<p id="fs">dfafafds就算啦放假啦；軍</p>
<ul id="ul">
<li>sf</li>
<li>fdafa</li>
</ul>
</body>
</html>
相關文章
- 1. 初學css（01）
- 2. 【Bootstrap基礎學習】01 Bootstrap的CSS
- 3. HTML+CSS專項複習01
- 4. 01-01 機器學習
- 5. django學習01
- 6. jade學習01
- 7. SpringMVC 學習01
- 8. jupyter學習01
- 9. python學習01
- 10. HTTP學習01
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 初學css（01）
- 2. 【Bootstrap基礎學習】01 Bootstrap的CSS
- 3. HTML+CSS專項複習01
- 4. 01-01 機器學習
- 5. django學習01
- 6. jade學習01
- 7. SpringMVC 學習01
- 8. jupyter學習01
- 9. python學習01
- 10. HTTP學習01