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. ...
随机推荐
- Winform 异步更新listbox
public partial class Form1 : Form { private BackgroundWorker bw; public Form1() { InitializeComponen ...
- 解决FPDF报错：FPDF error: Not a JPEG file / FPDF error: Not a PNG file
最近有个项目需要用到FPDF,但是输出的时候报错: FPDF error: Not a JPEG file: http://***/data/attachment/forum/201603/19/10 ...
- （转载）根据数据字典表定义的表结构,生成创建表的SQL语句
<来源网址:http://www.delphifans.com/infoview/Article_221.html>根据数据字典表定义的表结构,生成创建表的SQL语句 //1． 类名:T ...
- Spark Streaming揭秘 Day3-运行基石(JobScheduler)大揭秘
Spark Streaming揭秘 Day3 运行基石(JobScheduler)大揭秘 引子 作为一个非常强大框架,Spark Streaming兼具了流处理和批处理的特点.还记得第一天的谜团么,众 ...
- 1065. A+B and C (64bit)
#include<stdio.h> #include <math.h> int main() { long long a,b,c,sum; int n,i; while(sca ...
- 集成“支付宝” -b
大致步骤 1.与支付宝签约获取相关参数 合作者身份 ID 与安全校验码 key2.下载需要导入的文件,做相应设置3.在自己的项目中集成支付的方法代码 详细步骤 1.获取合作者身份 ID 与安全校验码 ...
- Contest2037 - CSU Monthly 2013 Oct (problem D ：CX and girls)
[题解]: 最短路径问题,保证距离最短的同时,学妹权值最大,哈哈 [code]: #include<iostream> #include<queue> #include< ...
- AirDrop显示名字的修改问题
AirDrop的名字来源是设备登陆的iCloud账户 打开iCloud设置 把个人信息的名字改成自己的即可 前提是你的账号没有借朋友用过,如果朋友用过恰好没注销,你的通讯录又有你的朋友的号码,很有可能 ...
- 【链表】bzoj 1150: [CTSC2007]数据备份Backup
1150: [CTSC2007]数据备份Backup Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1136 Solved: 458[Submit] ...
- [转载]OpenFileDialog对话框Filter属性
首先说明一个示例,分析一下Filter属性的构成:“ Excel文件|*.xls ”,前面的“Excel文件”成为标签,是一个可读的字符串,可以自定定义,“|*.xls”是筛选器,表示筛选文件夹中后缀 ...