《CSS权威指南(第三版)》笔记(3)

125啦读书导航 2018-06-22 08:49  阅读 580 views 次 评论 0 条
站长的个人作品

第6章 文本属性

文本和字体的区别:文本就是内容,而字体用于显示这个内容。

使用文本属性,可以控制文本相对于该行余下内容的位置,使其作为上标,加下划线,已经改变大小写等。

1. 缩进文本

在CSS中使用text-index属性可以让文本缩进。

使用格式: text-indent: length(长度) | percentage(百分比) | inherit(继承)

p { text-indent: 3em; }

通过属性,所有元素的第一行都将缩进一个给定的长度(可以正或负),目前使用最多的用于将段落的首行文本缩进。

2.水平对齐

水平对齐使用的是text-align属性,它会影响一个元素中的文本行之间的对齐方式。

使用格式: text-align: left(左对齐) | right(右对齐) | center(居中) | justify(水平对齐) | inherit(继承)

3.垂直对齐
1. 行高

行高可以通过line-height属性设置,指定文本行基线之间的距离(行间距),确定了各元素的高度增加或者减少多少。

使用格式: line-height: lenght | percentage | number | normal | inherit

2. 构造文本行

文本中的每个元素都会产生一个内容区,这个是由字体的大小确定的,这个内容区怎会生成一个行内框(inline box),撇开其他因素(比如line-height产生的行间距),这个行内框就完全等于该元素的内容区。

要确定一个给定元素的行间距,只需要line-height的计算值减去font-size的计算值。这个值是总的行间距(这个值可能是负数)。然后总行间距除2,将行间距的一半分别应用到内容区的顶部和底部。上下行间距加上font-size的计算值的结果就是该元素的行内框。

比如:假设font-size的像素高为14px,line-height的计算值为18px,其差(上下行间距)除以2,分别应用到内容区的顶部和底部,这样就得到一个18px的行内高。

3. 垂直对齐文本

在CSS中,使用vertical-align属性只能应用于行内元素和表单元素,如图片和表单输入元素。

vertical-align属性不能继承。

使用格式: vertical-align: baseline | sub | super |  top | middle | bottom | text-bottom | <percetage> | <length> | inherit

注意:vertical-align 不影响块级元素中的内容对齐

1.上标和下标

vertical-align:sub; 声明会是一个元素成为下表,这意味着其基线相对于父元素的基线更低。

vertical-aligin:super; 声明一个元素称为上标,其基线相对于父元素的基线更高。

注意,sub和supr不会改变元素的字体大小。文本时升高的距离取决于具体的用户代理。

2. 底端对齐,顶端对齐,居中对齐

vertical-align: bottom;   将元素行内框的底端与行框的底端对齐

vertical-align: text-bottom; 是指行内文本的底端,替换元素或者任意其他可行的非文本元素会忽略这个值。

vertical-align:top; 顶端对齐 元素顶端对齐 (将元素行内框的顶端与行框的顶端对齐)

vertical-align:text-top;

vertical-align:middle;  居中对齐

这个需要自己去实践一下,看看具体效果。

3. 百分数

使用百分数会把此元素的基线相对于父元素的基线升高或者降低指定的量(你指定的百分数要计算为该元素line-height的百分数,而不是相对于父元素的line-height)。

4. 字间隔和字母间隔
1.字间隔

word-spacing属性是改变字之间的间隔。

接受一个正长度值或者负长度值,这个长度值会增加到字之间的标准间隔。

使用格式: word-spacing: length | normal | inherit

2. 字母间隔

letter-spacing属性是改变字母或者字母之间的间隔。

使用格式: letter-spacing: length | normal | inherit

3. 间隔和对齐

word-spacing的值可能受textalign属性的影响。如果一个元素的两端对齐的,字母和字之间的空间可能会调整,以便文本在整行刚好放下。

