CSS设计指南(第三版)【中译】2013年 作者:[英] Charles Wyke-Smith

笔记整理(第一本前端书籍)

一、 html文档和标记

  • html是超文本标记语言,它通过为超文本添加标记的方式,来赋予超文本内容的网页语义,即给网页内容赋予某些用户代理能够理解的含义如浏览器,从而解析并显示在网页上。

  • 属性="属性值":为浏览器提供有关标签的额外信息。比如alt(屏幕阅读设备上),src(引入源文件)等

  • 段落和标题:h1不仅是最大最突出的标题(除非你用CSS缩小它的字号),搜索引擎也会将其视为仅次于title标签的另一个搜索关键词的来源。

  • 复合元素:创建列表,表单和表格等用户界面组件,比如<ul><li></li></ul>

  • 嵌套标签:要在一个标签里嵌套另一个标签(也就是前者的开标签写在后者的开标签之前),必须要先关闭后一个标签再关闭前面那个标签。HTML 文档的结构正是通过类似这样的标签嵌套,以及就此建立起来标签间的“父-子”关系形成的。

  • 文档流: HTML 元素会按照它们各自在标记中出现的先后顺序,依次从页面上方“流向”下方。

  • 块级元素和行内元素:几乎所有 HTML 元素的 display 属性值要么为 block,要么为 inline。最明显的一个例外是 table 元素,它有自己特殊的 display 属性值。

  • 行内元素盒子:盒子会尽可能地收缩内容,在水平方向上并排显示,----设置width,height无效(可以设置line-height),margin上下无效,padding上下无效,border有效。

  • 块级元素盒子:盒子会默认拓展到和父元素同宽,每个元素占据一行,垂直方向上堆叠排列,从新行开始结束接着一个断行。

  • html实体:在前面的例子中,两个实体的名字分别是“left-double-quote”(左双引号)和“right-double-quote”(右双引号)
    的简写即&#ldquo&#rdquo

  • 文档结构模型:html文档结构对应文档对象模型(DOM),dom是从浏览器的视角观察页面的元素和每个元素间的相对关系,由此得到一个家族树即DOM Tree,在css中引用dom中特定的位置,就可以选中相应的html元素并且修改样式属性。

