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. ...
随机推荐
- 重写session
<?php ini_set('session.use_only_cookies', 0); $session_id = rand(10000, 99999); session_set_cooki ...
- php session学习笔记(实例代码)
http 无状态协议 一个服务器向客户端发送消息的时候有三条信息 一是状态二是头信息三是内容 会话控制 让一个用户访问每个页面,服务器都知道是哪个用户访问 cookie cookie是通过头信息发送 ...
- QQ聊天机器人for PHP版 (登录，收、发消息)
<?php include "http_no_cookie.class.php"; class qq { public $sid; public $http; public ...
- phpcms v9 自定义分页 带下拉跳转
<?php function new_pages($num, $curr_page, $perpage = 20, $urlrule = '', $array = array(),$setpag ...
- zhuan:windows用一键安装包安装(推荐)-禅道
访问地址:http://www.zentao.net/book/zentaopmshelp/76.html 一键安装包 解压缩必须 解压缩到根目录下面.
- sirius的python学习笔记（1）
1.可以通过try...except语句来简单的判断字符串是否为整数值,如例程 x = raw_input('>') try: print int(x) except ValueError: r ...
- WPF简单的口算案例
前几天在博客园,看到有博友利用Winform做了一个口算案例,于是我想把它移植在WPF程序中.Winform程序:http://www.cnblogs.com/ImYZF/p/3345452.html ...
- phpstorm运行在浏览器中执行php文件报502错误
原因是之前mac自带的php5.5版本被我升级到了5.6 通过phpinfo()查看到目前php5.6的安装目录 重新制定一些interpreter的路径 /usr/local/php5/bin 就可 ...
- iPhone手机屏幕的尺寸
以下是 iPhone的型号和对应的屏幕宽高 英寸 宽 高 厚度 3.5 320 480 4s ipad 系列 4 320 568 5 5s 4.7 375 66 ...
- coolcarousel 图片轮播缩放问题
var myurl; var mydata; var mytype = "POST"; var jsonType = "json"; var htmlType ...