初识JavaWeb 简要代码03

div{
    border:1px solid yellow;
}
span{
    border:1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS与HTML结合</title>
    <link rel="stylesheet" type="text/css" href="01-css.css"/> <!--link标签引入css代码-->
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>

<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS标签名选择器</title>
    <style type="text/css">
        div{
            border:1px solid yellow;
            color:blue;
            font-size:30px;
        }
        span{
            border:5px solid blue;
            color:blue;
            font-size:20px;
        }
    </style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        #id001{
            color:blue;
            font-size:30px;
            border:1px solid yellow;  <!--边框粗细 实线边框 黄色-->
        }
        #id002{
            color:red;
            font-size:20px;
            border:5px dotted blue; <!--边框粗细 虚线边框 蓝色-->
        }
    </style>
</head>
<body>
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CLASS选择器</title>
    <style type="text/css">
        .class01{
            color:blue;
            font-size:30px;
            border:1px solid yellow;
        }
        .class02{
            color:green;
            font-size:20px;
            border:1px dotted red;
        }
    </style>
</head>
<body>
<div class="class01">dic标签class01</div>
<div class="class02">dic标签class02</div>
<span class="class01">span标签class01</span>
<span>span标签</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        .class01,#id01{
            color:red;
            font-size:20px;
            border:1px solid blue;
        }
    </style>
</head>
<body>
<div class="class01">div标签class01</div>
<div id="id01">div标签id01</div>
<span id="id01">span标签</span><br/>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用样式</title>
    <style type="text/css">
        div{
            <!--颜色-->
            color:red;
            <!--黄色1像素实线边框-->
            border:1px solid yellow;
            <!--宽度-->
            width::300px;
            <!--高度-->
            height:200px;
            <!--背景颜色-->
            background-color:green;
            <!--字体样式-->
            font-size:20px;
            <!--DIV居中-->
            margin-left:auto;
            margin-right:auto;
            <!--文本居中-->
            text-align:center;
        }
        table{
            border:1px solid red;  <!--设置边框-->
            border-collapse:collapse; <!--将边框合并-->
        }
        td{
            border:1px solid red;
        }
        a{
            text-decoration:none;  <!--超链接去下划线-->
        }
        ul{
            list-style:none;  <!--列表去除修饰-->
        }
    </style>
</head>
<body>
<ul>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>
<table>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
</table>
<a href="http://www.baidu.com">百度</a>
<div>div标签</div>

</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值