给段落定义样式
• 首字母
– :first-letter
• 首行
– :first-line
属性选择器
• 属性选择器可以挑选带有特殊属性的标签。
• 语法:
[属性名]
[属性名=“属性值”]
[属性名~=“属性值”]
[属性名|=“属性值”]
[属性名^=“属性值”]
[属性名$=“属性值”]
[属性名*=“属性值”]
子元素选择器
• 子元素选择器可以给另一个元素的子元素
设置样式。
• 语法：
• 比如body > h1将选择body子标签中的所
有h1标签。
父元素 > 子元素 {}
其他子元素选择器
• :first-child
– 选择第一个子标签
• :last-child
– 选择最后一个子标签
• :nth-child
– 选择指定位置的子元素
• :first-of-type
• :last-of-type
• :nth-of-type
– 选择指定类型的子元素
兄弟选择器
• 除了根据祖先父子关系，还可以根据兄弟
关系查找元素。
• 语法:
– 查找后边一个兄弟元素
• 兄弟元素 + 兄弟元素{}
– 查找后边所有的兄弟元素
• 兄弟元素 ~ 兄弟元素{}
否定伪类
• 否定伪类可以帮助我们选择不是其他东西
的某件东西。
• 语法:
• 比如p:not(.hello)表示选择所有的p元素但
是class为hello的除外。
:not(选择器){}
• 就像父亲的财产会遗传给儿子一样，在CSS中祖先元素的样式
同样也会被子元素继承。
• 继承是指应用在一个标签上的那些CSS样式会同时被应用到其
内嵌标签上。
• 比如为父元素设置了字体颜色，子元素也会应用上相同的颜色。
• 当然并不是所有的样式都会被继承，这一点我们讲到具体样式
时，再去讨论。
如果一个元素同时满足了多个选择器，哪个样式生效？
• 在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个
选择器选中。
• 比如：
– body h1
– h1
• 上边的两个选择器都会选择h1元素，如果两个选择器设置的样式不一
致那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，
这样h1到底要应用那个样式呢？CSS中会默认使用权重较大的样式，
权重又是如何计算的呢？
• 不同的选择器有不同的权重值：
– 内联样式：权重是 1000
– id选择器：权重是 100
– 类、属性、伪类选择器：权重是 10
– 元素选择器：权重是 1
– 通配符：权重是 0
• 计算权重需要将一个样式的全部选择器相加，比如上边的body
h1的权重是20，h1的权重是10，所以第一个选择器设置的样
式会优先显示。
属性选择器代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 为所有具有title属性的p元素，设置一个背景颜色为黄色
* 属性选择器
* - 作用：可以根据元素中的属性或属性值来选取指定元素
* - 语法：
* [属性名] 选取含有指定属性的元素
* [属性名="属性值"] 选取含有指定属性值的元素
* [属性名^="属性值"] 选取属性值以指定内容开头的元素
* [属性名$="属性值"] 选取属性值以指定内容结尾的元素
* [属性名*="属性值"] 选取属性值以包含指定内容的元素
*/
/*p[title]{
background-color: yellow;
}*/
/*
* 为title属性值是hello的元素设置一个背景颜色为黄色
*/
/*p[title="hello"]{
background-color: yellow;
}*/
/*
* 为title属性值以ab开头的元素设置一个背景颜色为黄色
*/
/*p[title^="ab"]{
background-color: yellow;
}*/
/*
* 为title属性值以c结尾的元素设置一个背景颜色
*/
/*p[title$="c"]{
background-color: yellow;
}*/
p[title*="c"]{
background-color: yellow;
}
</style>
</head>
<body>
<!--
title属性，这个属性可以给任何标签指定
当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
-->
<p title="hello">我是一个段落</p>
<p>我是一个段落</p>
<p title="hello">我是一个段落</p>
<p title="abbc">我是一个段落</p>
<p title="abccd">我是一个段落</p>
<p title="abc">我是一个段落</p>
</body>
</html>
子元素选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 为第一个p标签设置一个背景颜色为黄色
* :first-child 可以选中第一个子元素
* :last-child 可以选中最后一个子元素
*/
/*body > p:first-child{
background-color: yellow;
}*/
/*p:last-child{
background-color: yellow;
}*/
/*
* :nth-child 可以选中任意位置的子元素
* 该选择器后边可以指定一个参数，指定要选中第几个子元素
* even 表示偶数位置的子元素
* odd 表示奇数位置的子元素
*
*/
/*p:nth-child(odd){
background-color: yellow;
}*/
/*
* :first-of-type
* :last-of-type
* :nth-of-type
* 和:first-child这些非常的类似，
* 只不过child，是在所有的子元素中排列
* 而type，是在当前类型的子元素中排列
*/
/*p:first-of-type{
background-color: yellow;
}*/
p:last-of-type{
background-color: yellow;
}
</style>
</head>
<body>
<span>我是span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>hello</span>
<!--<div>
<p>我是DIV中的p标签</p>
</div>-->
</body>
</html>
兄弟元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 为span后的一个p元素设置一个背景颜色为黄色
* 后一个兄弟元素选择器
* 作用：可以选中一个元素后紧挨着的指定的兄弟元素
* 语法：前一个 + 后一个
*
*/
/*span + p{
background-color: yellow;
}*/
/*
* 选中后边的所有兄弟元素
* 语法：前一个 ~ 后边所有
*/
span ~ p{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
样式的继承
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
font-size: 30px;
}
</style>
</head>
<body>
<!--
像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承,
利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承 边框相关的样式 定位相关的
-->
<div style="background-color: yellow;">
<p>
我是p标签中的文字
<span>我是span中的文字</span>
</p>
</div>
<span>我是p元素外的span</span>
</body>
</html>
<em>和<strong>
• em标签用于表示一段内容中的着重点。
• strong标签用于表示一个内容的重要性。
• 这两个标签可以单独使用，也可以一起使
用。
• 通常em显示为斜体，而strong显示为粗体。
<p>
<strong>警告：任何情况下不要接近僵尸。</strong>
他们只是 <em>看起来</em> 很友好，实际上他们是为了吃你的胳膊！
</p>
<i>和<b>
• i标签会使文字变成斜体。
• b标签会使文字变成粗体。
• 这两个标签和em和strong类似，但是这两
个标签没有语义。
• 所以根据html5标准，当我们只想设置文本
特殊显示，而不需要强调内容时就可以使
用i和b标签。
<small>
• small标签表示细则一类的旁注，通常包括
免责声明、注意事项、法律限制、版权信
息等。
• 浏览器在显示small标签时会显示一个比父
元素小的字号。
<cite>
• 使用cite标签可以指明对某内容的引用或参
考。例如，戏剧、文章或图书的标题，歌
曲、电影、照片或雕塑的名称等。
<p>
<cite>《七龙珠》</cite>讲的是召唤神龙的故事。
</p>
<blockquote>和<q>
• blockquote和q表示标记引用的文本。
• blockquote用于长引用，q用于短引用。
• 在两个标签中还可以使用cite属性来表示引
用的地址。
孟子曾经说过：
<blockquote>天将降大任于是人也...</blockquote>
他说的真对啊！
<p>孔子曾经说过：<q>学而时习之不亦说乎</q></p>
<sup>和<sub>
• sup和sub用于定义上标和下标。
• 上标主要用于表示类似于10 3 中的3。
• 下标则用于表示类似余H 2 O中的2。
<ins>和<del>
• ins表示插入的内容，显示时通常会加上下
划线。
• del表示删除的内容，显示时通常会加上删
除线。
<code>和<pre>
• 如果你的内容包含代码示例或文件名，就
可以使用code元素。
• pre元素表示的是预格式化文本，可以使用
pre包住code来表示一段代码。
<pre>
<code>
function fun(){
alert("hello");
}
</code>
</pre>
• 使用ol和li来创建一个有序列表。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
• 使用ul和li来创建一个无序列表。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
• 使用dl、dd、dt来创建一个定义列表。
<dl>
<dt>定义项1</dt>
<dd>定义描述1</dd>
<dt>定义项2</dt>
<dd>定义描述2</dd>
<dt>定义项3</dt>
<dd>定义描述3</dd>
</dl>
• px
– 如果我们将一个图片放大的话，我们会发现一个图片
是有一个一个的小色块构成的，这一个小色块就是一
个像素，也就是1px，对于不同的显示器来说一个像素
的大小是不同的。
• 百分比
– 也可以使用一个百分数来表示一个大小，百分比是相
对于父元素来说的，如果父元素使用的大小是16px，
则100%就是16px，200%就是32px。
• em
– em和百分比类似，也是相对于父元素说的，1em就相
当于100%，2em相当于200%，1.5em相当于150%。
• 在CSS中可以直接使用颜色的关键字来代表
一种颜色。
• 17中颜色
– aqua、black、blue、fuchsia、gray、green、
lime、maroon、navy、olive、orange、
purple、red、silver、teal、white、yellow。
• 还有147种svg颜色，这里就不一一列举了，
但是明显即使这些颜色变成double，也不
足以描绘我们世界中所有的颜色。
• 用的最多的颜色是十六进制符号。一个颜色值，
比如：#6600FF实际上包含了三组十六进制的
数字。
• 上边的例子中66代表红色的浓度，00代表绿
色的浓度，FF代表了蓝色的浓度。最后的颜色
是由这些指定浓度的红绿蓝混合而成的。
• 如果每一组数中的两个数字都相同，就可以把
十六进制的数字缩短为只有3个字符，如将
#6600FF缩短为#60F。
• 也可以使用计算机中常用的RGB值来表示
颜色。可以使用0~255的数值，也可以使
用0%~100%的百分比数。
– RGB(100%,0%,0%)
– RGB(0,255,0)
• 第一个数表示红色的浓度，第二个数表示
绿色浓度，第三个数表示蓝色的浓度
• RGBA表示一个颜色和RGB类似，只不过比
RGB多了一个A（alpha）来表示透明度，
透明度需要一个0-1的值。0表示完全透明，
1表示完全不透明。
– RGBA(255,100,5,0.5)
文字大小
• font-size用来指定文字的大小。
• 通过font-family可以指定标签中文字使用
的字体。
• 例如：
– 上边这行代码指定了p标签中使用名为arial作
为字体
• 一般来说只有用户计算机中安装了我们指
定的字体时，它才会显示，否则这行代码
是没有意义的。
p{font-family:Arial}
• 通过font-family可以同时指定多个字体。
• 例如：
• 如上我实际上指定了三种字体，那么到底
使用的是哪个呢？浏览器会优先使用第一
个，如果没有找到则使用第二个，以此类
推。
• 这里面sans-serif并不是指的具体某一个字
体。而是一类字体。
p{font-family:Arial , Helvetica , sans-serif}
• serif（衬线字体）
• sans-serif（非衬线字体）
• monospace （等宽字体）
• cursive （草书字体）
• fantasy （虚幻字体）
• 以上这些分类都是一些大的分类，并没有
涉及具体的类型，如果将字体指定为这些
格式，浏览器会自己选择指定类型的字体。
• font-style用来指定文本的斜体。
– 指定斜体：font-style:italic
– 指定非斜体：font-style:normal
• font-weight用来指定文本的粗体。
– 指定粗体：font-weight:bold
– 指定非粗体：font-weight:normal
小型大写字母
• font-variant属性可以将字母类型设置为小
型大写。在该样式中，字母看起来像是稍
微缩小了尺寸的大写字母。
– font-variant:small-caps
字体属性的简写
• font可以一次性同时设置多个字体的样式。
• 语法：
– font:加粗 斜体 小型大写 大小/行高 字体
• 这里前边几个加粗、斜体和小型大写的顺
序无所谓，也可以不写，但是大小和字体
必须写且必须写到后两个。
行间距
• line-height用于设置行高，行高越大则行
间距越大。
• 行间距 = line-height – font-size
大写化
• text-transform样式用于将元素中的字母全
都变成大小。
– 大写：text-transform:uppercase
– 小写：text-tansform:lowercase
– 首字母大写：text-transform:capitalize
– 正常：text-transform:none
文本的修饰
• text-decoration属性，用来给文本添加各
种修饰。通过它可以为文本的上方、下方
或者中间添加线条。
• 可选值：
– underline
– overline
– line-through
– none
字母间距和单词间距
• letter-spacing用来设置字符之间的间距。
• word-spacing用来设置单词之间的间距。
• 这两个属性都可以直接指定一个长度或百
分数作为值。正数代表的是增加距离，而
负数代表减少距离。
对齐文本
• text-align用于设置文本的对齐方式。
• 可选值：
– left：左对齐
– right：右对齐
– justify：两边对齐
– center：居中对齐
首行缩进
• text-indent用来设置首行缩进。
• 该样式需要指定一个长度，并且只对第一
行生效。
文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
em和strong
- 这两个标签都表示一个强调的内容，
em主要表示语气上的强调,em在浏览器中默认使用斜体显示
strong表示强调的内容，比em更强烈，默认使用粗体显示
-->
<p>
今天天气<em>真不错</em>！
</p>
<p>
<strong>
注意：如果你不认真上课，你就找不到好工作！
</strong>
</p>
<!--
i标签中的内容会以斜体显示
b标签中的内容会以加粗显示
h5规范中规定，对于不需要着重的内容而是单纯的加粗或者是斜体，
就可以使用b和i标签
-->
<p>
<i>我是i标签中的内容</i>
<b>我是b标签中的内容</b>
</p>
<!--
small标签中的内容会比他的父元素中的文字要小一些
在h5中使用small标签来表示一些细则一类的内容
比如：合同中小字，网站的版权声明都可以放到small
-->
<p>
我是p标签中的内容<small>我是small标签中的内容</small>
</p>
<!--
网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容，
比如：书名 歌名 话剧名 电影名 。。。
-->
<p>
<cite>《论语》</cite>是最喜欢的一般的书
</p>
<!--
q标签表示一个短的引用（行内引用）
q标签引用的内容，浏览器会默认加上引号
blockquote标签表示一个长引用（块级引用）
-->
<p>
子曰:<q>学而时习之不亦说乎！</q>
</p>
<div>
子曰:
<blockquote>
有朋自远方来，乐呵乐呵！
</blockquote>
</div>
<!--
使用sup标签来设置一个上标
-->
<p>2<sup>2</sup></p>
<p>赵薇<sup><a href="#">[1]</a></sup></p>
<!--
sub标签用来表示一个下标
-->
<p>H<sub>2</sub>O</p>
<!--
使用del标签来表示一个删除的内容
del标签中的内容，会自动添加删除线
-->
<p>
<del>17.75</del> <br />
15.54 <br />
</p>
<!--
ins表示一个插入的内容
ins中的的内容，会自动添加下划线
-->
<p>
我们的老师真<ins>好啊</ins>！
</p>
<!--
需要页面中直接编写一些代码
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
code专门用来表示代码
我们一般结合使用pre和code来表示一段代码
-->
<pre>
<code>
window.onload = function(){
alert("Hello World");
};
</code>
</pre>
</body>
</html>
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
去掉项目符号
* */
/*ul{
list-style: none;
}*/
</style>
</head>
<body>
<!--
列表就相当于去超市购物时的那个购物清单，
在HTML也可以创建列表，在网页中一共有三种列表：
1.无序列表
2.有序列表
3.定义列表
-->
<!--
无序列表
- 使用ul标签来创建一个无序列表
- 使用li在ul中创建一个一个的列表项，
一个li就是一个列表项
通过type属性可以修改无序列表的项目符号
可选值：
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆
注意：默认的项目符号我们一般都不使用！！
如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
ul和li都是块元素
-->
<ul>
<li>西门大官人</li>
<li>柴大官人</li>
<li>许大官人</li>
<li>唐僧大官人</li>
</ul>
<!--
有序列表和无序列表类似，只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
type属性，可以指定序号的类型
可选值：1，默认值，使用阿拉伯数字
a/A 采用小写或大写字母作为序号
i/I 采用小写或大写的罗马数字作为序号
ol也是块元素
-->
<ol type="I">
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<!--
列表之间都是可以互相嵌套，可以在无序列表中放个有序列表
也可以在有序列表中放一个无序列表
-->
<p>菜谱</p>
<ul>
<li>
鱼香肉丝
<ol>
<li>鱼</li>
<li>香</li>
<li>肉丝</li>
</ol>
</li>
<li>
宫保鸡丁
<ul>
<li>宫保</li>
<li>鸡丁</li>
</ul>
</li>
<li>青椒肉丝</li>
</ul>
</body>
</html>
效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
font-family: arial , 微软雅黑 , 华文彩云 , serif;
}
</style>
</head>
<body>
<!--
在网页中将字体分成5大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）
可以将字体设置为这些大的分类,当设置为大的分类以后，
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体
-->
<p style="font-size: 50px; font-family: serif;">衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: sans-serif;">非衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: monospace;">等宽字体：我是一段文字，IHABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: cursive;">草书字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: fantasy;">虚幻字体：我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>
盒子
• CSS处理网页时，它认为每个元素都包含在一
个不可见的盒子里。
• 为什么要想象成盒子呢？因为如果把所有的元
素都想象成盒子，那么我们对网页的布局就相
当于是摆放盒子。
• 我们只需要将相应的盒子摆放到网页中相应的
位置即可完成网页的布局。
盒子模型
• 一个盒子我们会分成几个部分：
– 内容区(content)
– 内边距(padding)
– 边框(border)
– 外边距(margin)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
/*
* 使用width来设置盒子内容区的宽度
* 使用height来设置盒子内容区的高度
*
* width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，
* 盒子可见框的大小由内容区，内边距和边框共同决定
*/
width: 300px;
height: 300px;
/*设置背景颜色*/
background-color: #bfa;
/*
* 为元素设置边框
* 要为一个元素设置边框必须指定三个样式
* border-width:边框的宽度
* border-color:边框颜色
* border-style:边框的样式
*/
/*
* 设置边框的宽度
*/
/*border-width:10px ;*/
/*
使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值，
则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的
如果指定三个值，
则三个值会分别设置给 上 左右 下
如果指定两个值，
则两个值会分别设置给 上下 左右
如果指定一个值，则四边全都是该值
除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度
* */
/*border-width:10px 20px 30px 40px ;*/
/*border-width:10px 20px 30px ;*/
/*border-width: 10px 20px ;*/
border-width: 10px;
/*border-left-width:100px ;*/
/*
* 设置边框的颜色
* 和宽度一样，color也提供四个方向的样式，可以分别指定颜色
* border-xxx-color
*/
border-color: red;
/*border-color: red yellow orange blue;*/
/*border-color: red yellow orange;*/
/*border-color: red yellow;*/
/*
* 设置边框的样式
* 可选值：
* none，默认值，没有边框
* solid 实线
* dotted 点状边框
* dashed 虚线
* double 双线
*
* style也可以分别指定四个边的边框样式，规则和width一致，
* 同时它也提供border-xxx-style四个样式，来分别设置四个边
*/
/*border-style: double;*/
border-style: solid dotted dashed double;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>