<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>具体组件的样式属性</title>
<link rel="stylesheet" type="text/css" href="02.css">
</head>
<body>
<ol>
<li><a href="#Background">背景</a></li>
<li><a href="#Text">文本</a></li>
<li><a href="#Word">字体</a></li>
<li><a href="#Link">链接</a></li>
<li><a href="#List">列表</a></li>
<li><a href="#Table">表格</a></li>
</ol>
<hr>
<ul id="Background">
<h3>背景</h3>
<li id="BGC">背景颜色(background-color)</li>
<ul>
<li>颜色的表示方式：
<dd>十六进制：#f00000</dd>
<dd>RGB：rgb(255,0,0)</dd>
<dd>颜色名称：blue</dd>
</li>
</ul>
<li>背景图片(background-image)</li>
<ul>
<li>background-image:url('相对路径');
</li>
<li>
默认情况下将平铺显示图像
</li>
</ul>
<li>背景平铺(图片)(background-repeat)</li>
<ul>
<li>在设置了background-image属性的基础上设置该属性
</li>
<li>
background-repeat:repeat-x或repeat-y或no-repeat,对应水平平铺或垂直平铺或不平铺
</li>
</ul>
<li>设置位置(图片)(background-position)</li>
<ul>
<li>background-position：left/right top/bottom
</li>
<li>
margin-right:200px
<br>该属性用于让图文隔开
</li>
</ul>
<li>背景滚动(图片)(background-attachment)</li>
<ul>
<li>background-attachment:scroll
<dd>默认，图随页面滚动而滚动</dd>
</li>
<li>background-attachment:fixed
<dd>图不随页面滚动而滚动</dd>
</li>
<li>background-attachment:local
<dd>图随元素内容滚动而滚动</dd>
</li>
<li>background-attachment:inherit
<dd>该属性的设置从父元素继承</dd>
</li>
</ul>
<li>简写属性(background)</li>
<ul>
<li>background:color image repeat attachment position
</li>
</ul>
</ul>
<hr>
<ul id="Text">
<h3>文本</h3>
<ul>
<li>文本颜色(color)</li>
<ul>规则同<a href="#BGC">背景颜色</a>
</ul>
<li>文本对齐(text-align)</li>
<ul>
<li>
text-align:center;水平居中
</li>
<li>
text-align:right或left;水平靠右或左
</li>
<li>
text-align:justify;两侧对齐
</li>
</ul>
<li>文本修饰(text-decoration)</li>
<ul>
<li>
text-decoration:none;消除链接下划线
</li>
<li>
text-decoration:line-through;删除
</li>
<li>
text-decoration:overline;上划线
</li>
<li>
text-decoration:underline;下划线
</li>
</ul>
<li>文本转换(text-transform)</li>
<ul>
<li>
text-transform:uppercase;全部字母转为大写
</li>
<li>
text-transform:lowercase;全部字母转为小写
</li>
<li>
text-transform:capitalize;所有单词首字母大写
</li>
</ul>
<li>文本缩进(text-indent)</li>
<ul>
<li>
text-indent:50px;文本第一行的缩进
</li>
</ul>
<li>其他</li>
<ul>
<li>字符间距(letter-spacing),letter-spacing:-3px</li>
<li>行高(line-height),line-height:70%;</li>
<li>文本方向(direction),direction:rtl;right to left</li>
<li>单词间距(word-spacing),word-spacing:30px;</li>
<li>文字环绕(段落文本不换行)(white-space),white-space:nowrap;不换行直到遇到br标签</li>
<li>垂直对齐图像(vertical-align),vertical-align:text-top或text-bottom;默认top</li>
<li>添加阴影(text-shadow),text-shadow:水平偏移量(向右正) 垂直偏移量(向下正) 颜色</li>
</ul>
</ul>
</ul>
<hr>
<ul id="Word">
<h3>字体</h3>
<ul>
<li>字体系列(font-family)</li>
<ul>
<li>font-family:"Times New Roma",Times,serif;</li>
<li>应设置多个字体名作为后备，浏览器依次向后选择，直到找到可以支持的字体</li>
<li>如果字体系列的名称超过一个字，则必须使用引号</li>
</ul>
<li>字体样式(font-style)</li>
<ul>
<li>font-style:normal;正常字体</li>
<li>font-style:italic;斜体</li>
<li>font-style:oblique;文字向一边倾斜，类似斜体，不支持</li>
</ul>
<li>字体大小(font-size)</li>
<ul>
<li>单位</li>
<ul>
<li>像素(px)
<br>  
font-size:30px;
</li>
<li>em
<br>  
1em=16px
<br>  
font-size:2.5em;
</li>
<li>百分比和em的组合
<br>  
font-size:100%;
</li>
</ul>
</ul>
<li>字体加粗(font-weight)</li>
<ul>
<li>font-weight:normal;</li>
<li>font-weight:lighter;</li>
<li>font-weight:bold;</li>
<li>font-weight:900;</li>
</ul>
<li>简写(font)</li>
<ul>
<li>font:style weight size family</li>
</ul>
</ul>
</ul>
<hr>
<ul id="Link">
<h3>链接</h3>
<ul>
<li>链接状态</li>
<ul>
<li>a:link:未访问链接</li>
<li>a:visited:已访问链接</li>
<li>a:hover:鼠标在链接上,在前两者之后</li>
<li>a:active:鼠标点击时,在hover之后</li>
</ul>
<li>创建链接框：设置background-color</li>
</ul>
</ul>
<hr>
<ul id="List">
<h3>列表</h3>
<ul>
<li>改变列表标记(list-style-type)</li>
<li>设置图片列表标记</li>
<ul>
<li>list-style-image:url('相对路径');</li>
<li>兼容方案
<br>ul{
<br>list-style-type:none;
<br>padding:0px;
<br>margin:0px;}
<br>ul li{
<br>background-image:url('');
<br>background-repeat:no-repeat;
<br>background-position:0px 5px;
<br>padding-left:14px;}
</li>
</ul>
<li>简写(list-style)</li>
<ul>
<li>list-style:type position image;</li>
</ul>
</ul>
</ul>
<hr>
<ul id="Table">
<h3>表格</h3>
<ul>
<li>边框</li>
<ul>
<li>border(table td th都有该属性)</li>
<ul>
border:1px solid black;
</ul>
<li>折叠边框(单元格边框重合)</li>
<ul>
在table的样式里设置属性:border-collapse:collapse;
</ul>
</ul>
<li>宽高(width height)</li>
<li>文字对齐</li>
<ul>
<li>水平对齐(text-align)</li>
<li>垂直对齐(vertical-align)</li>
</ul>
<li>填充(td和th的padding)</li>
<li>颜色</li>
<ul>
<li>边框(border)</li>
<li>背景(background-color)</li>
<li>文本(color)</li>
</ul>
<li>标题位置(caption的位置)</li>
<ul>
<li>caption-side:bottom;</li>
<li>caption-side:top;</li>
</ul>
</ul>
</ul>
</body>
</html>
浙公网安备 33010602011771号