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 ...
随机推荐
- ConcurrentQueue对列的基本使用方式
队列(Queue)代表了一个先进先出的对象集合.当您需要对各项进行先进先出的访问时,则使用队列.当您在列表中添加一项,称为入队,当您从列表中移除一项时,称为出队. ConcurrentQueue< ...
- Java—NumberFormat与DecimalFormat类
1.NumberFormat表示数字的格式化类 NumberFormat表示数字的格式化类,即:可以按照本地的风格习惯进行数字的显示. No. 方法 类型 描述 1 public static Loc ...
- Virtual Environments
virtualenv 再另一篇随笔中已经提到过virtualenv.如果我们有好几个不同的项目,他们需要的第三方包版本不同,那怎么办呢.这时候就需要virtualenv创建一个虚拟环境,里面包含了一个 ...
- Java的反射机制及应用实例
一:什么是反射机制 简单的来说,反射机制指的是程序在运行时能够获取自身的信息.在Java中,只要给定类的名字,那么就可以通过反射机制来获得类的所有信息. 二:哪里用到反射机制 我们用过一些知识,但是并 ...
- [ofbiz]解决load-demo花费过长时间的问题
一直以来使用公司配置的hp-cq45笔记本,在初始化ofbiz的时候load-demo需要花费很长一段时间,比如90分钟,或者129分钟. 解决办法:安装官方驱动--intel快速存储驱动 ok,lo ...
- java 数字补齐0
String str_f = str.substring(0, 1); int i = (Integer.parseInt(str.substring(1)) + 1); // 数字补齐0 Decim ...
- 动态PDF在线预览
实战动态PDF在线预览及带签名的PDF文件转换 开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是 ...
- jQuery之Jcrop
头像裁剪是一个经常用到的功能,实现原理也较为简单,就是在本地选择好所需裁剪图片的坐标,将坐标发送到服务器,由服务器执行图片裁剪操作. jQuery插件Jcrop提供了强大的图片裁剪坐标选择插件.一下来 ...
- javascript之Function函数
在javascript里,函数是可以嵌套的. 如: function(){ funcrion square(x){ return x*x; } return square(10); } 在javas ...
- C# 语法技巧_三目运算_switch_case
一.三目运算符 三目运算符的一种简便写法: bool b = str == "abc" ? false : true; 当是自身时,实际上别吝啬那一个括号,有一个括号,实际上更容易 ...