<!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>
来源:https://www.cnblogs.com/C-bj/p/12123773.html