CSS规则组成
CSS控制文本外观
CSS如何基于Box Model
7.1CSS简介
CSS规则:
1.选择器:指定声明应用于哪个或那些元素(不同元素之间用逗号隔开)
2.声明:控制元素显示方式的一个或多个属性(属性:值;若没有最后的分号,则之后内容会被忽略)
7.1.1一个基本示例
CSS注释:/* 注释内容 */
pt:代表点(类似于px,用于文字)
如果要指定class特性为某个特定值的元素,就需要在class特性的前面加上“ . ”
7.1.2继承
某元素的属性,会被它的子元素继承
更加特定的样式规则,在特定的元素内,会取代继承性
7.2添加CSS规则的位置
外部样式表:将CSS放在单独的文件夹内
内部样式表:将CSS写在文档头的的<style>中
内联样式规则:将CSS写在元素的特性style中
7.2.1<link>元素
描述两个文档之间的关系,<link>元素总是空元素。附带特性:
1.rel:必须,指定包含链接的文档和链接到的文档之间的关系,样式表是stylesheet
2.type:指定链接文档的MIME类型,CSS MIME类型是text/css
3.href:指定链接文档的url
4.hreflang:用于编写特定资源的语言
5.media:指定文档使用的输出设备,如取值screen(表示笔记本或者台式机)
7.2.2<style>元素
7.2.3外部样式表的优点
可作用多个页面,不需重复加载
7.3CSS属性
![](https://img-my.csdn.net/uploads/201212/17/1355734274_7255.png)
7.4控制文本
控制文本外观属性分类:
直接影响字体及其外观的属性:
font:通过该属性将下列多个属性组合到一起
font-family:指定使用字体类别
font-size:指定字体大小
font-weight:指定字体是否加粗,及加粗程度
font-style:指定字体正常、斜体还是倾斜的
font-variant:指定字体正常、小型大写字母
font-stretch:指定字体中实际字体宽度(
还为被主流浏览器支持
)
font-size-adjust:修改字体字符尺寸纵横比
(
还为被主流浏览器支持
)
对文本具有相同效果,但是与使用字体无关的属性
7.4.1font-family属性
指定元素内部文本使用的字型
字型列表中的每个字型使用逗号隔开。若字型名中包含空格,则将该名用在双引号内
7.4.2font-size属性
指定字体的大小,经常用像素为单位,还可以使用的单位:
长度:px em ex pt in cm pc mm
绝对大小:xx-small x-small small medium large x-large xx-large
相对大小:smaller larger
百分比:包含该文本元素的比列计算得出
7.4.3font-weight属性
控制字体加粗程度,取值:
normal bold(常用) bolder lighter 100 200 ... 900
7.4.4font-style属性
字体倾斜显示,取值:normal italic oblique
7.4.5font-variant属性
和字母大小写相关,取值:normal、small-caps(将小写字符大写,并且字体大小和小写字母一样)
7.4.6font-stretch属性
还为被主流浏览器支持
7.4.7font-size-adjust属性
还未被主流浏览器支持
7.5文本格式化
color:指定文本颜色
text-align:指定文本在包含元素内的水平对齐方式
vertical-align:指定文本在包含元素内的垂直对齐方式
text-decoration:指定文本上划线、删除线、下划线或者闪烁
text-indent:指定文本相对于左边框的缩进距离
text-transform:指定文本内容全部大写、全部小说、首字母大写
text-shadow:指定文本具有阴影(
IE8不支持
)
letter-spacing:控制单词的字母间距
word-spacing:控制每个字体之间的空间量
white-space:指定空白折叠、保留、或不换行
direction:指定文本方向(累死dir特性)
7.5.1color属性
指定文本颜色
7.5.2text-align属性
文本水平对齐方式,取值:left、center、right、justify(两端对齐)
7.5.3vertical-align属性
文本垂直对齐方式
7.5.4text-decoraction属性
overline:上划线
line-through:删除线
underline:下划线
blink:创建闪速文本
7.5.5text-indent属性
属性元素内,文本第一行
7.5.6text-shadow属性
IE8还不支持
7.5.7text-transform属性
指定元素内容的大小写,取值
none:不发生变化
capitalize:每个单词的首字母大写
uppercase:全部转化为大写
lowercase:全部转化为小写
7.5.8letter-spacing属性
控制单词字母间的距离
无间距:字体的字母之间有正常的间距
用normal可以取消字间距
7.5.9word-spacing属性
设置单词之间的距离
7.5.10white-space属性
normal:遵循常规空白折叠规则
pre:保留空白
nowrap:只有遇到<br />文本才会换行
7.5.11direction属性
ltr:文本方向从左到右
rtl:文本方向从右到左
inherit:继续父元素文本方向
7.6文本伪类
改变文本的第一个字母或者第一行,通常与<p>组合使用
7.6.1first-letter伪类
7.6.2first-line伪类
7.7选择器
如何将样式规则用到元素上
7.7.1通用选择器
通用选择器是一个星号,eg:*{}
7.7.2类型选择器
类型选择器匹配以逗号隔开的元素列表所隔开的所有元素,eg:h1, h2{}
7.7.3类选择器
类选择器可以将一条规则附带于class特性的一个或多个元素,class特性也可以附带由空格隔开的几个值,eg:
.xxclass{}:任何class特性都可以附带
p.xxclass{}:只有<p>附带该特性,才会起效果
7.7.4id选择器
id选择器与类选择器类似,不过将前面的“ . ”替换成“ # ”
7.7.5子选择器
子选择器匹配的是另一个元素的直接子元素,用连结符“ > ”连接,
IE从IE7开始支持,eg:td>b{}
7.7.6派生选择器
匹配另一个元素的派生元素(指定元素内嵌套的元素),连结符空格,eg:table b{}
7.7.7相邻兄弟选择器
匹配指定元素的相邻兄弟元素类型,连结符“ + ”,
IE从IE7开始支持,eg:h1+p{}
7.7.8通用兄弟选择器
指定匹配元素的任何兄弟元素类型,即使他们不是直接的先后关系,连结符“ ~ ”,IE从IE7开始支持,eg:h1~p{}
7.7.9使用子选择器和相邻兄弟选择器降低标记中类的依赖性
7.7.10特征选择器
特征选择器可以使用元素附带的特性及特性的值,
IE从IE7开始支持,eg:
![](https://img-my.csdn.net/uploads/201212/17/1355734311_9977.png)
7.8长度
7.8.1相对单位
1.px
2.em:相当于当前字体的高度,在文档不同部分,字体高度可能不一样,所以em单位也具有不用高度
3.ex:小写字母x的高度,所以和字体大小及字体类型有关
7.8.2绝对单位
pt pc in cm mm
7.8.3百分比
7.9box model简介
决定如何在浏览器窗口中放置元素
border:每个框都有一个边框,即使看不见
margin:框边缘和相邻框之间的距离(页边距)
padding:框的内容和边框之间的距离(内边距)
页边距:假设有两个相邻的边框,页边距为0,那么这两个框将会接粗在一起,它们的框比其他的线粗;若页边距不为0,垂直方向上显示的页边距是范围较大(相等)的页边距,水平方向为两个页边距和
7.9.1演示框架模型示例
块级元素(从新行开始):块级元素周围的框占据浏览器的全部宽度或包含它元素的全部宽度
内联元素:本身的宽度
7.9.2边框属性
1.border-color:指示边框颜色
border-top-color:改变上边框颜色
border-right-color:改变右边框颜色
border-bottom-color:改变下边框颜色
border-left-color:改变左边框颜色
2.border-style:指示边框线的样式,实线、虚线、或双线等等
border-top- style:改变上边框样式
border-right-style:改变右边框样式
border-bottom-style:改变下边框样式
border-left-style:改变左边框样式,取值:
none:内有边框,等同于border-width:0
soild:边框是单条实线
dotted:边框是一系列点
dashed:边框是一系列短线
double:边框是两条实线
groove:边框看上去如同雕刻进网页中
ridge:和groove效果相反
inset:边框看上去如同嵌入网页中
outset:边框看上去如同位于画布之外
hidden:用以解决边框冲突,和none效果一样
3.border-width:指示边框宽度,通常使用像素指定单位,
不能使用百分比,除了相对单位和绝对单位,还可以是:thin、medium、thick
border-top- width:改变上边框宽度
border-right-width:改变右边框宽度
border-bottom-width:改变下边框宽度
border-left-width:改变左边框宽度
4.使用极简主义表示边框相关属性
border:可以同时指定边框的宽度、样式、颜色,eg:p{border:4px solid red;},各个值之间不能有内容,用空格连接:
border-top:改变上边框相关属性
border-right:改变右边框相关属性
border-bottom:改变下边框相关属性
border-left:改变左边框相关属性
7.9.3padding属性
指定元素的内容和边框之间的空间量,默认情况下该属性不会继承,只有设置成inherit才会继承,单位可以使相对、绝对或者百分比:
padding-top:改变上边框内边距
padding-right:改变右边框内边距
padding-bottom:改变下边框内边距
padding-left:改变左边框内边距
7.9.4margin属性
控制框之间的距离,垂直方向取值复杂,单位及继承和padding一样:
margin-top:改变上边框页边距
margin-right:改变右边框页边距
margin-bottom:改变下边框页边距
margin-left:改变左边框页边距
7.9.5框的范围(7个属性)
1.height和width属性
设置框的高度和宽度
2.line-height属性
重要的属性,设置行高度
3.max-width和min-width属性
设置框的最大和最小宽度,不允许为负值,
IE7开始支持
4.max-height和min-height属性
设置框的最大和最下高度,不允许为负值,
IE7开始支持
6.overflow属性
hidden:溢出内容被隐藏
scroll:为框设置滚动条
7.9.6IE框模型的bug
IE:框宽度 = 内容宽度 + 内边距
W3C: 框宽度 = 内容宽度
使用!DOCTYPE可以解决此bug
7.10本章小结
主要讲了:字体(5)、文本(10)、文本伪类(2)、box model(3*3 + 7)个属性,选择器(7)和长度