• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css教程之样式表的基本语法(二) class(类)和id的一个小实例

css教程之样式表的基本语法(二) class(类)和id的一个小实例

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css教程,样式表等相关知识,佚名 希望在学习及工作中可以帮助到您

class(类)和id的一个小实例

在上一节中我们了解了如何为特定的标签定义样式,例如我们利用 “h1{font-size: 12px;}”将页面内所有的标题1的字体大小改为了12像素。那么如果我不希望所有的标题1样式都被修改该怎么做呢?这时class和id就可以帮你的忙。

为了了解class和id,我们先来看两个网页。

没有加入CSS时的页面,加入CSS之后的页面。它们的源代码如下:

 

class和id的用法

上面的例子应用class和id实现了3种不同的标题1。下面我们就来讲讲class和id的具体应用规则。

指定标签的class和id

首先我们要在<head>部分定义class(类)或id。

class的定义方法: 指定标签.类名 {样式}

id的定义方法:指定标签#id名 {样式}

然后我们在想要应用类的标签上加上class(类)或者id属性:

class的应用方法:<指定标签 class="类名">

id的应用方法:<指定标签 id="id名">

这种方式定义的class(类)和id只能作用于指定标签。在上面的例子中我们定义了三个类,类名分别为"dabiaoti"、"daohang"和"xinwen",它们均作用于h1标签。当我们试图将其中“xinwen”的样式应用于一个<p>标签的时候(<p class="xinwen">我是新闻的内容。</p>),您会看到它的样式没有发生任何改变。这是一种错误的CSS应用。

注意:类名和id名不可以用数字开头。

不指定标签的类或id

在网页设计的过程中,你可能不希望你定义的类只局限于一个标签。就拿上面的例子来说,你可能希望xinwen类可以应用于段落标签<p>。那么你只需要将定义部分的h1.xinwen改为.xinwen,即去掉h1。这种定义中不含标签名的类当然也就不再局限于某一个标签了。看看我们修改之后的网页,“新闻的内容”也应用了xinwen类的样式。

class(类)与id的区别

到这里你也许要问了,class和id看起来除了一个.和#的区别之外,无论在定义上还是在应用上似乎都是一模一样啊?然而事实上并不如此,同一id在一个页面内只能应用一次,而class则是用于描述多次出现的元素。这从它们的名称上很容易理解。id就类似元素的省份证号码,它必须是唯一的,而class则是一类具有共同属性的元素的合称,是一类。

如果你试图在一个一面内多次使用同一个id,页面通常是可以正常显示的。但是这会给后期的维护带来不便,还可能造成其它的问题。所以我们一定要区分开id和class,并且合理的应用它们。

您可能想查找下面的文章:

  • 利用CSS span实现双语菜单的方法教程
  • css教程之样式表的基本语法(二) class(类)和id的一个小实例
  • css教程之样式表的基本语法(一)
  • css教程之绝对定位使用详解
  • css教程制作css圆角边框(兼容全部浏览器)
  • css教程实现div背景色渐变色代码分享
  • css教程制作八卦镜代码分享

相关文章

  • 2017-08-06CSS常用优化技巧
  • 2017-08-06简析CSS表达式attr()的运用
  • 2017-08-06有利于SEO的DIV+CSS的命名规则小结
  • 2017-08-06css中link和@import的区别分析详解
  • 2017-08-06利用vertical-align:middle实现行内元素的水平垂直居中对齐
  • 2017-08-06你不知道的outerText,innerText 区别说明
  • 2017-08-06浅析CSS实现水平垂直同时居中的5种思路
  • 2017-08-06css3实例教程 一款纯css3实现的发光屏幕旋转特效
  • 2017-08-06CSS 层叠和继承实现
  • 2017-08-06JS+CSS实现侧边栏跟随浏览器滚动效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS 制作网页导航条(上)
    • 大小不固定的图片、多行文字的水平垂直居中实现方法
    • 浅析CSS编程的外部CSS文件引用方法
    • CSS3中的content属性使用示例
    • HTML5时代CSS设置漂亮字体取代图片
    • CSS弹性盒模型flex在布局中的应用详解
    • table中的超长字符串用省略号表示的css样式
    • ie6下a标签的onclick事件不执行问题解决方案
    • CSS伪类:before在元素之前 :after 在元素之后实例讲解
    • 表单元素与提示文字无法对齐的解决方法(input,checkbox文字对齐)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有