id 和 class 选择器

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


(1) id 选择器

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

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

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

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

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

(2)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;}

css基础之 id和选择器的更多相关文章

  1. css基础 引用方式 标签选择器 优先级 各式布局

    今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...

  2. CSS基础-引入方法,选择器,继承

    一.CSS引入方法:行内式.嵌入式.导入式.链接式. 1.行内式. 即:在标签的style属性中设定CSS样式. 例子:<div style="行内式</div> 2.嵌入 ...

  3. CSS基础知识:常见选择器示例

    CSS(Cascading Style Sheet),中文译为层叠样式表,可以让设计者方便灵活地控制Web页面的外观表现.CSS是1996年由W3C审核通过并且推荐使用的.CSS的引入,就是为了使HT ...

  4. css基础语法一(选择器与css导入方式)

    页面中,所有的CSS代码,需要写入到<style></style>标签中.style标签的type属性应该选择text/css,但是type属性可以省略. CSS修改页面中的所 ...

  5. css基础知识之属性选择器

    css属性选择器及属性和值选择器如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. CSS基础 结构伪类选择器 last-child、first-child和nth-of-type的使用方法

    一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> ...

  7. 0009 CSS基础选择器( 标签、类、id、通配符)

    typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用 ...

  8. HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  9. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

随机推荐

  1. C语言获取键盘按键

    在写控制台游戏的时候,发现不管用cin,scanf还是getchar,都不能实时的输入按键,必须要按回车才能读进去,而按回车的话会导致输入异常,所以要使用获取键盘按键的函数. 加入头文件#includ ...

  2. 导入android项目在eclipse中会报@Override错误

    很多时候导入android项目在eclipse中会报@Override错误,这是由于java编译器的版本不正确,Java 1.5的编译器默认对父类的方法进行覆盖,采用@Override进行说明:但1. ...

  3. (转) Java程序员应该知道的10个调试技巧

    原地址:http://www.csdn.net/article/2012-09-03/2809495-java-debugging-tips-with-eclipse 调试可以帮助识别和解决应用程序缺 ...

  4. 显示查询记录的前n条 mysql limit用法

    按时间倒序出所有的数据 mysql order by createtime desc ; +----+------------------+ | id | id_no | +----+-------- ...

  5. html标签元素分类

    元素分类 html中的标签元素大体分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...&l ...

  6. WPF下YUV播放的D3D解决方案

    http://blog.csdn.net/yangyy9611/article/details/17464133

  7. project euler 26:Reciprocal cycles

    A unit fraction contains 1 in the numerator. The decimal representation of the unit fractions with d ...

  8. 认识元数据和IL(上) <第三篇>

    说在,开篇之前 很早就有说说Metadata(元数据)和IL(中间语言)的想法了,一直在这篇开始才算脚踏实地的对这两个阶级兄弟投去些细关怀,虽然来得没有<第一回:恩怨情仇:is和as>那么 ...

  9. Redis应用场景-整理

    1.  MySql+Memcached架构的问题 Memcached采用客户端-服务器的架构,客户端和服务器端的通讯使用自定义的协议标准,只要满足协议格式要求,客户端Library可以用任何语言实现. ...

  10. 嵌入式设备web服务器

    操作系统:ubuntu10.04 前言:    为了提高对设备的易操作性,很多设备中提供pc机直接通过浏览器操作设备的功能.这就需要在设备中实现web服务器.    现在在嵌入式设备中所使用的web服 ...