这回改变创作者word-spacing声明的字间隔。如果为letter-spacing指定一个长度值,字符间隔则不会受text-align影响,但是如果letter-spacing的值是normal,字符的间隔可能会改变,以方便文本两端对齐。

5.文本转换

我们可以使用text-transform 改变文本的大小写。

使用格式:text-transform: uppercase(大写) | lowercase(小写) | capitalize(首字母大写) | none(正常) | inherit

6. 文本装饰

我们可用text-decoration来装饰文本,删除线,下划线和上划线等

使用格式:text-decoration: none | underline | overline | line-through | blink | inherit

text-decoration的属性不会累加,如果两个带有两个不同的装饰属性值,只能显示最后胜出的属性值。

text-decoration不能继承。

7. 文本阴影

我们可以使用text-shadow来设置文本阴影。默认元素中是没有阴影的。

使用格式: text-shadow: none | [ <color> || <length> <length> <length>?,  ] * [ <color> || <length> <length> <length>? ] | inherit

理论上可以定义一个或者多个阴影。没有都由一个颜色和3各长度值来定义而的。(前两个长度值确定了阴影与文本的偏移距离,第三个长度值可选,定义了阴影的“模糊半径”)

例如,要定义一个相对于文本向右偏移5像素,向下移动0.5em的绿色阴影,而且不模糊,可以写为如下:

text-shadow: green 5px 0.5em 
8. 文本方向

我们的课本的文本方向是从左到右的,但有些国家比如希伯来语和阿拉伯语确实从右到左的。

1.direction

我们可以使用direction的属性改变文本的方向。

使用格式:direction : ltr | rtl | inherit

direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向,以及两端对齐元素中最后一行的位置。

对于行内元素,只有当unicode-bidi属性设置为embed或者bidi-override时候才会应用direction属性。

对于Unicode-bidi有些不懂,,后续跟进。

第7章 基本视觉格式化

CSS假定每个元素都会生成一个或者多个矩形框,这称为元素框。各个元素框中兴有一个内容区,这个区域周围肯能有可选的内边距、边框、外边距。之所以是可选的,是因为它们的宽度可以设置为0。如下图,这是滴啊有外边距,内边距,以及边框。

外边距通常是透明的,可以看到父元素的背景。外边距的的值可以是负数,但内边距的值不可以。

1.基本框

CSS假定每个元素都会生成一个或者多个矩形框,这称之为元素框。各元素框中心有一个内容区,这个内容区周围可能有可选的内边距、边框、外边距。(如上图)

2. 包含块

每个元素都相对于其包含块摆放,可以说,包含块就是一个元素的布局上下文。

包含块由最近的块级祖先框、表单元格或行内块祖先的内容边界构成。

<body>
     <div>
         <p>This is a paragraph.</p>
     </div>
</body>

上面就是一个非常简单的例子。p元素的包含块是div元素。

类似的div的包含块是body。

3.常用术语

1.正常流 : 这是值西方语言文本从左到右、从上向下显示,也就是我们属性的HTML文档的文本布局。

2.非替换元素 : 如果元素的内容包含在文档中,则称之为非替换元素。例如,如果一个段落的文本内容都放在改元素本身之内,这个段落就是一个非替换元素。

3. 替换元素 :指用作为其他内容占位符的一个元素。替换元素的一个经典例子就是img元素,它是指向一个图像文件,这个文件将插入到文本流中img所在的文职。大多数表单元素也可以替换(<input type= "radio">)。

4. 块级元素 : 这是指段落、标题或者div之类的元素。这些元素子啊正常流中时,会在其框之前和之后生成“换行”,所以处于正常流中的会计元素会垂直摆放。通过声明display:block; 可以让元素生成块级框。

5. 行内元素: 这是指strong或span之类的元素。这些元素不会在之前或者之后生成“行分隔符”,他们是块级元素的后代。通过声明display:inline,可以让元素生成一个内行框。

6. 根元素 : 位于文档顶端的元素。在HTML文档中,这个根元素就是html。

