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. js 对象浅拷贝和深拷贝

    var model={name:"boy",age:13}; var CopyModel=model; console.log(CopyModel.name); model.nam ...

  2. mybatis的sqlprovider用法扩展自定义sql

    SqlProvider使用 public class MemberRewardSqlProvider { private static final Logger log = LoggerFactory ...

  3. HDU 1724 Ellipse (自适应辛普森积分)

    题目链接:HDU 1724 Problem Description Math is important!! Many students failed in 2+2's mathematical tes ...

  4. upc组队赛1 小C的数学问题【单调栈】(POJ2796)

    小C的数学问题 题目描述 小C是个云南中医学院的大一新生,在某个星期二,他的高数老师扔给了他一个问题. 让他在1天的时间内给出答案. 但是小C不会这问题,现在他来请教你. 请你帮他解决这个问题. 有n ...

  5. 递归中,调用forEach方法问题

    1 function traverse(objNmae,obj,url){ url = url || objNmae; if(typeof obj === "object" ){ ...

  6. jpql简单l查询

    JPQL全称Java Persistence Query Language package com.ytkj.entity; import javax.persistence.*; import ja ...

  7. 初探remoting双向通信(一)

    原 初探remoting双向通信(一) 2013年06月24日 15:47:07 喜欢特别冷的冬天下着雪 阅读数 4389 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blo ...

  8. JNI 在Android Studio利用NDK编译运行一个简单的c库

    NDK开发,其实是为了项目需要调用底层的一些C/C++的一些东西:另外就是为了效率更加高些.如果你在Eclipse+ADT下开发过NDK就能体会到要么是配置NDK还要下载Cygwin,配置Cygwin ...

  9. Exist/In 使用

    exists表示()内子查询语句返回结果不为空说明where条件成立就会执行主sql语句,如果为空就表示where条件不成立,sql语句就 不会执行.not exists和exists相反,子查询语句 ...

  10. 浅谈HTTP与其工作流程

    一.什么是HTTP协议 HTTP协议(Hyper Text Transfer Protocol)翻译过来是超文本传输协议,也是一种restful风格的协议,在web开发和APP接口开发都很常用. HT ...