CSS那些事儿-阅读随笔1（CSS简介与选择符）
最近开始详细钻研CSS有关的知识，参考资料是《CSS那些事儿》。将把在此过程中的收获进行记录，方便以后的学习。
一、CSS简介
1.什么是CSS
CSS全称为Cascading Style Sheet（层叠样式表），是一种不需要编译的标记性语言，用于增强控制网页样式并允许将样式信息与网页内容分离。可以使用如何一种文本编辑器对其进行编辑。
2.CSS的作用
a.修饰页面文本、图片等元素，避免使用不必要的HTML元素。
b.更有效地控制页面结构、页面布局（DIV+CSS）。
c.提高开发和维护效率。
3.CSS的基本结构
selector {property:value;}
例如：p {color:#ff0000;}
- 选择符（selector）：告诉浏览器，这个样式将用于匹配页面中的哪些对象，包括HTML标签，class，id或者组合使用的选择符。
- 声明：由property和value组成，主要是告诉浏览器怎么去渲染（修饰）页面中与选择符相匹配的对象。
- 属性（property）：主要以一个单词的形式出现，并且都是CSS约定的而非自定义的（除个别浏览器私有属性）。
- 属性值（value）：包括数值和单位，以及一些关键字。其会根据属性而改变形式，属性名过长其带有空格时，一定要将属性值用引号包含，如p {font-family:"sans serif";}
二、CSS选择符
1.通配选择符
所谓通配选择符，其实只有一个星号（*）而已，通配选择符一般用来对页面所有元素应用样式。例如：
* {
margin:;
padding:;
color:#ff0000;
}/*将页面中所有元素的内外边距都设为0，字的颜色设置为红色*/
2.类型选择符
p {
font-size:14px;
text-decoration:underline;
color:#ff0000;
}
3.类选择符
类（class）在编程语言中经常使用，实现代码的复用和封装。在页面中，可以将一段CSS代码定义成一个类，并为其取名，这样也能实现CSS在页面中的复用，减少样式的定义。例如一个名为myContent的css类如下所示。（注意，css的类定义时要以.开头）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
.myContent{
font-size: 25px;
line-height: 5px;
text-decoration:underline;
font-weight:bold;
color: #f00;;
}
</style>
</head>
<body>
<p>Hello</p>
<p>css很强大，<strong>可以控制页面<span>任何元素</span>的样式</strong><strong>dfd</strong></p>
<p class="myContent">1与世界同步，做一个成功的页面仔</p>
<p>2让我们看看css多么奇妙吧</p>
</body>
</html>
运行效果如下图所示：
4.ID选择符
ID选择符与类选择符很像，但是它是以#为前缀的。例如id为myId的选择符：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
#myId{
font-size: 25px;
line-height: 5px;
text-decoration:underline;
font-weight:bold;
color: #f00;;
}
</style>
</head>
<body>
<p>Hello</p>
<p>css很强大，<strong>可以控制页面<span>任何元素</span>的样式</strong><strong>dfd</strong></p>
<p>1与世界同步，做一个成功的页面仔</p>
<p id="myId">2让我们看看css多么奇妙吧</p>
</body>
</html>
运行效果图如下：
5.包含选择符
包含选择符也成为后代选择符，作用于某个元素所有的后代（子，孙，重孙...），例如改变p标签内的所有strong标签样式 p strong，两个选择符之前用空格隔开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
p strong {
color: #f00;
font-size: 18px;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Hello</p>
<p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>
<p>1与世界同步，做一个成功的页面仔</p>
<p>2让我们看看css多么奇妙吧</p>
</body>
</html>
运行结果如下图所示，可以看出，p标签内的两个strong标签中的内容样式都发生了改变：
6.子选择符
子选择符的主要作用是定义某个元素子元素的样式（两个选择符之前用>连接），而无法定义子元素以外的对象（如孙，重孙都不可以），这是与包含选择符不同的地方。将5中的例子进行修改p strong变为p > strong，表示选择p内的strong子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
p > strong {
color: #f00;
font-size: 18px;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Hello</p>
<p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>
<p>1与世界同步，做一个成功的页面仔</p>
<p>2让我们看看css多么奇妙吧</p>
</body>
</html>
运行结果如下图所示：
这时只有<strong>dfd</strong>是p的子元素，而<strong>任何元素</strong>是p的孙元素，所以只有前者的样式发生了改变。
7.相邻选择符
a.相邻选择符的表示形式与子选择符类似，只是将>换成了+，主要匹配同一父级元素下某个元素之后的元素。如定义与p相邻的strong元素 p + strong。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
p + strong {
color: #f00;
font-size: 18px;
text-decoration: underline;
}
</head>
<body>
<p>Hello</p>
<p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>
<p>1与世界同步，做一个成功的页面仔</p>
<p>2让我们看看css多么奇妙吧</p>
<strong>3千万不要因为这一点内容就满足了</strong>
</body>
</html>
运行结果如下
如上图所示，p标签内的strong元素的样式并没有改变，只是与p相邻的<strong>3千万不要因为这一点内容就满足了</strong>样式发生了改变。
b.如果将上述代码中的p + strong 改为 p + strong + strong，且增加strong便签，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
p + strong + strong {
color: #f00;
font-size: 18px;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Hello</p>
<p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>
<p>1与世界同步，做一个成功的页面仔</p>
<p>2让我们看看css多么奇妙吧</p>
<strong>3千万不要因为这一点内容就满足了</strong>
<strong>4千万不要因为这一点内容就满足了</strong>
<strong>5千万不要因为这一点内容就满足了</strong>
<strong>6千万不要因为这一点内容就满足了</strong>
</body>
</html>
则运行结果如下图所示
c.如果将b中的p + strong + strong 换成 strong + strong，则运行结果如下所示。
8.兄弟选择符（css3引入）
E~F{property:value }，选择E元素后面的所有兄弟元素F。例如选择p后面的所有兄弟元素p
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
p ~ p {
color: #f00;
font-size: 18px;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Hello</p>
<p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>
<p>1与世界同步，做一个成功的页面仔</p>
<p>2让我们看看css多么奇妙吧</p>
<strong>3千万不要因为这一点内容就满足了</strong>
<strong>4千万不要因为这一点内容就满足了</strong>
<div>
<p title="css-x" id="x">css x</p>
</div>
<p title="css+html">css+<span>shishi</span>html</p>
<p title="ca css d">ca css d</p>
</body>
</html>
运行结果如下图所示
由于 <p title="css-x" id="x">css x</p>位于div中，与上面的p元素并不是兄弟关系，所有并没有改变样式。
9.属性选择符
例如p[title|="css"]，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-test</title>
<style>
p[title|="css"]{
font-size: 20px;
color: #f00;
margin:0;
}
</style>
</head>
<body>
<p>Hello</p>
<p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>
<p>1与世界同步，做一个成功的页面仔</p>
<p>2让我们看看css多么奇妙吧</p>
<p title="css-x" id="x">css-x</p>
<p title="css+html">css+<span>shishi</span>html</p>
<p title="ca css d">ca css d</p>
</body>
</html>
只有title以css开头，且用-连接的元素样式发生了改变
10.伪类和伪对象
伪类和伪对象是一种特殊的类和对象，它由css自动支持，属css的一种扩展型类和对象，伪类和伪对象的名称不能被用户自定义，使用时只能够按标准格式进行应用。
CSS那些事儿-阅读随笔1（CSS简介与选择符）的更多相关文章
- CSS那些事儿-阅读随笔2（选择符的组合与优先级/权重）
在知道了CSS选择符最基础的知识后,就要综合利用它们了.这里就记录几种常见的用法. 1.针对性的使用类选择符或者ID选择符 类选择符在一个页面中可能会在不同的地方应用,那么就需要有针对性地使用类选择符 ...
- CSS那些事儿-阅读随笔3（清除浮动）
浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题.在CSS样式中,主要利用clear属性中的both ...
- CSS知识回顾--读《CSS 那些事儿》笔记
由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...
- CSS选择符详解之关系选择符篇
原文:http://www.chinaz.com/web/2012/1017/278553.shtml 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪 ...
- css 选择符
css参考手册:css.doyoe.com 在css3中,不同的浏览器可能需要不同的前缀,它表示该css属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀 ...
- 《CSS那些事儿》读书笔记
注: 此书出版于2009年,所以有些知识...你懂得. 有些我熟悉的知识点,就没有记录下来了,所以想了解更多的细节,还是去看下此书吧. 暗灰色标记部分,是我自己的理解,有不对或要补充的地方,还请大家多 ...
- css那些事儿2 盒子模型
盒子模型是网页元素所占据页面窗口的矩形范围,是网页布局的核心基础之一,这里的盒子模型与我们平常收到的包裹类似. 一个包裹从内到外,分为真实物品部分,物品与外壳之间的填充区,外壳的厚度,当多个包裹放置在 ...
- css那些事儿1 css选择符与管理
结合当下作为一名net程序员,难以找到工作情况下,先学习前端知识,前端现在已成为web和app的一个交叉点,web前端化,app使用h5技术前端化,至于什么后台数据库 缓存 消息队列的路线如果没有大型 ...
- 30个你必须记住的CSS选择符
所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...
随机推荐
- 链接中 href='#' 和 href='###' 的区别以及优缺点
首先,<a> 标签 + onclick='{jscode}' 是很常用的一种 js 运用方式,而不使用 href='javascript:{jscode}' 是为了兼容多种浏览器对 < ...
- jquery 获取 CheckBox 的状态
<td style="width:220px;vertical-align:central;"><input type="checkbox" ...
- SPI协议及其工作原理详解
一.概述. SPI, Serial Perripheral Interface, 串行外围设备接口, 是 Motorola 公司推出的一种同步串行接口技术. SPI 总线在物理上是通过接在外围设备微控 ...
- Django开发网站（二）
第一课:视图显示 1 建立一个项目:django-admin startproject blog, 进入blog: cd blog 显示:blog(__init__.py settings.py ...
- Mvc生命周期深度剖析
客户端发送请求->IIS, UrlRouting模块对比URL, 默认如果该URL能对应到实体文件则退出MVC管道把控制权交还给IIS. 如果RegisterRoutes中的路由规则对比成功默认 ...
- DataTable经典报错{列/行已属于其他表}
Delete()之后需要datatable.AccepteChanges()方法确认完全删除,因为Delete()只是将相应列的状态标志为删除, 还可以通过datatable.RejectChange ...
- C语言关键字-volatile
1.C语言关键字volatile C 语言关键字volatile(注意它是用来修饰变量而不是上面介绍的__volatile__)表明某个变量的值可能在外部被改变,因此对这些变量的存取 不能缓存 ...
- NodeJS用递归实现异步操作的链式调用，完成一个简易的命令行输入输出REPL交互接口
REPL —— Read-Eval-Print-Loop. 00.一门好的编程语言的必要条件 REPL并不是什么高大上的东西,简单的说就是一个从命令行程序,读取终端输入,处理,打印结果,如此循环.这是 ...
- HDFS 的可靠性
HDFS 的可靠性主要有一下几点: 冗余副本策略 机架策略 心跳机制 安全模式 效验和 回收站 元数据保护 快照机制 1.冗余副本策略 可以在hdfs-site.xml中设置复制因子指定副本数量 所有 ...
- maven 解决 Eclipse is running in a JRE, but a JDK is
解决安装了maven插件的myeclipse每次开启报错 The Maven Integration requires that Eclipse be running in a JDK, becaus ...