7. 匿名文本 : 匿名文本(anonymous text)是指所有未包含在行内元素中的字符串。

例如:<p> Im <em> so </em> happy! </p>; 其中的 "I`m" "happy"就是匿名文本

注意:空格也是匿名文本的一部分。

8. em框 : em框子啊字体中定义,也称为字符框(character box)。

9. 内容区 : 在非替换元素中,内容区可能有两种。内容区可以是元素中各字符的em框串在一起的框,也可以是由元素中字符字形描述的框。

在《CSS权威指南》中使用的定义是:在替换元素中,内容区就是元素的固有高度再加上可能有的外边距、边框或内边框。

10. 行间距 : 行间距(leading)是font-size值和line-height值之差。这各差实际上分为两半,分别应用到内容区的顶部和底部。

11. 行内框 : 这个框通过向内容区增加行间距来描述。对于非替换元素,元素行内框的高度刚好等于line-height的值。对于替换元素,元素行内框的高度则恰好等于内容区的高度,因为行间距不应用到替换元素。

12. 行框: 这是包含该行中出现的行内框的最高点和最低点的最小框。换句话说,行框的商标界要位于最高行内框的上边界,而行框的底边要放在最低行内框的下边界。

4. 水平格式化

如果一个元素声明了内边距、边框以及宽度,则真正的(或者指定的)宽度值是左边界到右边界的距离。

比如:

<p style= "width: 200px; padding: 10px; margin: 20px; ">125啦读书导航 </p>

可见元素的宽度是200px,因为内容的左右边都增加了10px的内边距,外边距的左右两边也延伸20px

因此,整个加起来的真正元素框的宽度d= width+ padding-left+padding-right+margin-left+margin-right=200+10 +10+ 20+ 20= 260px;

第8章 内边距、边框和外边距

1. 宽度和高度

一个元素的width被定义为从左边边界到右边边界的距离,height被定义为上内边界到下内边界的距离。

PS:width和height不能应用到行内非替换元素。

比如声明一个超链接的height和width,浏览器会忽略这些声明,其高度和宽度由链接的内容确定的。

2. 外边距

大多数正常流元素之间出现的间隔都是因为存在元素的外边距。

设置外边距后,会在元素周围创建额外的“空白”,这空白是透明的,可以看到父元素的背景。

设置外边距的属性是margin,margin-left,margin-right,margin-top,maring-bottom

/*如果上下左右的值都是一样的,写法有如下几种*/

h1{
     margin: 10px 10px 10px 10px; /*上 右 下 左  排序的*/
}

h1{
    margin: 10px;  /*如果上右下左的值都一样,可以这样简写*/
}


h1{   
    margin-lfet: 10px;
    margin-right: 10px;
    maring-top: 10px;
    maring-bottom: 10px;
}


/*如果上下的值一样,左右的值一样,可以如下写法*/

h1{   
    margin-lfet: 20px;
    margin-right: 20px;
    maring-top: 10px;
    maring-bottom: 10px;
}

h1{
   margin: 10px 20px; /*这是简写方法,表示的是 10px 20px 10px 20px */
}

CSS中定义了一些margin的规则:

1. 如果缺少左边距的值,则使用右边距的值

2. 如果缺少下边距的值,则使用上边距的值

3.如果缺少右边距的值,则使用上边距的值

1. 外边框和行内元素

行内非替换元素的外边距不会改变一个元素的行高。

strong{
   maring-top: 25px;
   margin-bottom: 20px;
}

上面声明是允许的,但此声明对行高没有任何影响,加上外边距是透明的,所以这个声明没有任何视觉效果。

当然,如果设置了左右外边距值,这个就可以有视觉效果的,左右两边空出一些空白了。

1.外边距只能通过改变元素内容在行中的起点来影响换行。

2. 如果设置了负的外边距,元素左右两边可能与其他内容重叠。

