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 中起作用。

css(1-1)样式表的更多相关文章

  1. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  2. web前端篇:CSS使用,样式表特征,选择器

    目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...

  3. CSS重构:样式表性能调优

    这两天窝在家里又看了本CSS相关的书:<CSS重构:样式表性能调优>.重构是指在不改变代码行为的前提下,重写代码,使其更加简洁.易于复用. 这本书读起来比较快,可挑自己感兴趣的读,前面三章 ...

  4. CSS 层叠及样式表来源

    Web标准化运动的口号——分离.分离.分离. 在2003年的 SXSW 会议中, Steve Champeon 和 Nick Finck 做了一个名为“面向未来的全方位 Web 设计”的演讲,揭示了这 ...

  5. CSS三种样式表

    1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...

  6. css选择器,样式表导入

    css笔记1.选择器(selecter)共9种 a.类型选择器 p{},body{} b.后代选择器 p h1{} c.ID选择 #idname{} d.类选择 .classname{} e.通用选择 ...

  7. Normalize.css重置化样式表

    Normalize.css是一种CSS reset的替代方案.它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML ...

  8. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  9. CSS 四种样式表 六种规则选择器 五种常用样式属性

    新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...

  10. css网页重置样式表(多版本)

    Eric reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ...

随机推荐

  1. WordPress二级菜单设置

    关于二级菜单的设置,首先建立几个自己的分类目录,然后打开菜单设置界面,用鼠标自由拖动即可.注意,这里说的一级菜单和二级菜单都是分类目录,所 以我们写文章的时候应该同时选择一级菜单和二级菜单两个分类目录 ...

  2. Python 从入门到入门基础练习十五题

    **a) 6.成绩转换:编写一个学生成绩转换程序,用户输入百分制的学生成绩,成绩大于或等于60的输出"pass",否则输出"fail",成绩不四舍五入. a = ...

  3. 我的linux学习之路--(二)linux常用命令

    1.date 时间管理 电脑主板有电池,所有电脑断电时间正确,rtc linux:rtc 硬件时钟 clock/hwclock 系统时钟(linux操作系统用软件模拟震荡器计算)date看到就是 命令 ...

  4. 微信扫一扫JSSDK 扫一扫报错 invalid signature 问题

    交代一下业务场景 在在四个页面都需要用到扫一扫去扫二维码.然而在图三-我的订单 下单中这个页面扫一扫不起效,当时就郁闷了为啥其他页面有用,这里却没用,开始调试吧. 报错信息是签名验证不成功. 自己去打 ...

  5. Redis单例、主从模式、sentinel以及集群的配置方式及优缺点对比

    https://my.oschina.net/zhangxufeng/blog/905611

  6. zabbix的各种键值

    zabbix服务器端通过与zabbix agent通信来获取客户端服务器的数据,agent分为两个版本,在配置主机我们可以看到一个是agent,另一个是agent(active). agent:zab ...

  7. linux小白成长之路2————yum安装火狐浏览器

    1.使用终端: CentOS左上角:应用程序>收藏>终端  2.使用root权限安装软件: 输入:sudo -i 输入密码(上篇安装linux虚拟机时设定的登录密码,也是超级管理员密码) ...

  8. linux小白成长之路4————centos7配置自动更新安装安全补丁

    [内容指引] 安装yum-cron; 修改配置:nano: 手工启动服务: 将服务设置为开机自动启动. 为保证linux系统的安全性以及稳定性,可以使用yum-cron服务自动更新: 1.安装yum- ...

  9. CSS 剩余宽度和高度完全填充

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  10. java————面向对象概念

    面向对象 OO:面向对象 OOP:面向对象编程 OOA:面向对象分析 OOD:面向对象设计 面向对象的特征 继承,封装,多态 什么是对象? 对象是存在的具体实体,具有明确定义的特征和行为. 万物皆对象 ...