一个页面弄懂 CSS 样式选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
    <!-- 某一类标签的样式 -->
    div {background-color:#b0c4de;}
    p { font-size:24px; text-align:left; color:red;}
    <!-- 根据标签中的 class 属性来设置标签的样式 -->
    .master {font-size:18px;color:red; text-align:center;}
    .item { border-style:red;}
    <!-- 根据某一类标签的 class 属性来设置标签元素样式 -->
    p.item { color:black; font-size:14px;}
    div.item { text-align:center;font-size:18; color:blue;width:100px;}
    <!-- id选择器样式 -->
    #dvi { color:black;font-size:24px; width:200px;margin:0 auto;}
    #title { font-size:28px;text-align:center; }
</style>
</head>
<body>
<div class="master">
    <div id="title">
        welcome to java web!
    </div>
    <p class="item">css style test h2</p>
    <div class="item">css style test h2</div>
    <div id="dvi">css style test div </div>
</div>
</body>
</html>

 

posted @ 2016-04-24 11:09  如.若  阅读(235)  评论(0编辑  收藏  举报