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. VS2015预览版中的C#6.0 新功能(二)

    VS2015预览版中的C#6.0 新功能(一) VS2015预览版中的C#6.0 新功能(三) 自动属性的增强 只读自动属性 以前自动属性必须同时提供setter和getter方法,因而只读属性只能通 ...

  2. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

  3. Window Linux下实现指定目录内文件变更的监控方法

    转自:http://qbaok.blog.163.com/blog/static/10129265201112302014782/ 对于监控指定目录内文件变更,window 系统提供了两个未公开API ...

  4. Python学习笔记四,dict和set

    dict是字典dictionary的缩写,他存放的是键值对key/value,用花括号表示,格式为d={'micheal':99,'jack':88} 当我们访问的时候直接print(d['miche ...

  5. nginx之如何获取真实客户端ip

    nginx的配置文件中日志格式加入$http_x_forwarded_for--> log_format access '$remote_addr - $remote_user [$time_l ...

  6. HDU 3501 Calculation 2(欧拉函数)

    Calculation 2 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submi ...

  7. pm2安装及常用命令

    安装:npm install -g pm2 启动程序:pm2 start <app_name|id|all> 列举进程:pm2 list 退出程序:pm2 stop <app_nam ...

  8. jdbc 处理mysql procedure返回的多个结果集

    1:测试数据库表user mysql> desc user$$ +-------+-------------+------+-----+---------+----------------+ | ...

  9. VS_QT中配置qDebug输出

    在使用qt_create时可以使用qDebug进行调试输出.在VS中也可以使用.但需要配置.配置过程如下图所示: 一.首先右击工程名,选择最后一个选项“Properties” 二.然后选择Linker ...

  10. QAction系列详解

    QAction系列详解 一.QAction类详解 [详细描述] QAction类提供了抽象的用户界面action,这些action可以被放置在窗口部件中.        应用程序可以通过菜单,工具栏按 ...