Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime

2022-07-12 12:26:48

转载请注明出处：http://blog.csdn.net/iwanghang/article/details/76618373

觉得博文有用，请点赞，请评论，请关注，谢谢！~

伪类：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>伪类</title>
    <style type="text/css">
        /*伪类*/
        a:link{color: red;}/*在点击超连接之前所有表现的样式*/
        a:visited{color: #999999;}/*浏览过后的超链接样式*/
        a:hover{color: green;text-decoration: none;}/*鼠标悬停在超链接上的样式*/
        a:active{color: blue;font-weight: bold;}/*鼠标点击同时所表现的样式*/
    </style>
</head>
<body>
    <a href="http://blog.csdn.net/iwanghang">点击跳转到我的博客</a>
</body>
</html>

字体属性：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>字体属性</title>
    <style type="text/css">
        /*字体属性*/
        h1{font-family:"幼圆","黑体";font-size: 22px;font-style: normal;}
        h2{font-family:"宋体";font-size:0.75cm;font-style: italic;}
        h3{font-size:300%}
        p{font-weight:bold; }
    </style>
</head>
<body>
    <h1>我是第一段文字</h1>
    <h2>我是第二段文字</h2>
    <h3>我是第三段文字</h3>
    <p>我是第四段文字</p>
</body>
</html>

文本样式属性：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>文本样式属性</title>
    <style type="text/css">
        /*文本样式属性*/
        h1{text-decoration: underline;text-align: left;text-indent: 2cm;}
        h2{text-decoration: overline;text-align: center;}
        h3{
            text-decoration: line-through;
            text-align: right;
            line-height:30px;
            border: 1px solid red;
            font-size: 20px
        }
    </style>
</head>
<body>
    <h1>我是第一段文字</h1>
    <h2>我是第二段文字</h2>
    <h3>我是第三段文字</h3>
</body>
</html>

背景样式属性：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>背景样式属性</title>
    <style type="text/css">
        /*背景样式属性*/
        div{
            background-image: url(https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=2239989275,1992259040&fm=85);
            background-repeat: no-repeat;    /*repeat-x:水平方向重复;repeat-y:垂直方向重复;no-repeat:仅显示一次;*/
            background-attachment: scroll;    /*fixed:不动;scroll:滚动;*/
            background-position: bottom right;    /*center;bottom;right*/
            height: 800px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

边框样式属性：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>边框样式属性</title>
    <style type="text/css">
        /*边框样式属性*/
        div{
            border-color:red;
            border-width: 5px;
            border-style:double;    /*dashed:虚线;double:双实线;*/
        }
        p{border-top:1px solid red;}
        h1{border-left: 5px dashed green;}
    </style>
</head>
<body>
    <div>我是一个div</div>
    <p>我是一个p</p>
    <h1>我是一个h1</h1>
</body>
</html>

转载请注明出处：http://blog.csdn.net/iwanghang/article/details/76618373

欢迎移动开发爱好者交流
沈阳或周边城市公司有意开发Android，请与我联系
联系方式

微信：iwanghang
QQ：413711276
邮箱：iwanghang@qq.com

觉得博文有用，请点赞，请评论，请关注，谢谢！~

码农公寓

伪类：

字体属性：

文本样式属性：

背景样式属性：

边框样式属性：

相关文章