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. T-SQL 函数概述

    T-SQL函数的类别和描述: 函数类别 作用 聚合函数 返回一个标量值,表示在某个值域上的聚合,应用于特定的聚合选择或者汇总 配置变量 返回SQL Server执行环境的信息.这些信息可用于给对象编程 ...

  2. iOS-tableView点击下拉菜单

    #import "ViewController.h" @interface ViewController ()<UITableViewDataSource,UITableVi ...

  3. 原创+部分引用啦:C# Winform界面中的分隔线问题

    C sharp 中Winform中的控件很多,一个小小的问题居然会绕上一个小弯子,做界面的时候, 你需要在界面上弄一条分隔线,把相关的功能分隔开来,结果原来在其它 IDE编辑器里很容易实现的这个功能, ...

  4. busybox中tftp服务器使用命令

    参数说明:-l 是local的缩写,后跟存在于Client的源文件名,或下载Client后重命名的文件名.-r 是remote的缩写,后跟Server即PC机tftp服务器根目录中的源文件名,或上传S ...

  5. (原)测试intel的并行计算pafor

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/4988264.html 参考网址: 关于mt19937:http://www.cnblogs.com/e ...

  6. 为什么在CSS中不要再使用@import

    http://www.stevesouders.com/blog/2009/04/09/dont-use-import/为什么在CSS中不要再使用@import

  7. 基于VMware的eCos应用程序测试(hello wold)

    (1)脚本配置ecosconfig new pccdl_component CYG_HAL_STARTUP { # Flavor: data # No user value, uncomment th ...

  8. linux的一点一滴---open

    open函数用于打开和创建一个文件. 所需头文件: #include<sys/types.h> #include <sys/stat.h> #include <fcntl ...

  9. 关于link, visited, hover, active

    LoVe/HAte 如果只是希望点击的时候显示背景色,那么只需要设置 :active,无需设置:hover #navbar:active, #backbtn:active { background-c ...

  10. 老了,问题定位难了,xml编码解析

    同样一个程序,在A机器好用,在B机器不好用,怀疑过jdk版本位数问题,怀疑过其他. 最后,突然发现出错的全是xml中文,想到是不是编码问题,一看环境变量果真一个gbk,一个utf-8,再一看 程序,没 ...