3. 外边距会影响替换元素的行高(可增加或减少)

PS:对于值包含文本行,能改变行间距离的属性只有line-height, font-sieze和vertical-align。

3. 边框

元素的边框就是围绕元素内容和内边距的一条线或者多条线。

每个边框都有宽度或粗细、样式或外观,以及颜色属性的设置。

边框的宽度默值为medium,这个值没有明确定义,不过通常是2各像素。(但你不一定能看到,默认边框的样式为none)

边框的样式:border-style ,或者 border-top-style,border-right-style , border-bottom-style, border-right-style,border-left-style

边框的宽度: border-width,或者border-top-width,border-right-width,border-bottom-width,border-left-width

边框的颜色: border-color,或者border-top-color,border-right-color,borrder-bottom-color,border-left-width

边框的简写形式:border,或者border-top, border-right,border-bottom,border-left

格式: border : border-width  border-style border-color

border-top: border-width border-style border-color

1. 边框和行内元素

不论行内元素的边框指定怎样的宽度,元素的行高都不会改变。(可以看外边距和行内元素的介绍)

如果设置了边框,浏览器换行是并不受行内元素所设置的任何框的属性直接影响,唯一的作用就是边界所占空间可能会把行中的某部分向后移动一点点,而这有可能改变位于行尾的词。

4. 内边距

内边距的设置是通过padding或者padding-left,padding-right,padding-top,padding-bottom属性设置。(使用格式和margin的一样)

第9章 颜色和背景

1. 颜色

颜色的设置使用color属性

我们以前看说过,颜色设置可以使用,颜色关键字,比如red,blue等预定义的值;也可以额使用十六进制的 #000000(黑色),#FFFFFF(白色);或者使用rgb(0, 0, 0) , rgb(255, 255, 255) 等三种方式配置颜色

2.背景

1. background

2.background-color

3.background-image

4.background-repeat: 涉及的属性值 repeat | repeat-x | repeat-y | no-repeat | inherit

5.background-position : 涉及的属性值 right | left | center | top  等  带一个或者两个参数的,(一个是水平方向,另一个是垂直方向)

规则:

单个关键字   等价于关键字(一个水平 一个垂直)       等价百分数(水平  垂直)

center         center center                     50%  50%

top              top  center  /  center  top    50% 0%

bottom         bottom center / centr bottom    50%  100%

right              center right  /  right   center   100% 50%

left                 center   left /  left center   0% 0%

等等

6. background-attachment: 背景图关联 ,属性值有: scroll(滚动,默认值) | finxed(固定)  | inherit

第10章 浮动和定位

定位就是允许你定义元素相对于其他正常位置应该出现在哪里或者相对于父元素,另一个元素甚至浏览器窗口本身的位置。

浮动就是定义某个元素向指定方向浮动起来。比如图片设置浮动后,允许其他内容(文本)等‘围绕’着此图片。

不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

1.浮动

过去只有图像可以浮动(当然也要浏览器支持),现在在CSS中允许任何元素浮动。

浮动的使用格式: float: left | right | none | inherit

如果确定要浮动一个非替换元素,则必须为该元素声明一个width,因为CSS规定中元素的宽度趋于0,

浮动float规则:

1.浮动元素的左(或右)外边界不能超出其包含块的左(或右)边界(也就是浮动元素不能浮出父元素的边界)

2.浮动元素的左(或右)外边界必须是源文档之前出现的左浮动(或右浮动)元素的右(左)边界,除非后出现浮动元素的顶端在先浮现元素的底端下面。(大意:如果对都左浮动,依次从左到右排序,如果排序不下(父元素宽度不够),排成第二行)

3.左浮动元素的右边界不会在其右边浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任意左浮动元素的右边界的左边。(有点绕)

4.一个浮动元素的顶端不能比其父元素的内顶端高(再高也不能高过父元素,难逃如来手掌!)。如果一个浮动元素的在两个合并外边距之间,放置这个浮动元素时就好像在两个元素之间有一个块级父元素。(没太懂)

