CSS 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>css教程</title>

<style>

#para1

{

    text-align:center;

    color:red;

}

</style>

</head>

<body>

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

<p>这个段落不受该样式的影响。</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>css教程</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;}

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

示例代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>css教程</title>

<style>

p.center

{

    text-align:center;

}

</style>

</head>

<body>

<h1 class="center">这个标题不受影响</h1>

<p class="center">这个段落居中对齐。</p>

</body>

</html>

效果：

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

  1. CSS：CSS Id 和 Class选择器

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

  2. [HTML] CSS Id 和 Class选择器

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

  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. js for in

    JavaScript中for..in循环陷阱 大家都知道在JavaScript中提供了两种方式迭代对象:   (1)for 循环:   (2)for..in循环: 使用for循环进行迭代数组对象,想必 ...

  2. this，你是谁？

    在js中this不像其它语言那样容易理解,它有时候指window对象,有时候又是其它对象,那么this,你到底是谁呢?要分析this就要先理解js中的方法定义,因为this一般都是在方法中使用的,而且 ...

  3. map实现

    /*PLSQL实现Map*/ --建立序列create sequence seq_map_param_id ;--建立参数表create table map_param(id number prima ...

  4. Codeforces Round #361 (Div. 2) E. Mike and Geometry Problem

    题目链接:传送门 题目大意:给你n个区间,求任意k个区间交所包含点的数目之和. 题目思路:将n个区间都离散化掉,然后对于一个覆盖的区间,如果覆盖数cnt>=k,则数目应该加上 区间长度*(cnt ...

  5. ClickHouse开源数据库

    ClickHouse是一个开源的面向列式数据的数据库管理系统,能够使用SQL查询并且生成实时数据报告. 优点: 1.并行处理单个查询(利用多核) 2.在多个服务器上分布式处理 3.非常快的扫描,可用于 ...

  6. Powershell Function Get-PendingReboot

    获取系统中Restart Pending的计算机 $servers=get-content D:\serverlist.txt Get-PendingReboot -ComputerName $ser ...

  7. php 代替 js实现自定义时间选择器

    w 0-php来结合服务端数据,处理前端页面的交互: 1-php 加法 乘法的效率对比,对算术运算的优化. 减少乘法运算? function w_select($wname, $wii) { $w = ...

  8. 客户也可以申请它使用的最后一个IP地址。如果该客户所在的网络中此IP仍然可用，服务器就可以准许该申请。

    http://baike.baidu.com/item/IP地址 公有地址 公有地址(Public address)由Inter NIC(Internet Network Information Ce ...

  9. <2014 04 29> c/c++常用库总结

    C 标准库 ============================================================================================== ...

  10. python基础教程_学习笔记19：标准库：一些最爱——集合、堆和双端队列

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/signjing/article/details/36201499 标准库:一些最爱 集合.堆和双端队 ...