一个页面弄懂 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>
时间: 2024-10-10 17:41:14

一个页面弄懂 CSS 样式选择器的相关文章

CSS样式选择器

1 <!-- 2 css样式选择器 3 HTML选择器 4 类选择器 5 ID选择器 6 关联选择器 7 组合选择器 8 伪元素选择器 9 10 selector{ /* selector是样式选择器 11 property:value; /* color:red; 12 property:value; /* font-size:4cm; 13 ..... 14 } 15 16 selector当定义一条样式规则时,必须指定受这条样式规则作用的网页元素,在一条规则中定义的网页元素就是select

CSS样式选择器优先级

原文:CSS样式选择器优先级 CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class类选择器的数量.4.d为类型选择器的数量5.属性选择器,伪类选择器和class类选择器优先级一样,伪元素选择器和类型选择器一样6.!important 权重最高,比 inline style 还要高. 例如: 选择器 特殊性 (a,b,c,d) Style= ”” 1,

页面中插入CSS样式的三种方法

页面中插入css样式的三种方法总结 1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表. <link>标签在(文档的)头部: <head> <link rel="stylesheet" type="text/css" href="path/myCss.css"/> <

HTML常用标签及CSS样式选择器

HTML常用标签及CSS样式选择器 html部分 <!DOCTYPE html> <html> <head> <!--头标记 写描述性的信息(css\javaScript)--> <!--引入外部的样式文件 rel:relationship的英文缩写·REL属性用于定义链接的文件和HTML文档之间的关系 --> <link rel="stylesheet" type="text/css" href=&

JS实战 &#183; 仿css样式选择器

代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>仿css样式选择器</title> <style type="text/css"> #textid{ height: 100px; width: 300px; } #fontid{ heig

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

我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. 我们希望看到博客园这张图片的具体信息.就可以打开chrome的开发者工具,点击箭头后选中该图片,这时代码就自动定位到了该元素的HTML代码,如下图所示: 这个页面中,右上方的蓝色阴影下即为图片元素所在的HTML代码,而开发者工具的左下方就是该元素的css样式代码: 其中最上面的是行内样式, 往下有我们对其进行直接的样式设置的代码: 往下有从

html添加css——样式选择器

如何给html添加样式.两种方法: 一.新建立一个css样式表,与原html同目录,然后通过link标签链接.如:<link type="text/css" rel="stylesheet" href="lounge.css">(link标签是一个void元素,无结束标签.) 二.直接在html源码中使用style标签.如:<style>样式</style>,style标签嵌入head中. html中插入sty

关于.net页面提交后css样式不生效的发现

一直以来没有解决的问题,今天在老师的提示下终于得到解决. 问题:asp.net页面,提交后,或者举例最简单的例子通俗的说,当登陆页面,某一项输入错误,并且使用Response.Write("<script>alert('用户名或者密码错误');</script>");时.弹出对话框后,此页面的css样式将会失效,主要可以体现在,你的页面本来是居中的,此时却变为全部左对齐. 解决办法  取消Response.Write("<script>al

推荐一款非常棒的谷歌插件---快速查看HTML页面元素的CSS样式

一.下载地址 http://chromecj.com/web-development/2015-05/456/download.html 二.简介 CssViewer是一款快速查看当前页面元素的CSS样式的插件,无论是在做新的网页还是在做修改 相信他都能帮上大忙. 下载安装都非常的简单,测试过支持chrome支持360浏览器,别的没有测过.  三.截图