码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-04-24 12:37:08      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

 

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

标签:

原文地址:http://www.cnblogs.com/rinack/p/5426559.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!