CSS学习笔记
- CSS＝ 层叠样式表 cascading style sheets
- HTML 表达结构 ， CSS表达样式
- 样式和内容／结构是分离的
加入CSS的方式
- 做一个web的CSS文件
- 在头部加入标记，定义规则
- 单个标记里面，加入CSS属性
<!DOCTYPE = html>
<html>
<head>
<title>CSS学习</title>
<h1>CSS学习</h1>
<meta charset = UTF-8>
<!--CSS选择器-->
<style>
<!-- 元素选择器 :p em {}-->
th,td{border:1px solid blue}
th {background-color:purple}
<!-- 类选择器 ./# : 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 = "属性选择器：开始">开始</p>
<!--具体style样式具体定义 默认颜色：透明transparent #FFFFFF / RGB / rgba ; repeat: 重复 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">内容</p>
<!--text-indent : 10%：页面百分比 px:像素点 pt:磅印刷单位 -10em:左 padding:左推 line-height:行间距 text-align:对齐方式(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>，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。(豫章故郡 一作：南昌故郡)
时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿。临帝子之长洲，得仙人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。（层峦 一作：层台；即冈 一作：列冈；天人 一作：仙人）
披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰迷津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。(轴 通：舳；迷津 一作：弥津；云销雨霁，彩彻区明 一作：虹销雨霁，彩彻云衢)
遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人；萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？(遥襟甫畅 一作：遥吟俯畅)
嗟乎！时运不齐，命途多舛</p>
<!-- text-shadow : x y 扩散 #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明月几时有？把酒问青天。不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？
转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
——苏轼《水调歌头·明月几时有》
附注：“去”与“宇”，“合”与“缺”，夹叶仄韵。
含有哲理的句子：人有悲欢离合，月有阴晴圆缺，此事古难全。</p>
<!--字体 serif 矢量字体 sans-serif monospace等宽字体 cursive手写字体 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明月几时有？把酒问青天。不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？
转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
——苏轼《水调歌头·明月几时有》
附注：“去”与“宇”，“合”与“缺”，夹叶仄韵。
含有哲理的句子：人有悲欢离合，月有阴晴圆缺，此事古难全。</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>李白:明月几时有？把酒问青天。不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？
转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？</li>
<li>杜甫</li>
</ul>
<!--表格样式 collapse:合并2条在一起的框线 seperate:分开 table-layout:automatic/fixed-->
<table style = "border:1px solid blue;border-collapse:collapse;caption-side:bottom;table-layout:automatic">
<caption>成绩列表</caption>
<tr>
<th class = "important" style = "border:1px solid;width:800px;height:50px">语文</th>
<th ">数学</th>
<th style = "border:1px solid">物理</th>
</tr>
<!--padding:内间距 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:分区 span:行内-->
<div>
<!--margin:外边距-->
<p style = "margin:10px 50px 50px 10px">第一段</p>
<p style = "margin:10px 50px 50px 10px">第二段</p>
<!--CSS定位 流式排版 绝对，相对，浮动定位-->
</div>
<!--相对定位-->
<p style = "position:relative;left:-20px;bottom:-60px">第一段</p>
<p style = "margin:10px 50px 50px 10px">第二段</p>
<!--绝对定位:根据上一级的定位的地方开始算-->
<div style = "position:absolute;top:1120px">
<p style = "position:absolute;left:-20px;bottom:-10px">绝对定位第一段</p>
<p style = "margin:10px 50px 50px 10px">第二段</p>
<div>
<!--浮动定位-->
<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">浮动定位第一段</p>
<p style = "margin:10px 50px 50px 10px">浮动定位第二段</p>
</div>
</body>
</html>
next