二、CSS的工作原理

  • css添加到页面中的三种方式:行内式,嵌入式,外部式,@import url(##)

  • CSS 规则分两部分,即选择符和声明。声明又由两部分组成,即属性和值。声明包含在一对花括号内选择符

  • css的选择符

1.上下文选择符
1、紧邻同胞选择符 +
2、一般同胞选择符 ~
3、子选择符 >

 2.id和class 选择符 
    可以给 id 和 class 属性设定任何值,但不能以数字或特殊符号开头。

 3.属性选择符
    1、属性名选择符[property]
    2、属性值选择符[property="value"]
        1、^= "value" 包含某个值开头的选择符
        2、$="value" 某个值结尾的选择符
        3、~="value" 包含某个值的选择符
 4.伪类选择符
    1、UI伪类选择符
        链接伪类选择符 :link :visited :hover :active
        focus 伪类
        target 伪类
        hover 伪类
    2、结构伪类
        :first-child :last-child :nth-child
        :first-type-of...
 5.伪元素选择符
    ::first-letter
    ::first-line
    ::before ::after
    (搜索引擎不会取得伪元素的信息(因为它在标记中并不存在)。因此,不要通过伪元素添加你想让搜索引擎索引的重要内容。)
 6.通用选择符 *
  • css的继承
    CSS 中有很多属性是可以继承的,其中相当一部分都跟文本有关,比如颜色、字体、字号。
    然而,也有很多 CSS属性不能继承,因为继承这些属性没有意义。
    这些不能继承的属性主要涉及元素盒子的定位和显示方式,比如边框、外边距、内边距。

  • 层叠
    就是层叠样式表中的层叠,是一种样式在文档层次中逐层叠加的过程,
    目的是让浏览器面对某个标签特定属性值的多个来源,确定最终使用哪个值。

  • 浏览器层叠各个来源样式的顺序:
    浏览器默认样式->用户样式表->链接(外部)样式表[按照他们链接到页面的先后顺序]->嵌入式样式->行内样式

  • 层叠规则:按照顺序和权重来进行,空格!important 分号(;)用于加重声明的权重,如 p {color:red !important;}

  • CSS的属性值分为三类:文本值,数字值,颜色值

三、定位元素和背景

  • 元素盒子的属性主要有:边框属性(border) 内边距属性(padding) 外边距属性(margin)

  • 重置样式表 reset.css。这个样式表不仅重置了外边距和内边距,还对很多元素在跨浏览器显示时的外观进行了标准化。

  • 垂直方向上的外边距不叠加,水平方向上的外边距叠加。

  • box-sizing 属性,通过它可以将有宽度的盒子也设定成具有默认的auto 状态下的行为

  • 浮动与清除

把元素从常规的文档流中拿出来,一是可以实现传统出版物上文字围绕图片环绕的效果,二是可以让原来垂直方向排列的元素变成水平排列,即上下堆叠变成左右并排,从而实现布局中的分栏。

 浮动的元素脱离了常规的文档流后,紧跟在其后的元素会在空间允许的条件下向上提升。

 浮动非图片元素时,必须给它设定宽度,否则后果难以预料。图片无所谓,因为它本身有默认的宽度。

 浮动元素脱离了文档流,其父元素也看不到它了,因而也不会包围它。围住浮动元素的三种方法:
 * 1.为父元素添加overflow:hidden,overflow:hidden本来的作用是防止元素被超大的内容撑大,它的另一个作用是迫使父元素围住浮动的子元素。下拉菜单的顶级元素不能使用
 * 2.为父元素设定浮动,迫使父元素围住浮动的子元素,但要为父元素其后的元素设置clear:both。
 * 3.在父元素最后添加子元素作为清除元素,迫使父元素围住子元素。
    1.添加空的div元素,并设置clear:both
    2.父元素添加class="clearfix",并设置.clearfix::after {content=".";display:block;height:0;visibility:hidden;clear:both;}

 没有父元素的时候如何清除浮动: 用.clearfix规则.
  • 定位:css布局的核心是position,position属性有4个值:static relative absolute fixed 默认值是static

    1.静态定位:按照文档流的顺序上下堆叠

    2.相对定位:相对它原来在文档流的位置,可以用top、left、bottom、right,但它原来占据的空间没有改变,其他元素也没有改变。

    3.绝对定位:使元素彻底脱离文档流,元素原来占据的空间被"回收了",一般是相对顶级元素body来定位。

    4.固定定位:使元素彻底脱离文档流,和绝对定位的不同之处在于定位上下文是视口(浏览器窗口或者手持设备的屏幕),它不会随滚轮的滚动而滚动

注意: 外部 div 改为相对定位之后,其后代中绝对定位的元素就会按照 top 和 left 属性的设定,相对于外部 div 定位

  • 显示属性:display的值有:inline,block,none,通过显示属性行内元素和块级元素可以相互转化。

  • 背景:css中每个盒子都由两个图层组成:元素的前景层包括内容和边框;元素的背景层应用在整个元素盒子的后面(3d)
    其中,背景图片在背景颜色之前。

    background相关属性:
    background-color background-image background-repeat background-position background-size background-attachment

    background-repeat的值:
    no-repeat,repeat-x,repeat-y,round,space(增大图片间的空白)

    background-position有5个关键自值:
    topleftbottomrightcenter,也可以设置数字值如(30%,40%),还能设置负值

    background-size的值有:
    50%,cover,contain,100px 50px

    background-attachment背景粘附属性,它的默认值是scroll,即背景图片随元素移动,如果把值设为fixed,背景图片不会随元素滚动。

    简写:background: #fff url(4.png) no-repeat scroll bottom left;

    background-clip 控制背景绘制区域的范围

    background-origin 背景区域的原点

    以下 CSS3 属性必须加 VPS:
    border-image translate
    linear-gradient transition
    radial-gradient background*
    transform background-image*
    transform-origin

 * 针对背景图片或渐变

linear-gradient线性渐变属性 background:linear-gradient(#e86a43, #fff 25%, #64d1dd 25%, #64d1dd 75%,#fff 75%, #e86a43)

radial-gradient放射性渐变属性 如 background: radial-gradient(#e86a43, #fff,#123456)

四、字体和文本

  • 字体的来源:
    用户机器上安装的字体;保存在第三方网站上的字体;保存在web服务器上的字体(可以使用@font-face随网页一起发给浏览器)

  • 字体属性:font font-size(笔须)font-family(必须) font-style font-weight font-variant

  • 文本属性:
    text-indent letter-spacing word-spacing text-decoration text-align line-height text-transform vertical-align

  • text-indent具有继承性,设定块级盒子内容相对于包含元素的起点。默认情况下,这个起点就是包含元素的左上角.
    注意:对段落p等块状元素有用,span设置无效,因为span没有有效的宽度,但可以为span设置margin-left一样效果。

  • letter-spacing 为正值时增大字符间距,为负值时缩小间距。

  • word-spacing 单词间距与字符间距非常相似,区别在于它只调整单词间距,而不影响字符间距。
    注意: CSS 把任何两边有空白的字符和字符串都视作“单词”

  • 文本装饰属性 text-decoration 值有:underline none overline line-through blink

  • 文本对齐属性 text-align 值有:left right center justify
    center值也可以用来在较大的元素中居中较小的固定宽度的元素或图片.

  • 行高line-height 值是任何数字值,不需要单位, 也可以添加单位,如果只设置值忘记添加单位,会成倍放大元素的高度

  • 文本转换属性 text-transform 值有:uppercase lowercase none captalize

  • 垂直对齐属性 vertical-align 值有:sub super top middle bottom或者任意长度值如60%
    注意vertical-align 以基线为参照上下移动文本,但这个属性只影响行内元素。想在垂直方向上对齐块级元素,必须把其 display属性设定为 inline

  • 字体打包:

     <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
     @font-face {
     /*这就是将来在字体栈中引用的字体族的名字*/
     font-family:'UbuntuTitlingBold';
     src: url('UbuntuTitling-Bold-webfont.eot');
     src: url('UbuntuTitling-Bold-webfont.eot?#iefix')
     format('embedded-opentype'),
     url('UbuntuTitling-Bold-webfont.woff')
     format('woff'),
     url('UbuntuTitling-Bold-webfont.ttf')
     format('truetype'),
     url('UbuntuTitling-Bold-webfont.
     svg#UbuntuTitlingBold') format('svg');
     font-weight: normal;
     font-style: normal;
     }

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,313评论 1 91
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 581评论 0 1
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,119评论 0 6
  • 坐在返程的的士车上,回忆和近况交织在一起。眼神越过空中零星的雨滴,自顾看着自己。歌曲和思绪,总能轻易让人出离。 现...
    葡萄紫耶阅读 81评论 0 0
  • 有那么很多的一瞬间 好想让他放过我 让我一个人ba
    songdear阅读 83评论 0 0
  • 昨天晚上,女儿考完中考二模回家,我已做好了饭菜等她,这样的日子很少,我上班时间常常很忙,很少比她早回家的,吃完饭,...
    遇见安娜阅读 65评论 0 0