当前阅读教程:CSS入门到精通 > class 选择器 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: id 选择器 | 下一篇: CSS 创建 |
基础语法class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示: 在以下的例子中,所有拥有 juzhong类的 HTML 元素均为居中。 示例1代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>class 选择器</title> <!--定义样式--> <style> /*自定义样式,样式名称为juzhong*/ .juzhong { text-align:center; /*居中样式*/ } </style> </head> <body> <h1>标题居中</h1> <p>黄菊华老师</p> </body> </html> 效果图示例2你也可以指定特定的HTML元素使用class。 类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。 在以下实例中, 所有的 p 元素使用 class=" juzhong " 让该元素的文本居中: 代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>class 选择器</title> <!--定义样式--> <style> /*自定义样式,样式名称为juzhong,只有p标签使用该类才有效果*/ p.juzhong { text-align:center; /*居中样式*/ } </style> </head> <body> <!--样式无效--> <h1>标题居中,h1标签中无效</h1> <!--样式有效--> <p>黄菊华老师,是p标签内有效</p> </body> </html> 效果图 |
|
上一篇: id 选择器 | 下一篇: CSS 创建 |