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 ...
随机推荐
- mac苹果ping不通网络
新买了mac,在安装synergy的时候,我拿我的win当server,mac当client,随后发现,synergy提示连接不到server,ping host 失败, cannot connect ...
- div css水平垂直居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- IIS 之 线程池最大线程数
.net4.0,32位机器最大线程数,每核1023个 .net4.0,64位机器最大线程数,每核32768个 .net3.0,最大线程数,每核250个 .net2.0,最大线程数,每核25个 默认的最 ...
- U872-结算成本处理步骤及索引处理
U872每月都须要做月结,对于制造企业来说,结算成本处理是不可缺少的一个处理环节,每次查询出来待暂估记录也比較多(我接触到的有3万左右),暂估时间一般要2-3小时左右,若调用的大表索引碎片多时,会须要 ...
- Linux学习笔记——Ubuntu更新软件源
0.前言 通过改动ubuntu软件源可提高apt命令下载安装软件的速度. 參考资料 [官方资料]--配置文件改动方法 [Ubuntu如何改动软件源地址]--使用ubun ...
- exception is the version of xbean.jar correct
CreateTime--2018年2月5日09:20:00 Author:Marydon 异常: is the version of xbean.jar correct 情景还原: 在使用Java ...
- 如何提高SELECT的效率
首先避免使用in ,not in,<>,<,<=,>,>=,is null,is not null 主要搜索字段建立索引 .WHERE子句中的连接顺序 sql解 ...
- ValueError: Expecting property name: line 1 column 1 (char 1)
# -*- coding: cp936 -*- #xiaodeng #python 2.7.10 import weibo s='{"name":"xiaodeng&qu ...
- java常见错误--Access restriction: The type BASE64Encoder
Access restriction: The type BASE64Encoder is not accessible due to restrict 在Eclipse中编写Java代码时,用到了B ...
- apachebench的简单使用
apachebench的简单使用 2013-03-08 15:48:47 分类: LINUX ApacheBench是 Apache 附带的一个小工具,专门用于 HTTP Server 的benchm ...