CSS样式选择器

1.css选择器

  (1)标记选择器: 选择器 { 属性1:值;属性2:值 }

       用来指定确定标记的样式

     如:<style>

          h1 { color:red;font-size:25px;}

         </style>

 

 

  (2)类别选择器: .class(类别名称){ 属性1:值;属性2:值;}

     如:<style type="text/css">

         .one{color:red;font-size:18px; }

         </style>

      对应的:

         <body>

    <p class="one">class选择器</p>

 

     

  (3)ID选择器: #id(id选择器) { 属性1:值;属性2:值; }

      如:<style type="text/css">

              #one{  font-weight:bold;  }

              #two{  font-size:30px; color:#009900; }

          </style>

       对应的:

          <body>

       <p id="one">ID选择器1</p>

       <p id="two">ID选择器2</p>

          </body>

 

 

 

2. 集体声明

 <style type="text/css">

    h1, h2, h3, h4, h5, p{ color:purple; font-size:15px; }

    h2.special, .special, #one{ text-decoration:underline; }

 </style>

 对应的:

   <body>

<h1>集体声明h1</h1>

<h2 class="special">集体声明h2</h2>

<h3>集体声明h3</h3>

<h4>集体声明h4</h4>

<h5>集体声明h5</h5>

<p>集体声明p1</p>

<p class="special">集体声明p2</p>

<p id="one">集体声明p3</p>

   </body>

 

3.css的嵌套

<html>

<head>

<title>CSS选择器的嵌套声明</title>

<style type="text/css">

<!--

p b{      /* 嵌套声明 */

color:maroon; /* 颜色 */

text-decoration:underline; /* 下划线 */

}

-->

</style>

</head>

<body>

<p>嵌套使<b>用CSS</b>标记的方法</p>嵌套之外的<b>标记</b>不生效

</body>

</html>

 

4.css的继承

如:

<html>

<head>

<title>父子关系</title>

<base target="_blank">

<style>

<!--

h1{

color:red; /* 颜色 */

text-decoration:underline;      /* 下划线 */

}

h1 em                            /* 嵌套选择器 */

color:#004400; /* 颜色 */

font-size:40px; /* 字体大小 */

}

-->

</style>

</head>

 

<body>

<h1>祖国的首都<em>北京</em></h1>

<p>欢迎来到祖国的首都<em>北京</em>,这里是全国<strong>政治、<a href="economic.html"><em>经济</em></a>、文化</strong>的中心</p>

<ul>

<li>在这里,你可以:

<ul>

<li>感受大自然的美丽</li>

<li>体验生活的节奏</li>

<li>领略首都的激情与活力</li>

</ul>

</li>

<li>你还可以:

<ol>

<li>去八达岭爬长城</li>

<li>去香山看红叶</li>

<li>去王府井逛夜市</li>

</ol>

</li>

</ul>

<p>如果您有任何问题,欢迎<a href="contactus">联系我们</a></p>

</body>

</html>效果图:

 

 

时间: 2024-10-30 23:48:56

CSS样式选择器的相关文章

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) Sty

asp.net导入CSS样式,用不起

问题描述 asp.net导入CSS样式,用不起 asp.net我导入了CSS样式表,路径也是对的,但是样子一点也没用起 解决方案 使用ASP.NET直接控制CSS样式asp.net css 样式选择器,优先级在Asp.net中过滤html,javascript,css样式代码 解决方案二: 浏览器开发工具看你css文件路径是否正确,不是你说对就是对,要浏览器能正常加载才行

Dreamweaver8.0使用CSS样式美化页面

查看全套"dreamweaver8.0教程" 在"CSS规则对话框"中,我们可以通过类型.背景.区块.方框.边框.列表.定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个CSS样式的时候,不需要对每一个项都进行设置,需要什么效果,选择相应的项进行设置就可以了. 1.文本样式的设置 新建CSS样式, "选择器类型"为类,名称为 "style1"定义在"仅对该文档".保存至站点根目录下的CSS文件夹内

CSS样式表:详细介绍IE7新支持的选择器

css|样式表 现在IE7已经推出一段时间并且渗透到用户当中,不用等太久我们就可以在页面上使用更高级的CSS.两个最有用的项目将是 Child子和Adjacent Sibling相邻兄弟选择符.现在已是时候使用它们制作网页,并且更深入研究它们. 注意,选择器包括现行的符号,">","+"和空格(后代选择符),涉及到子选择器,相邻兄弟选择器,后代选择器,统称为选择符. 一个较好的方法 在我们研究选择符之前,弄清楚他们的不同和为什么它们是好东西的原因是个不错的主意

CSS样式----图文详解:css样式表和选择器

主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择器.伪类选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 接下来我们要讲一下为什么要使用CSS. HTML的缺陷

CSS实战:写CSS样式表的参考标准实战

文章简介:点分离(SoC).他已经让我们接受膨胀.报废.冗余.缓存甚至更多.现在,我确信唯一的方法是远离这一原则来改善我们的作者样式表. 当谈到CSS,我相信神圣的原则--点分离(SoC).他已经让我们接受膨胀.报废.冗余.缓存甚至更多.现在,我确信唯一的方法是远离这一原则来改善我们的作者样式表. 对于从未听说过SoC原则在Web设计中的上下文,它涉及到一些俗称"三层分离": 结构 表现 行为 为了避免一些担忧,将它划分成独立的资源:一个HTML文档,一个或多个样式文件和一个或多个Ja

DivCSS小结:浏览器默认HTML的CSS样式属性

核心提示:这个"浏览器默认HTML的CSS样式属性",在你需要还原默认值的时候,比较有用.开始的时候应用通配选择器 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了. 这个"浏览器默认HTML的CSS样式属性",在你需要还原默认值的时候,比较有用.开始的时候应用通配选择器 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了. 但通配选择器在大型网站的构建中,影响性能

用CSS样式表缩写给你的网站加速

css|网站加速|样式表 Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里.影响速度的因素有很多种,包括Web服务器的速度.访问者的Internet连接情况,以及浏览器必须下载的文件大小.尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小. 为了让网站能够更快,Web的建设者都会按常规地压缩和优化网站上的每一个图像文件,这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量.由于CSS样式表是纯文本文件,和图像相比相对较小

为打印输出创建一个CSS样式

css|创建|打印 有的时候,你可以不必在你的Web站点上创建一个独立的与打印相关的页面. 大多数的Web页面都显示在电脑屏幕上,人们通过屏幕观看,但是,有时候用户想要将一些网上的内容打印出来,这就需要与打印媒体连接起来.由于原来采用的是能让Web页面在屏幕上显示的效果很好的那种格式,但在打印时效果并不那么好,Web创建者们通常都会创建一些独立的页面,这些页面与打印机联系紧密,而用户也需要经常打印这些页面.但如果你使用了XHTML标记和CSS,你就没必要再创建一个独立的与打印机相连接的页面了,你