XHTML、CSS与javascript入门经典_第七章 层叠样式表

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属性

    

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：

    

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）和长度