id 和 class 选择器

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

#para1

{

text-align:center;

color:red;

}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>W3Cschool教程(w3cschool.cn)</title>

<style>

#para1

{

    text-align:center;

    color:red;

}

</style>

</head>

<body>

<p id="para1">Hello World!!!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>W3Cschool教程(w3cschool.cn)</title>

<style>

.center

{

    text-align:center;

}

</style>

</head>

<body>

<h1 class="center">标题居中</h1>

<p class="center">段落居中。</p>

</body>

</html>

你也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

p.center {text-align:center;}

实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>W3Cschool教程(w3cschool.cn)</title>

<style>

p.center

{

    text-align:center;

}

</style>

</head>

<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be center-aligned.</p>

</body>

</html>

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

[HTML] CSS Id 和 Class选择器的更多相关文章

  1. CSS Id 和 Class选择器

    CSS Id 和 Class选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. 一.id 选择器 id 选择 ...

  2. CSS：CSS Id 和 Class选择器

    ylbtech-CSS:CSS Id 和 Class选择器 1.返回顶部 1. CSS Id 和 Class id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置& ...

  3. CSS id 和 class 选择器

    如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标有特定 id 的 HTML 元 ...

  4. 【代码笔记】Web-CSS-CSS id和Class选择器

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

  6. CSS3——注释 id 和 class 选择器 css创建（外部、内部、内联样式表）

    注释 /*         注释内容          */ id 和 class 选择器 id   ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用 < ...

  7. CSS学习（2）Id和Class选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义. 以下的样式 ...

  8. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  9. css笔记09：选择器优先级

    1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

随机推荐

  1. String课后作业

    请查看String.equals()方法的实现代码,注意学习其实现方法. public class StringEquals { @param args the command line argume ...

  2. 二模 （15）day1

    第一题: 题目大意: 有两个长度为N的序列A和B,在A和B中各任取一个数相加可以得到N2个和,求这N2个和中最小的N个. 解题过程: 1.这题是刘汝佳<<训练指南>>上的一道经 ...

  3. Phonebook 导出联系人到SD卡（.vcf）

    2014-01-13 16:53:55 1. 在Phonebook中导出联系人到内部存储,SD卡或者通过蓝牙.彩信.邮件等分享联系人时,通常会先将选择的联系人打包生成.vcf文件,然后将.vcf文件分 ...

  4. 理解RESTful架构(转载)

    本文转载自:http://www.ruanyifeng.com/blog/2011/09/restful.html 越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软 ...

  5. 使用rpm命令卸载程序

    步骤1.rpm -qa|grep 程序名称 步骤2.rpm -e 安装包名称 --nodeps

  6. Linux学习 ： 裸板调试 之 使用MMU

    MMU(Memory Management Unit,内存管理单元),操作系统通过使用处理器的MMU功能实现以下:1)虚拟内存.有了虚拟内存,可以在处理器上运行比实际物理内存大的应用程序.为了使用虚拟 ...

  7. zlhome.com Deal

    using AnfleCrawler.Common; using System; using System.Collections.Generic; using System.Linq; using ...

  8. hibernate内部测试题（附赠答案）

    一.选择题(共25题,每题2.5分,选择一项或多项,漏选错选不得分) 1．在Hibernate中,以下关于主键生成器说法错误的是( ). A．increment可以用于类型为long.short或by ...

  9. LNMP服务器虚拟主机管理lnmp

    安装 系统需求: 需要2 GB硬盘剩余空间 安装步骤: 1.使用putty或类似的SSH工具登陆:登陆后运行:screen -S lnmp如果提示screen命令不存在可以执行:yum install ...

  10. 当pip install不能正确安装的时候，try easy_install

    当pip install不能正确安装的时候,try easy_install 重复试了几次pip install -r requirements.txt,都在安装pillow的时候失败了,想找这个枕头 ...