5.浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高(放置层叠)

6.如果源文档中一个浮动元素之前出现另一个元素,浮动元素的顶端不能比包含该元素所生成的任何行框的顶端更高。

7.左(或右)浮动元素的左边(右边)有一另一个浮动元素,前者的右外边界不能在其包含块的右(左)边界的右边(左边)(不能超出父元素的边界)

8.浮动元素必须尽可能高地放置。

9.左浮动元素必须向左尽可能远,有浮动元素则必须尽可能向右远,位置越高,就会向右或向左浮动得越远。

2. 清除

使用clear属性可以清除浮动,因为有时候不需要浮动

使用格式:clear: left | right | botn(左右浮动都清除) | none | inherit

3.定位

利用定位可以准确地定义元素框相对于其他正常位置应该出现在哪里,或者相对于父元素,另一个元素甚至浏览器窗口本身的位置

在CSS中我们使用postion来设置元素的位置。

使用的格式: position: static | relative | absolute | fixed | inherit

属性值介绍:

static : 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,至于其父元素

relative: 元素框偏移某个距离。元素人保持其未定位前的形状,它原本所占的空间仍保留。

absolute : 元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者初始化包含块。元素原先在的正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成的一个块级框,而不论原来它在正常流中生成何种类型的框。

fixed : 元素框表现类似于position设置为absolute,不存其包含块是视窗本省。

4.包含块

对于浮动元素,其包含块定义为最近的块级祖先元素。

对于定位,情况则没那么简单。CSS2.1定义规则如下:

1. “根元素”的包含块(也称之为初始包含块)由用户代理建立。在HTML中,根元素就是html元素,不过有些浏览器会使用body作为根元素。

2.对于一个非根元素,如果其position值是relative或者static,包含块则由最近的块级框、表单元格或者行块祖先框的内容边界构成。

3. 对于一个非根元素,如果其position值是absolute,包含块设置为最近不是static的祖先元素(可以是任何类型)。

----- 如果这个祖先是块级元素,包含块则设置为该元素的内边距边界;换句话说,就是有边框界定的区域

----- 如果这个祖先是行内元素,包含块则设置我该祖先元素的内容边界。

----- 如果没有祖先,元素的包含块定义为初始化包含块。

这一部分没太懂,,,,

5. 限制宽度和高度

我们可以通过min-width , min-height, max-width, max-height来限定元素的内容区域大小。

6. 内容溢出和剪裁
1. 溢出

有时候,一个元素固定为某个特定大小,但内容在元素中放不下,此时可以是有那个overflow属性控制。

使用格式: overflow: visible | hidden | scroll | auto | inherit

visible :默认属性值,此时的元素内容在元素之外也是可见的。

scroll: 元素的内容会在元素框的边界进行裁剪,同时使用一个滚动条让用户滚动查看超出的内容。

hidden: 元素内容超出部分看不到,被隐藏了。

2.内容裁剪

如果一个绝对定位元素的内容溢出其内容框,而且overflow设置为要求裁剪该内容,可通过使用clip属性可以改变裁剪区域的形状。

使用格式 :clip: rect(top, right, bottom, left ) | auto | inherit

3.元素可见性

可以说使用visibility设置元素的可见性。

使用格式: visibility: visiable | hidden | collapse | inherit

visibility: hidden;会设置元素处于不可见状态,但元素还是会影响文档的布局。(它存在,但看不到)。这个和display:none;有区别的,此属性不仅不显示,同时还会从文档中删除。

后续更新,书没看完。

温馨提示:文章内容系作者个人观点,不代表博客志对观点赞同或支持。
版权声明:本文为投稿文章,感谢 125啦读书导航(125la.com) 的投稿,欢迎分享本文,转载请保留出处!
站长的个人作品
125la导航_独立博客导航平台

发表评论


表情

或者微信联系我