CSS介绍
CSS=层叠样式表（Cascading Style Sheets）HTML表达结构，CSS表达样式
样式和内容/结构是分离的
背景样式
两种效果：1）纯色
2）图像
整个背景设置一个样式
<body style="background-color:yellow;">
RGB颜色：
#FF0000
rgb(255,255,0)
rgba(255,255,0,0~1)
style="background-image:url(symz00.jpg);background-repeat:no-repeat"
style="background-image:url(symz00.jpg);background-repeat:repeat-x"
style="background-image:url(symz00.jpg);background-repeat:repeat-y"
style="background-image:url(symz00.jpg);background-repeat:no-repeat;background-position:center/top/right;background-attachment:scroll/fixed"
课程习题
题目1：在HTML文档中，引用外部样式表的正确位置是？
<head>部分
题目2：哪个 HTML 标签用于定义内部样式表？
<style>
题目3：哪个 HTML 属性可用来定义内联样式？
style
题目5：如何在 CSS 文件中插入注释？
/* this is a comment */
文本样式
段落
<p style="color:red"><p style="text-indent:2em">
<p style="text-indent:-2em; padding:2em;">
<p style="text-indent:2em; line-height:2">
<p style="text-indent:2em; line-height:normal">
<p style="text-indent:2em; text-alignment:right/center/justify">
<p style="text-indent:2em; word-spacing:30px; letter-spacing:3px; text-transform:uppercase/lowercase/capitalize; text-decoration:underline/overline/line-through; white-space:normal/pre/pre-wrap/nowrap/pre-line; direction:rtl">
字体
<p style="text-indent:2em;font-family:serif/sans-serif/monospace/cursive/fantasy;
font-style:italic/normal/obique;
font-variant:small-caps;
font-weight: blod/300;
font-size:0.4em">
题目1：哪个 CSS 属性可控制文本的尺寸？
font-size
题目2：在以下的 CSS 中，可使所有 <p> 元素变为粗体的正确语法是？
C: p {font-weight:bold}
效果
<p style="text-indent:2em; text-shadow:3px 5px 5px rgba(0,255,0,0.5)"><h1 style="background-color:yellow; text-shadow:0px -1px 0px #000000, 0px 1px 3px #606060; color:#606060">INSET</h1>
<p style="text-indent:2em; text-shadow:3px 5px 5px rgba(0,255,0,0.5); outline-color:red; outline-style:solid; outline-width:thin/3/">
列表和表格
列表
<ul style="list-style--image:url(zz.png)"><ul style="list-style-type:disc/circle/square; list-style-position:inside/outside">
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
</ul>
表格
<table style="border:1px solid blue; border-collapse:collapse/separate; caption-side:bottom; table-layout:automatic/fixed"><caption>成绩</caption>
<tr>
<th style="width:50px; height:30px; vertical-align:top; text-align:right; padding:10px">语文</th>
<th>数学</th>
<th>物理</th>
<th>化学</th>
</tr>
<tr>
<th>86</th>
<th>89</th>
<th>92</th>
<th>76</th>
</tr>
框模型和定位
CSS框模型
<p style="margin:10px 50px 50px 10px;">定位
普通流、浮动、绝对定位<p style="position:relative/absolute; left:20px; bottom:-10pt">
<img src="fig/symz01.jpg" width="800" style="float:left/right/none">
样式选择器
<style>th {border:1px solid blue}
*.important {color:red}
</style>
<p class="important">
1212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
