css学习

css学习

<!DOCTYPE html> 
<head>
    <title></title>
    <style type="text/css">
        /*class选择器*/
        .lv{color:red;}
        /*<!--元素选择器-->*/
        div{color: blue;}
        /*<!--id选择器-->*/
        #lvye{color: coral;}
        /*<!--子元素选择器-->*/
        #father2 #p1{color:red;}
        /*<!--相邻选择器-->*/
        #lv+div{color:black;}
        /*<!--群组选择器-->*/
        h3,div,span{color:pink;}
        /*<!--字体属性-->*/
        #p3{font-family:宋体;}
        #p4{font-family:微软雅黑;}
        /*<!--字体大小-->*/
        #p5{font-size:small;}
        #p6{font-size:medium;}
        #p7{font-size:large;}
        #p8{font-size:10px;}
        #p9{font-size: 15px; }
        #p10{font-size:20px;}
        /*<!--字体粗细-->*/
        #p11{font-weight:lighter;}
        #p12{font-weight:normal;}
        #p13{font-weight:bold;}
        #p14{font-weight:bolder;}
        /*<!--字体斜体样式-->*/
        #p15{font-style:normal;}
        #p16{font-style:italic;}
        #p17{font-style:oblique;}
        /*定义下划线之类的*/
        #p18{text-decoration:underline;}
        #p19{text-decoration:line-through;}
        #p20{text-decoration:overline;}
        /*转换英文的大小写*/
        #p21{text-transform:uppercase;}
        #p22{text-transform:lowercase;}
        #p23{text-transform:capitalize;}
        /*段落缩进2个*/
        #p24
        {
            font-size:14px;
            text-indent:28px;
        }
        /*对齐方式*/
        #p25{text-align:left;}
        #p26{text-align:center;}
        #p27{text-align:right;}
        /*行高*/
        #p28{line-height:14px;}
        /*字间距*/
        #p29{letter-spacing: 14px;}
        /*边框*/
        #p30{   
            border-color: purple;
            border-width: 15px;
            border-style: inset;
            }
        /*背景颜色*/
        #p31{background-color: rebeccapurple ;}
        /*背景图片*/
        #p32{background-image: url(http://www.lvyestudy.com/App_images/lessonList/collection.png);width: 150px;height: 100px;}
        /*超链接的效果*/
        a{text-decoration:none;font-size:18px;}
        a:link{color:black}
        a:visited{color: purple; }
        a:hover{color: pink;text-decoration:underline;}
        a:active{color:red;}
        /*鼠标样式*/
        #div_default{cursor:default;}
        #div_pointer{cursor:pointer;}
        #p33{display:inline-block;} /*将块元素转换为inline-block元素*/
    </style>
</head>
<body>
    <hr/>
    <h3>元素选择器</h3>
    <div>元素选择器</div>
    <!--class选择器-->
    <p class="lv">class选择器</p>
    <div id="lvye">id选择器</div>
    <span class="lv">class选择器</span>
    <hr/>
    <div id="father2">
        <p id="p1">子元素1</p>
        <p id="p2">子元素2</p>
        <span>子元素span</span>
    </div>
    <hr/>
    <!--相邻选择器-->
    <div id="lv">
        <p>子元素</p>
    </div>
    <div>子元素相邻的元素</div>
    <!---->
    <hr/>
    <p id="p3">字体为宋体</p>
    <p id="p4">字体为微软雅黑</p>
    <hr/>
    <p id="p5">字体大小为“small(小)”</p>
    <p id="p6">字体大小为“medium(正常)”</p>
    <p id="p7">字体大小为“large(大)”</p>
    <p id="p8">字体大小为10px</p>
    <p id="p9">字体大小为15px</p>
    <p id="p10">字体大小为20px</p>
    <hr/>
    <p id="p11">字体粗细为:lighter</p>
    <p id="p12">字体粗细为:normal(正常字体) </p>
    <p id="p13">字体粗细为:bold</p>
    <p id="p14">字体粗细为:bolder </p>
    <hr/>
    <p id="p15">字体样式为normal</p>
    <p id="p16">字体样式为italic </p>
    <p id="p17">字体样式为oblique</p>
    <hr/>
    <p id="p18">这是“下划线”效果</p>
    <p id="p19">这是“删除线”效果</p>
    <p id="p20">这是“顶划线”效果</p>
    <hr/>
    <p id="p21">大写:Rome was't built in a day.</p>
    <p id="p22">小写:Rome was't built in a day.</p>
    <p id="p23">仅首字母大写: Rome was't built in a day.</p>
    <hr/>
    <p id="p24">首行缩进的段落</p>
    <hr/>
    <p id="p25"><strong>左对齐</strong>:好好学习,天天向上。</p>
    <p id="p26"><strong>居中对齐</strong>:好好学习,天天向上。</p>
    <p id="p27"><strong>右对齐</strong>:好好学习,天天向上。</p>
    <hr/>
    <p id="p28">行高测试</p>
    <hr/>
    <p id="p29">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
    <hr/>
    <div id="p30">
        <p>测试一下边框</p>
    </div>
    <hr>
    <div id="p31">
        <p>测试一下背景颜色</p>
    </div>
    <hr>
    <div id="p32">
        <p>背景图片测试</p>
    </div>
    <hr>
    <a href="https:://www.baidu.com">百度一下,会变样子</a>
    <hr>
    <div id="div_default">鼠标默认样式</div>
    <div id="div_pointer">鼠标手状样式</div>
    <hr>
    <p id="p33">盒子模型</p>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值