css基础之 id和选择器
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和选择器的更多相关文章
- css基础 引用方式 标签选择器 优先级 各式布局
今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...
- CSS基础-引入方法,选择器,继承
一.CSS引入方法:行内式.嵌入式.导入式.链接式. 1.行内式. 即:在标签的style属性中设定CSS样式. 例子:<div style="行内式</div> 2.嵌入 ...
- CSS基础知识:常见选择器示例
CSS(Cascading Style Sheet),中文译为层叠样式表,可以让设计者方便灵活地控制Web页面的外观表现.CSS是1996年由W3C审核通过并且推荐使用的.CSS的引入,就是为了使HT ...
- css基础语法一(选择器与css导入方式)
页面中,所有的CSS代码,需要写入到<style></style>标签中.style标签的type属性应该选择text/css,但是type属性可以省略. CSS修改页面中的所 ...
- css基础知识之属性选择器
css属性选择器及属性和值选择器如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- CSS基础 结构伪类选择器 last-child、first-child和nth-of-type的使用方法
一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> ...
- 0009 CSS基础选择器( 标签、类、id、通配符)
typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用 ...
- HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
- css 基础---选择器
1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...
随机推荐
- Web 上一页下一页 用超链接 用按钮
方法一超链接 Default.aspx.cs html代码************************************************************* ...
- 关于Struts2的类型转换详解
详细出处参考:http://www.jb51.net/article/35465.htm 一.类型转换的意义 对于一个智能的MVC框架而言,不可避免的需要实现类型转换.因为B/S(浏览器/服务器)结构 ...
- Windows,Linux换行知识
换行符在写文件的时候用得上 Linux: "\n"Windows: "\r\n" 注意:换行符一定要加上双引号,单引号是没有用的.
- cobbler之详细配置
目录 作用 组件 命令 安装过程 安装包 配置文件 启动cobbler服务 配置cobbler服务 使用cobbler_web 作用:系统自动化安装,支持lin ...
- 纯js实现积木(div)拖动效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Excel导出cs文件
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...
- 观点:哪些人适合做FPGA开发?(转)
原文:http://xilinx.eetrend.com/blog/561 FPGA目前非常火,各个高校也开了FPGA的课程,但是FPGA并不是每个人都适合,FPGA讲究的是一个入道,入什么道,入电子 ...
- mongodb GUI
官网:http://robomongo.org/ 提供Mac .Windows .Linux三种版本: robomongo界面简洁功能强大人性化:
- Java iText5.5.1 绘制PDF表格
iText下载链接:http://sourceforge.net/projects/itext/files/ 会有两个文件夹:extrajars中的extrajars-2.3.jar文件用于解决中文不 ...
- I2C串行总线标准驱动程序(C51)-万能程序
#include "reg51.h" #include "intrins.h" unsigned char SystemError; sbit SCL= P1^ ...