CSS02-一些具体组件的样式属性

这一生的挚爱 提交于 2019-12-31 12:36:20
<!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>&nbsp&nbsp
                        font-size:30px;
                    </li>
                    <li>em
                        <br>&nbsp&nbsp
                        1em=16px
                        <br>&nbsp&nbsp
                        font-size:2.5em;
                    </li>
                    <li>百分比和em的组合
                        <br>&nbsp&nbsp
                        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>

  

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!