通过实例讲解网页技术CSS中类的应用

css|网页

  

  为了对网页格式的定义更为精确,有必要让相同的选择符也能分类,并能按照不同的类别来进行不同的样式设计。基本格式如下:

  选择符.类别名 {属性:值}

  类别名将可以在HTML的标识符里引用:

  <标识符 class=类别名>网页内容

  实例:

  <html>
  <head>
  <title>CSS例子</title>
  <style type="text/css">
  <!--
    p.English{font-family:"Courier New"}
    p.Chinese{font-family:幼圆}
  -->
  </style>
  </head>
  <body>
  <p id=English>webjx.com</p>
  <p id=Chinese>网页教学网</p>
  </body>
  </html>

  ID

  ID,就是给HTML文挡中的样式发“身份证”,保证其在一个HTML文挡中具有唯一可用的值,这种唯一性也给JavaScript等脚本语言的使用带来了方便。

  ID的用法和Class差不多,只是定义的时候用#号开头而不是点号。

  实例:

  <html>
  <head>
  <title>CSS例子</title>
  <style type="text/css">
  <!--
    #English{font-family:"Courier New"}
    #Chinese{font-family:幼圆}
  -->
  </style>
  </head>
  <body>
  <h1 id=English>webjx.com</h1>
  <h2 id=Chinese>网页教学网</h2>
  </body>
  </html>

  伪类

  除了上述的分类方式外,为了使分类的使用更灵活多样,又产生了伪类的概念。类和伪类有什么样的区别呢?

  一般地说,选择符可以和多个类采用捆绑的形式来设定,这样虽然能够为同一个选择符创建多种不同的样式,但捆绑的形式同时也限制了设定的类为其它的选择符所使用。伪类的产生就是为了解决这个问题,每个预声明的伪类都可以被所有的HTML标识符引用,当然有些块级内容的设置除外。

  这里仅以伪类中最常见的锚伪类为例,锚伪类可以指定a元素以不同的方式显示链接(link),当鼠标碰到时的链接、已访问过的链接和正被激活的链接,一个已访问的链接可以定义为不同颜色的显示、字体大小和风格。

  基本格式如下:

  .伪类名 {属性:值}

  伪类可以被任何标识符在HTML里引用。

  <标识符 class=伪类名>网页内容

  实例:

  <html>
  <head>
  <title>CSS例子</title>
  <style type="text/css">
  <!--
    a:hover{font-size:18pt}/*当鼠标碰到时的链接*/
  -->
  </style>
  </head>
  <body>
  <a href="#">webjx.com</h1>
  </body>
  </html>

时间: 2024-10-27 07:48:57

通过实例讲解网页技术CSS中类的应用的相关文章

网页设计:用网页技术CSS实现网页背景渐变

css|渐变|设计|网页|网页背景|网页设计 用网页技术CSS实现网页背景渐变的四种代码设置. 一.从上往下渐变 body{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);} 二.从左上至右下渐变 body{FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50

优化代码:网页技术CSS的font属性的缩写的技巧

css|技巧|网页|优化 优化代码:网页技术CSS的font属性的缩写的技巧,缩写有利于减少代码,优化CSS,使之更加合理. css font属性是用来控制文字字体.颜色.大小等.而font的属性有多种,在通常情况下,我们用缩写的办法将多种属性概括在一句css代码中.这样极大的减小了代码,优化css文件. 我们常用的font属性有下面这六种: font-style设定斜体 如:font-style: italic;font-weight设定文字粗细 如:font-weight: bold;fon

实例讲解:DIV CSS网页布局常用的方法和技巧

css|技巧|网页 CSS布局常用的方法float:none|left|right 取值:none:默认值.对象不飘浮left:文本流向对象的右边right:文本流向对象的左边  它是怎样工作的,看个一行两列的例子 xhtml代码:<div id="wrap"> <div id="column1">这里是第一列</div> <div id="column2">这里是第二列</div>

实例讲解深入学习CSS网页定位元素

css|网页 1. position:static|无定位 position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位 example: #div-1 {  position:static; } 2. position:relative|相对定位 使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置. 如果要让div-1层向下移动20px,左移40px: example: #div-1 {

入门知识:介绍学习网页技术CSS样式的方法

css|网页 从开始认识CSS(DW4)那时起,我就知道了CSS的强大,但从未用CSS排版过,因为我曾经尝试过学习,但感觉太难了 而且用DW的表格,所见及所得,做起页面来非常的快,排版也容易的多,由于最近求职,很多公司都要求DIV,CSS,所以我再次尝试学习 1.学习方式 我以为,看别人的代码是一个非常好的学习方式(前提是你需要有点基础知识),在查看别人的代码时可以去除一些重复的,或者一些于CSS无关的代码,将更利于我们分析,你可以从中了解到别人是怎么做的,更深一点,你可以考虑为什么要这样做,当

新手来学习网页技术CSS的语法基础

css|网页|语法 1. 基本语法 CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value). 基本格式如下: selector {property: value} (选择符 {属性:值}) 选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY.P.TABLE--,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开: body {color: black} 选择符body是指页面主体部分,color是控制文字颜色的属性

深入学习网页技术CSS中选择符的应用

css|网页 一.选择符模式 模式/含义/内容描述 * 匹配任意元素.(通用选择器) E 匹配任意元素 E (例如一个类型为 E 的元素).(类型选择器) E F 匹配元素 E 的任意后代元素 F .(后代选择器) E > F 匹配元素 E 的任意子元素 F .(子选择器) E:first-child 当元素 E 是它的父元素中的第一个子元素时,匹配元素 E .(:first-child 伪类) E:link E:visited 如果 E 是一个目标还没有访问过(:link)或者已经访问过(:v

实例讲解:用CSS制作“鼠标经过图像”

css|鼠标 以前我们用表格来布局网页时,我们都很喜欢用DW(Dreamweav)中的"鼠标经过图像",因为那的确吸引人!但是我们也同样发现这样的一个问题:当网速不太快的时候,鼠标经过后的图片还没有下载下来,看上去很不美观.并且还需要一大堆的JS代码,还需要预载经过图片.相对来说比较麻烦!特别是对那些现在记事本来手工编写网页的朋友更是烦得很.事实上用CSS就可以解决这个问题,并且非常的简单,下载快,不会出现鼠标经过后的图片还没有下载下来这种情况.这个做法的原理很简单:就是用<a&

个人学习总结:如何学习网页技术CSS

css|网页 总结以下5点,大家可以看看参考下. 1.读写 读书读上面我推荐的贴子.网站和blog.互联网的宗旨在于共享和传播,那些接触技术比较早的理解和实践比较深入的朋友给我们提供经验和教程.要静下心来,不能仅仅为了一个效果或者一个布局的实现去找答案.而是去理解教程给我们带来的实现思路.要系统地读书也要针对性的搜集某个问题的方法去总结提取.读到的时候就要写,写一些代码片断,一些布局结构,一些效果的实现.哪怕是照着书敲出代码来,加深记忆和理解,效果要比单纯的度过效果要好得多. 2.改动 改,不是