ylbtech-CSS:CSS Id 和 Class选择器
1.返回顶部
1、

CSS Id 和 Class


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 浏览器中不起作用。


class 选择器

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

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

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

实例

.center {text-align:center;}

尝试一下 »

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

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

实例

p.center {text-align:center;}

尝试一下 »

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

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

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

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

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

  2. CSS id 和 class 选择器

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

  3. CSS Id 和 Class选择器

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

  4. 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

    前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介    叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...

  5. CSS3——注释 id 和 class 选择器 css创建(外部、内部、内联样式表)

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

  6. CSS学习(2)Id和Class选择器

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

  7. CSS中模拟父元素选择器

    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

  8. css基础语法一(选择器与css导入方式)

    页面中,所有的CSS代码,需要写入到<style></style>标签中.style标签的type属性应该选择text/css,但是type属性可以省略. CSS修改页面中的所 ...

  9. CSS概念,引入,选择器

    概念 层叠样式表,定义如何显示HTML元素. 使用方式 行内样式 不推荐使用此方式 结构 和 样式的 杂糅会影响后期的维护 <p style="color: red"> ...

随机推荐

  1. 框架-.NET:.NET Core

    ylbtech-框架-.NET:.NET Core .NET Core是适用于 windows.linux 和 macos 操作系统的免费.开源托管的计算机软件框架,是微软开发的第一个官方版本,具有跨 ...

  2. HTML-参考手册: HTML 字符集

    ylbtech-HTML-参考手册: HTML 字符集 1.返回顶部 1. HTML 字符集 HTML 字符集 如需正确地显示 HTML 页面,浏览器必须知道使用何种字符集. 万维网早期使用的字符集是 ...

  3. 微信支付(JsApi)

    这两天有个小项目用的微信网页jsapi支付 用的thinkphp框架开发 ,首次做微信支付 碰了很多壁,做了简单就记录,方便回顾 也希望对大家能有点帮助,也希望路过的大神批评指正.. 一.必备条件及相 ...

  4. 201⑨湘潭邀请赛 Chika and Friendly Pairs(HDU6534)

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=6534 题意: 给你一个数组,对于第i个数来说,如果存在一个位置j,使得j>i并且a[j]-k&l ...

  5. Pandas DataFrame操作

    DataFrame的创建 >>> import pandas as pd >>> from pandas import DataFrame #define a di ...

  6. Java异常处理教程

    异常是在没有定义正常执行路径时在Java程序的执行期间可能出现的条件.Java通过将执行操作的代码与处理错误的代码分离来处理错误. 当发生异常时,Java会创建一个包含有关异常的所有信息的对象,并将其 ...

  7. 20140922 tcpip3次握手 分段 分页 spooling 位示图

    tcpip3次握手 http://www.cnblogs.com/CBDoctor/archive/2012/10/17/2727073.html   操作系统:http://blog.csdn.ne ...

  8. Source object main.o has EABI version 0, but target ../../../bin/ad has EABI version 5

    编译的时候,遇到了一些问题:Source object main.o has EABI version 0, but target ../../../bin/ad has EABI version 5 ...

  9. 标准模板库(STL)学习探究之Multimap容器

    C++ Multimaps和maps很相似,但是MultiMaps允许重复的元素.(具体用法请参考map容器)     函数列表:     begin() 返回指向第一个元素的迭代器      cle ...

  10. Python第十二节 异常

    Python 第十三节 异常 python的错误一般包含两类: 语法错误 : 语法错误一般就是, 当你写完程序提交的时候, 发现无法提交, 提示存在错误.例如: 英文逗号 错写成了 中文逗号 异常 : ...