位置:电子教程 > CSS入门到精通 推荐学习资源
CSS入门
CSS 基础样式
CSS 高级样式
语法应用:CSS 对齐
当前阅读教程:CSS入门到精通 > class 选择器
阅读(22555525)      收藏       赞(5685)      分享
上一篇: id 选择器 下一篇: CSS 创建

基础语法

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

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

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

示例

小白教程网www.2d5.net

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>

效果图

小白教程网www.2d5.net

image.png

示例

小白教程网www.2d5.net

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>

效果图

小白教程网www.2d5.net

image.png



上一篇: id 选择器 下一篇: CSS 创建
QQ交流群:147415688             广告联系QQ:45157718(微信同号)