<!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:; color:blue;width:100px;}

    <!-- id选择器样式 -->

    #dvi { color:black;font-size:24px; width:200px;margin: 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 样式选择器的更多相关文章

  1. CSS样式选择器

    <!-- css样式选择器 HTML选择器 类选择器 ID选择器 关联选择器 组合选择器 伪元素选择器 selector{ /* selector是样式选择器 property:value; / ...

  2. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  3. 使用chrome查看页面元素的css样式

    使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...

  4. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  5. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

  6. css样式——选择器（三）

    https://www.cnblogs.com/haiyan123/p/7552235.html 1.怎么找到标签 2.如何操作标签的对象 一.css概述 CSS是Cascading Style Sh ...

  7. Web前端新人之CSS样式选择器

    最近在学习css样式.那么我就想先整理一下css样式的选择器 规则结构: 每个规则都有两个基本部分:选择器和声明块.声明块由一个或者多个声明组成,每个声明则是一个属性—值对(property-valu ...

  8. 一个可以自动生成css样式的插件happycss

    一直在页面写css, 重复写着样式,发现布局中,特别是h5,大量的样式都是margin,padding,width,height, 而,当我们需要给一个标签写样式的时候,避免内联样式,我们又需要取cl ...

  9. html添加css——样式选择器

    如何给html添加样式.两种方法: 一.新建立一个css样式表,与原html同目录,然后通过link标签链接.如:<link type="text/css" rel=&quo ...

随机推荐

  1. POJ 3168 Barn Expansion （几何基础）

    [题目链接] http://poj.org/problem?id=3168 [题目大意] 给出一些矩形,没有相交和包含的情况,只有相切的情况 问有多少个矩形没有相切或者边角重叠 [题解] 我们将所有的 ...

  2. URAL 1682 Crazy Professor （并查集）

    [题目链接] http://acm.timus.ru/problem.aspx?space=1&num=1682 [题目大意] 给出k,从1开始不断地加一并把这个数写在黑板上,如果写上的数字和 ...

  3. [OpenJudge8782][划分DP]乘积最大

    乘积最大 总时间限制: 1000ms 内存限制: 65536kB [描述] 今年是国际数学联盟确定的“2000——世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛, ...

  4. 转载：oracle11G 已开启监听，但远程连接依旧无监听解决过程

    1.连接数据库显示无监听程序,首先查看服务器的oracle监听服务是否开启,服务名称:OracleOraDb11g_home1TNSListener(具体环境中可能不完全一样,但是认准TNSListe ...

  5. Javascript高级程序设计-问答模式

    1.谈谈javascript数组排序方法sort()的使用,重点介绍sort()参数的使用及其内部机制 sort的实现的功能类似JAVA的比较器,数据排序从多维数组的第一维开始排序可以自己定义排序方法 ...

  6. 织梦默认分页样式改动 解决分页列表显示，去掉li

    近期装了个织梦dedecmsV5.7版本号时,调用分页显示出现的结果出现好几行,怎么也不能在一排显示,找了非常多资料,才了解到是由织梦模板中分页加了<Li>列表标签,解决有两种方法,以下将 ...

  7. Chrome插件——一键保存网页为PDF1.0发布

    最新版本:V1.1 下载地址:http://download.csdn.net/detail/bdstjk/5722317 发布时间:2013-7-8 版本号:1.1.7.80 更新内容: 1.增加检 ...

  8. http://jingyan.baidu.com/article/dca1fa6fa07000f1a44052f6.html

    http://jingyan.baidu.com/article/dca1fa6fa07000f1a44052f6.html

  9. Kinect 1.8 体感开发，手势，姿态（Pose） 捕捉判断方法以及一些辅方法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. DNN CMS Platform

    http://dotnetnuke.codeplex.com/downloads/get/1458710