CSS學(xué)習(xí)筆記
- CSS＝ 層疊樣式表 cascading style sheets
- HTML 表達(dá)結(jié)構(gòu) 刮刑， CSS表達(dá)樣式
- 樣式和內(nèi)容／結(jié)構(gòu)是分離的
加入CSS的方式
- 做一個(gè)web的CSS文件
- 在頭部加入標(biāo)記，定義規(guī)則
- 單個(gè)標(biāo)記里面，加入CSS屬性
<!DOCTYPE = html>
<html>
<head>
<title>CSS學(xué)習(xí)</title>
<h1>CSS學(xué)習(xí)</h1>
<meta charset = UTF-8>
<!--CSS選擇器-->
<style>
<!-- 元素選擇器 :p em {}-->
th,td{border:1px solid blue}
th {background-color:purple}
<!-- 類(lèi)選擇器 ./# : class/id-->
*.important {color:red}
*#important{coor:gray}
th.important {color:yellow}
th.warning {width:20;}
<!--屬性選擇器-->
*[title]{color:red}
a:visited {color:#FF0F0F}
<!-- a:link a:hover a:active *.red : visited -->
</style>
</head>
<body style = "background-color : pink; background-image : url(http://gtb.baidu.com/HttpService/get?p=dHlwZT1pbWFnZS9qcGVnJm49dmlzJnQ9YWRpbWcmYz10YjppZyZyPTg5NTMyNjY3NywzNDQyODIxNjcw);background-repeat : no-repeat; background-position : 300px 300px; background-attachment: fixed">
<p class = "important" title = "屬性選擇器：開(kāi)始">開(kāi)始</p>
<!--具體style樣式具體定義 默認(rèn)顏色：透明transparent #FFFFFF / RGB / rgba ; repeat: 重復(fù) repeat-x /no-repeat ; position:center/top -->
<p style = "background-color : #FF00fF;">style #FFFFFF 定義</p>
<p style = "background-color : rgba(225,255,0,0.2)">style RGB顏色 定義<p>
<p style = "color : red">內(nèi)容</p>
<!--text-indent : 10%：頁(yè)面百分比 px:像素點(diǎn) pt:磅印刷單位 -10em:左 padding:左推 line-height:行間距 text-align:對(duì)齊方式(center）...underline/overline/line/through white-space : pre/normal/pre-wrap/no-wrap/pre-line-->
<p style = "text-indent:4em; padding:4em; line-height : 1.5;word-spacing:30px;letter-spacing : 1px;text-transform : uppercase ; text-decoration : underline;white-space : pre-wrap;direction:right"><mark >abCD
豫章 故郡</mark>，洪都新府。星分翼軫咧欣，地接衡廬。襟三江而帶五湖轨帜，控蠻荊而引甌越魄咕。物華天寶，龍光射牛斗之墟蚌父；人杰地靈哮兰，徐孺下陳蕃之榻毛萌。雄州霧列，俊采星馳喝滞。臺(tái)隍枕夷夏之交阁将，賓主盡東南之美。都督閻公之雅望右遭，棨戟遙臨做盅；宇文新州之懿范，襜帷暫駐窘哈。十旬休假吹榴，勝友如云；千里逢迎滚婉，高朋滿(mǎn)座图筹。騰蛟起鳳，孟學(xué)士之詞宗让腹；紫電青霜婿斥，王將軍之武庫(kù)蛮原。家君作宰谅摄，路出名區(qū)；童子何知肛根，躬逢勝餞像鸡。(豫章故郡 一作：南昌故郡)
時(shí)維九月活鹰，序?qū)偃铩Ａ仕M而寒潭清只估，煙光凝而暮山紫志群。儼驂騑于上路，訪(fǎng)風(fēng)景于崇阿蛔钙。臨帝子之長(zhǎng)洲锌云，得仙人之舊館。層巒聳翠吁脱，上出重霄；飛閣流丹兼贡，下臨無(wú)地等曼。鶴汀鳧渚禁谦，窮島嶼之縈回州泊；桂殿蘭宮，即岡巒之體勢(shì)渴肉。（層巒 一作：層臺(tái)仇祭；即岡 一作：列岡乌奇；天人 一作：仙人）
披繡闥，俯雕甍试伙，山原曠其盈視疏叨，川澤紆其駭矚。閭閻撲地秀又，鐘鳴鼎食之家；舸艦迷津袱讹，青雀黃龍之舳椒丧。云銷(xiāo)雨霽壶熏，彩徹區(qū)明棒假。落霞與孤鶩齊飛帽哑，秋水共長(zhǎng)天一色妻枕。漁舟唱晚粘驰，響窮彭蠡之濱愕掏，雁陣驚寒亭珍，聲斷衡陽(yáng)之浦肄梨。(軸 通：舳众羡；迷津 一作：彌津；云銷(xiāo)雨霽齐婴，彩徹區(qū)明 一作：虹銷(xiāo)雨霽情妖，彩徹云衢)
遙襟甫暢，逸興遄飛料睛。爽籟發(fā)而清風(fēng)生恤煞，纖歌凝而白云遏。睢園綠竹，氣凌彭澤之樽；鄴水朱華，光照臨川之筆曾沈。四美具姐帚，二難并。窮睇眄于中天障涯，極娛游于暇日罐旗。天高地迥，覺(jué)宇宙之無(wú)窮唯蝶；興盡悲來(lái)九秀，識(shí)盈虛之有數(shù)。望長(zhǎng)安于日下粘我，目吳會(huì)于云間鼓蜒。地勢(shì)極而南溟深，天柱高而北辰遠(yuǎn)。關(guān)山難越友酱，誰(shuí)悲失路之人晴音；萍水相逢，盡是他鄉(xiāng)之客缔杉。懷帝閽而不見(jiàn)锤躁，奉宣室以何年？(遙襟甫暢 一作：遙吟俯暢)
嗟乎或详！時(shí)運(yùn)不齊系羞，命途多舛</p>
<!-- text-shadow : x y 擴(kuò)散 #000000 outline-style: solid double dotted groove ridge inset outset ..-->
<p style = "text-shadow : 0px -1px 0px #000000,0px 1px 3px #606060; color = #606060; outline-color:red;outline-style:solid;outline-width :1;">INSERT</p>
<p style = "text-shadow:3px 5px 5px rgba(0,255,0,1);">a new tea明月幾時(shí)有？把酒問(wèn)青天霸琴。不知天上宮闕椒振，今夕是何年？
我欲乘風(fēng)歸去梧乘，又恐瓊樓玉宇澎迎，高處不勝寒。起舞弄清影选调，何似在人間夹供？
轉(zhuǎn)朱閣，低綺戶(hù)仁堪，照無(wú)眠哮洽。不應(yīng)有恨，何事長(zhǎng)向別時(shí)圓弦聂？
人有悲歡離合鸟辅，月有陰晴圓缺，此事古難全莺葫。但愿人長(zhǎng)久匪凉，千里共嬋娟。
——蘇軾《水調(diào)歌頭·明月幾時(shí)有》
附注：“去”與“宇”捺檬，“合”與“缺”洒缀，夾葉仄韻。
含有哲理的句子：人有悲歡離合欺冀，月有陰晴圓缺树绩，此事古難全。</p>
<!--字體 serif 矢量字體 sans-serif monospace等寬字體 cursive手寫(xiě)字體 hei黑體隐轩。饺饭。。-->
<!--new 斜體-->
<p style = "text-indent:4em;
font-family : TimesNR;
font-style : italic;
font-variant : small-caps;
font-weight : 400;
font-size : 2em"> a new tea明月幾時(shí)有职车？把酒問(wèn)青天瘫俊。不知天上宮闕鹊杖，今夕是何年？
我欲乘風(fēng)歸去扛芽，又恐瓊樓玉宇骂蓖，高處不勝寒。起舞弄清影川尖，何似在人間登下？
轉(zhuǎn)朱閣，低綺戶(hù)叮喳，照無(wú)眠被芳。不應(yīng)有恨，何事長(zhǎng)向別時(shí)圓馍悟？
人有悲歡離合畔濒，月有陰晴圓缺，此事古難全锣咒。但愿人長(zhǎng)久侵状，千里共嬋娟。
——蘇軾《水調(diào)歌頭·明月幾時(shí)有》
附注：“去”與“宇”毅整，“合”與“缺”趣兄，夾葉仄韻。
含有哲理的句子：人有悲歡離合毛嫉，月有陰晴圓缺诽俯，此事古難全妇菱。</p>
<!--列表和表格 disc square -->
<ul style = "list-style-type:disc">
<li>李白</li>
<li>杜甫</li>
</ul>
<ul style = "list-style-image:url(http://gtb.baidu.com/HttpService/get?p=dHlwZT1pbWFnZS9qcGVnJm49dmlzJnQ9YWRpbWcmYz10YjppZyZyPTg5NTMyNjY3NywzNDQyODIxNjcw)">
<li>李白</li>
<li>杜甫</li>
</ul>
<ul style = "list-style-position:inside circle)">
<li>李白:明月幾時(shí)有承粤？把酒問(wèn)青天。不知天上宮闕闯团，今夕是何年辛臊？
我欲乘風(fēng)歸去，又恐瓊樓玉宇房交，高處不勝寒彻舰。起舞弄清影，何似在人間候味？
轉(zhuǎn)朱閣刃唤，低綺戶(hù)，照無(wú)眠白群。不應(yīng)有恨尚胞，何事長(zhǎng)向別時(shí)圓？</li>
<li>杜甫</li>
</ul>
<!--表格樣式 collapse:合并2條在一起的框線(xiàn) seperate:分開(kāi) table-layout:automatic/fixed-->
<table style = "border:1px solid blue;border-collapse:collapse;caption-side:bottom;table-layout:automatic">
<caption>成績(jī)列表</caption>
<tr>
<th class = "important" style = "border:1px solid;width:800px;height:50px">語(yǔ)文</th>
<th ">數(shù)學(xué)</th>
<th style = "border:1px solid">物理</th>
</tr>
<!--padding:內(nèi)間距 padding-top padding:top right bottom left-->
<tr>
<td style = "border:1px solid;height:100;vertical-align:top;text-align:center;padding:30;">100</td>
<td style = "border:1px solid">90</td>
<td style = "border:1px solid">95</td>
</tr>
</table>
<!---CSS框模型 塊元素 div:分區(qū) span:行內(nèi)-->
<div>
<!--margin:外邊距-->
<p style = "margin:10px 50px 50px 10px">第一段</p>
<p style = "margin:10px 50px 50px 10px">第二段</p>
<!--CSS定位 流式排版 絕對(duì)帜慢，相對(duì)笼裳，浮動(dòng)定位-->
</div>
<!--相對(duì)定位-->
<p style = "position:relative;left:-20px;bottom:-60px">第一段</p>
<p style = "margin:10px 50px 50px 10px">第二段</p>
<!--絕對(duì)定位:根據(jù)上一級(jí)的定位的地方開(kāi)始算-->
<div style = "position:absolute;top:1120px">
<p style = "position:absolute;left:-20px;bottom:-10px">絕對(duì)定位第一段</p>
<p style = "margin:10px 50px 50px 10px">第二段</p>
<div>
<!--浮動(dòng)定位-->
<div>
<img src = "http://gtb.baidu.com/HttpService/get?p=dHlwZT1pbWFnZS9qcGVnJm49dmlzJnQ9YWRpbWcmYz10YjppZyZyPTg5NTMyNjY3NywzNDQyODIxNjcw" width = 200 style = "float:right"></img>
<p style = "position:absolute;left:-20px;bottom:-10px">浮動(dòng)定位第一段</p>
<p style = "margin:10px 50px 50px 10px">浮動(dòng)定位第二段</p>
</div>
</body>
</html>
next
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
