下载APP 编程狮,随时随地学编程
返回 首页

CSS 教程

CSS Id 和 Class选择器

CSS IdClass


id 和 class 选择器

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


id 选择器

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

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

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

实例

#para1
{
text-align:center;
color:red;
}

尝试一下 »

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

Remark ID属性只能在每个 HTML 文档中出现一次。具体的解释,请参阅 XHTML:网站重构


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;}

尝试一下 »

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

扩展阅读

在 HTML 标签中设置 CSS 样式时,有多种 CSS 选择器可供选择,你可以参考本站的CSS3选择器归类整理(包含了CSS3中新增的选择器)来了解更多有关CSS选择器的内容。


目录

CSS 教程

CSS 教程导读
CSS 简介
CSS 语法
CSS Id 和 Class选择器
CSS 创建
CSS Backgrounds(背景)
CSS Text(文本)
CSS Fonts(字体)
CSS 链接(link)
CSS 列表样式(ul)
CSS Table(表格)
CSS 盒子模型
CSS Border(边框)
CSS 轮廓(outline)属性
CSS Margin(外边距)
CSS Padding(填充)
CSS 分组和嵌套
CSS 尺寸 (Dimension)
CSS Display(显示) 与 Visibility(可见性)
CSS Positioning(定位)
CSS Float(浮动)
CSS 水平对齐(Horizontal Align)
CSS 组合选择符
CSS 伪类
CSS 伪元素
CSS 导航栏
CSS 下拉菜单
CSS 图片廊
CSS 图像透明/不透明
CSS 图像拼合技术
CSS 媒体类型
CSS 属性选择器
CSS 总结
CSS 实例

CSS 响应式设计

响应式 Web 设计 – Viewport
响应式 Web 设计 – 网格视图
响应式 Web 设计 – 媒体查询
响应式 Web 设计 – 图片
响应式 Web 设计 – 视频(Video)
响应式 Web 设计 – 框架

CSS实例

CSS 编程实战闯关
CSS 实例
CSS 测验

CSS 相关教程

CSS 入门教程

CSS 拓展阅读

看这一篇就够了,css选择器知识汇总
学会这几种方法css居中很简单
css样式就得这么写(css参考样式集合)
CSS 透明度设置方法及常见问题解析
你想知道的css hack知识全都帮你整理好了
DIV+CSS布局基本流程及实例介绍
初学者必读:CSS是什么?DIV+CSS又是什么?
CSS 布局的基础方法及css布局技巧
厉害了我的哥,css图片居中原来有这么多种方法
CSS 淘宝导航代码集合(附使用技巧)
CSS虚线实现方法及多种应用实例
CSS滚动条实现步骤及美化小技巧
详细的css导航条实现代码及素材下载
CSS两端对齐语法及代码实例教学
CSS半透明属性介绍及代码实例
CSS加载失败的6个原因
HTML引入CSS的常见方法及解析
css鼠标样式语法及20种可选值(属性)
四款好看实用的CSS表格样式分享
css与html的区别

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }