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. oracle 语句汇总

    Oracle数据库常用sql语句 ORACLE 常用的SQL语法和数据对象 一.数据控制语句 (DML) 部分 1.INSERT  (往数据表里插入记录的语句) INSERT INTO 表名(字段名1 ...

  2. C++重难点知识

    1.顶层const和底层const const int a=10; int b=5; const int *p1=&a; int (*const)p2=&b; p1是顶层const,表 ...

  3. poj2774 Long Long Message(后缀数组or后缀自动机)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Long Long Message Time Limit: 4000MS   Me ...

  4. WordPress设置固定链接和邮件提醒遇到的问题

    固定链接1.WordPress根目录下有一个.h...文件,记录文章链接类型对应的配置,要保证该文件的可写全权限:2.设置Apache2的rewrite模块启动,/etc/apache2/modle- ...

  5. Obstack是C标准库里面对内存管理的GNU扩展

    Obstack是C标准库里面对内存管理的GNU扩展 Obstack介绍 Obstack初始化 在Obstack中申请对象 释放对象 申请growing object 获取Obstack状态 数据对齐 ...

  6. linux 添加自定义环境变量

    1. vi /etc/profile ,在文件末尾加上要定义的环境变量,语法如下: export 变量名=变量值

  7. jQuery EasyUI求助

    最近在学习easyui的时候遇到了一个很奇怪的问题,在使用datagrid组件的时候,我想自定义一个列,用来显示一个查看详细页面的链接,但是当这个列不是最后一列的时候,链接一直显示不出来,求大神们指点 ...

  8. javascript全局对象

    一.Array 二.Boolean 三.Date 四.Error 五.EvalError 六.Function 七.JSON 八.Math 九.Number 十.Object 十一.RangeErro ...

  9. java.net.SocketTimeoutException: Read timed out

    If you get java.net.SocketTimeoutException: Read timed out exception Try setting own timeout value w ...

  10. Populating Next Right Pointers in Each Node 解答

    Question Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLink ...