CSS选择器、层叠相关的基础知识
CSS是Cascading Style Sheets的英文缩写，即层叠样式表。CSS2.1是W3C于2007年发布，现在推荐使用的。CSS3现在还处于开发中，有部分浏览器的新版本支持。
1. CSS 概述
- 解决内容与表现分离的问题。
- 实现网页风格的统一，并且容易修改。
- 外部样式表可以极大提高工作效率。
- 使用CSS可以减少网页的代码量，因为它可以缓存到本地。
- CSS是大小写不敏感的，在CSS语法中推荐使用小写。
- 多个样式定义可层叠为一。
2. 关于层叠
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中4拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于<head>标签内部）
- 内联样式（在HTML元素内部）
关于外部样式表、内部样式表、内联样式的差别，请参考：CSS的引用方式（引用外部样式表、内部样式表、内联样式表）
3. 关于选择器
3.1 标签选择器
比如p标签选择器（代表所有的段落都使用这个CSS样式）：
td {
font-size:14px;
width:120px;
}
3.2 id选择器
id 选择器可以为标有特定id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。id属性只能在每个 HTML 文档中出现一次。
#note {
font-size:14px;
width:120px;
}
3.3 类选择器
就是在名字前增加了一个“.”,class选择符在一个页面中可以出现多次。
div.note {
font-size:14px;
}
.dream {
font-size:14px;
}
3.4 群组选择器
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。
h1,h2,h3,h4,h5,h6 {
color: green;
}
3.5 后代选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
下面是它施加影响的HTML：
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
3.6 属性选择器
下面的例子为带有 title 属性的所有元素设置样式：
[title] { color:red; }
3.7 属性和值选择器
下面的例子为 title="HelloWorld" 的所有元素设置样式：
[title=HelloWorld] { border:5px solid blue; }
4. 示范
<p>CSS基本知识之标签选择器</p>
<p id="sampleid">CSS基本知识之id选择器</p>
<p class="sampleclass">CSS基本知识之类选择器</p>
<p class="sampleclass sampleclass2">CSS基本知识之类选择符，出现两个类选择器。它们的效果是重叠的。</p>
CSS选择器、层叠相关的基础知识的更多相关文章
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- CSS学习笔记1：基础知识
CSS规则由两部分组成,选择器和声明 选择器:标签,告诉浏览器哪些标签需要用到这个样式 声明:样式的内容,由一或多对属性:值以:隔开组成,由{}包围,需要多个选择器时以逗号隔开 ...
- 关于CSS你应该知道的基础知识 - 样式应用篇
上一篇简单总结了一下选择器,如果一个元素被多个选择器选中,元素的样式就会以级联方式被应用到.要搞清最终那个样式被应用到元素上了,首先要明白引用CSS代码的几种方式. CSS代码引用方式 如何应用CSS ...
- HTTP笔记01-http相关的基础知识
这个系列文章是阅读<图解HTTP>后写下的笔记 当我们在浏览器输入url,点击回车后,浏览器显示我们需要的web页面,那么,这个界面是如何产生的? 根据浏览器地址中输入的url,浏览器从相 ...
- 关于CSS你应该知道的基础知识 - 盒模型篇
浏览器渲染引擎通过盒模型的方式来布局html元素.我们可以将每一个html元素都看做是一个盒子,每一个盒子都有长和款,多个这样的盒子组成了我们的网页. Margin,Border,Padding 每一 ...
- XML的相关基础知识分享(二)
前面我们讲了一下XML相关的基础知识(一),下面我们在加深一下,看一下XML高级方面. 一.命名空间 1.命名冲突 XML命名空间提供避免元素冲突的方法. 命名冲突:在XML中,元素名称是由开发者定义 ...
- Java基础知识学习（三）
面向对象部分 首先要了解面向对象的思想,与C#一致,都是面向对象的语言 访问修饰符 public 共有的,对所有类可见. protected 受保护的,对同一包内的类和所有子类可见. private ...
- TCP/IP基础知识
TCP/IP基础知识 网络 TCP/IP 引言 本篇属于TCP/IP协议的基础知识,重点介绍了TCP/IP协议簇的内容.作用以及TCP.UDP.IP三种常见网络协议相关的基础知识. 内容 TCP/IP ...
- 【JavaScript你需要知道的基础知识~】
最近开始学习JavaScript,整理了一些相关的基础知识 JS注释方式:// 单行注释(Ctrl+/ )/* 段落注释(Ctrl+shift+/ )*/ [JavaScript基础]JavaScri ...
随机推荐
- sublime同步侧边栏与窗体的颜色
Ctrl+Shift+P -> install -> 搜索安装包 SyncedSidebarBg,自动同步侧边栏底色为编辑窗口底色. P.S. 有时改完后侧边栏颜色没变化,不知什么原因,打 ...
- [Algorithm] Radix Sort Algorithm
For example we have the array like this: [, , , , , ] First step is using Counting sort for last dig ...
- Coredata — 入门使用
CoreData的底层实现尽管是使用的sqlite数据库.但是CoreData在使用起来但是和sqlite大相径庭.可能你会发现你连一句sql语句都不要写.CoreData存在于应用程序和持久化存储区 ...
- MySQL的IFNULL函数
MySQL函数里有一个很有用的函数IFNULL,它的形式是IFNULL(fieldA,fieldB),意义是当字段fieldA是NULL时取fieldB,不是NULL时取fieldA的值. 这个函数与 ...
- swift第一章
swift中添加的类型:Tuple(元组类型),能够让你创建或者传递一组数据. 比方作为函数的返回值时.你能够用一个元组能够返回多个值. swift中还添加了可选(Optional)类型,用于处理值缺 ...
- Jacoco的原理(各个覆盖率的解释)
覆盖率计数器 Jacoco使用一系列的不同的计数器来做覆盖率的度量计算.所有这些计数器都是从java的class文件中获取信息,这些class文件可以(可选)包含调试的信息在里面.即使在没有源码的情况 ...
- 深入理解索引系列1：B+树
- windows 配置ftp server
- 手动脱NsPacK壳实战
作者:Fly2015 这里脱壳的程序是吾爱破解培训的作业2,相较于作业1略微要强一点,可是仅仅要掌握了脱壳的ESP定律,脱这个Nspack壳并不难.只是还是蛮有意思的. 1.使用查壳软件对加壳的程序进 ...
- SettingsEclipse&MyEclipse
eclipse优化 迁移时间--2017年5月20日09:39:16 CreateTime--2016年11月18日11:27:02 Author:Marydon ModifyTime--2017 ...