《Head First HTML&CSS》笔记

• void元素是指HTML页面中开始标记和结束标记之间没有任何内容的元素。
• 应当使用相对链接来链接同一网站中的页面，而用URL来链接其他网站上的页面。
• 浏览器读取计算机本地文件时会使用file协议。文件URL后面有3个斜线。
• 通常默认传输的端口是80。
• a元素有一个title属性，用来提供链接的信息。
  • a元素可以带一个id属性，从而直接访问页面中的一个特定点。不论是相对链接还是URL，要链接到页面中的一个特定目标，只需要在链接最后加一个#，再加上目标标识符。
• 可以为任何元素添加title和id属性。
• id要以一个字母开头（A~Z或a~z），后面可以是任意字母、数字、横线、下划线、冒号或点号。 要在新窗口打开一个页面，需要告诉浏览器你要打开的窗口名。如果没有告诉浏览器要使用哪个特定的窗口，浏览器就会在同一个窗口中打开这个页面。可以为a元素添加一个target属性，告诉浏览器使用一个不同的窗口。如果使用“_blank”作为目标，浏览器就总是打开一个新窗口显示页面。如果指定另一个名字，如“coffee”，那么有相同目标名“coffee”的所有链接都会在同一个窗口中打开。（经测试，chrome正常，IE11会在不同窗口打开。）
• 典型的URL是由一个协议，一个网站名和资源的一个绝对地址组成的。（如域名是glorywu.com，而网站名是www.glorywu.com，也可以是code.glorywu.com或wade.glorywu.com等等。）
• Web上最常用的3种图像格式：JPEG、PNG和GIF。
  • 照片和复杂图像使用JPEG。JPEG包含1600万种颜色，有损格式，会丢掉一些信息，不支持透明度和动画，文件小。
  • 单色图像、logo和几何图形同PNG或GIF
  • PNG：包含上百万种颜色，无损格式，不会丢失信息，允许设置“透明”，使图像下面的东西可以显示出来，文件比相应的JPEG大。
  • GIF：包含256种颜色，无损，只允许设置一种颜色为“透明”，文件比相应PNG大，支持动画。
• 是一个内联元素。元素只是指向图像，图像本身并不是HTML页面的一部分。HTML页面是纯文本的。元素的alt属性可以在图像无法显示时，会显示一些文本取代它。（chrome：有破损图，无字。IE：有图有字。Firefox：无图有字。）可以通过width和height属性调整图像大小（宽度最好小于800像素）。浏览器在下载了HTML文件并开始显示页面之后才开始下载图像。同时，浏览器在缩放图像使之适应页面大小之前，需要先获取完整的图像，所以最好直接更改源文件的尺寸。
• 反锯齿（anti-aliasing）处理可以相对于背景色柔化边缘。
• 如果省略所有元素名，只有一个点，然后是类名，那么这个规则就会应用到这个类的所有成员。
• 一个元素可以加入多个类，把各个类名放在class属性中，各个类名之间用一个空格分隔。类名的顺序并不重要。
• 当多个选择器选择一个元素时，如果一个规则比其他规则更特定，它就会胜出。而如果它们的特定程度相同，就选择CSS文件中最后列出的那个规则。
• 用font-family控制使用的字体；用font-size控制字体大小；用color控制文本颜色；用font-weight控制字体粗细；用text-decoration为文本增加更多风格（上划线、下划线、删除线）。
• 每个font-family包含一组有共同特征的字体。包括sans-serif、serif、monospace（固定宽度）、cursive（手写）和fantasty（某种风格）。
• 使用font-family属性可以指定多个字体。首先是首选字体，其次是一些候选字体，即首选字体不可用时使用的字体，最后放一个通用的字体系列名（一般为浏览器默认的字体），它与列表中指定的所有其他字体应该在同一个字体系列中。大多数PC上都有Verdana字体，大多数Mac上都有Geneva字体，Arial在PC和Mac上都很常见。如果一个字体名中包含有空格，要给字体名加上引号。
• woff：Web open font format。Web字体首选web开放字体格式，TrueType作为候选。TTF和WOFF字体格式在IE8及以前的版本中不可用。Embedded OpenType仅IE支持。
• @font-face规则告诉浏览器：要加载由src URL指定的字体文件。浏览器会尝试加载每一个src文件，直到找到它能支持的一个文件。一旦加载，会为这个字体分配font-family属性中指定的名字。
• 调整字体大小的几种方法
  • font-size: 14px; 使用像素指定字体大小，老版本的IE将不支持文本缩放。
  • font-size: 150%; 指定一个百分数字体大小时，就是相对于父元素的字体大小。
  • font-size: 1.2em; 同上。
  • font-size: small; 可以把一个字体大小指定为xx-small,x-small,small.medium,large,x-large或xx-large，浏览器会把这些关键字转换为像素值，它会使用浏览器中定义的默认值来完成这个转换。这些关键词中，每个关键词对应的大小大约比前一个大20%，small通常定义为12px。
• 指定字体大小的推荐方法
  • 选择一个关键字（推荐small或medium），指定它作为body规则中的字体大小。这相当于页面的默认字体大小。 
    *使用em或百分数，相对于body字体大小指定其他元素的字体大小。
• 大多情况下，浏览器默认的body字体大小为16像素。而h1是body字体大小的200%，h2是150%，h3是120%，h4是100%，h5是90%，h6是60%。一般来讲默认的h4字体大小与body字体大小相同。
• 改变字体粗细 font-weight: bold; 如果一个元素默认地设置为bold，或者从父元素继承了粗体，可以通过 font-weight: normal; 去掉粗体样式。
• 斜体和倾斜文本
  • 设置斜体 font-style: italic; 不过，并不是所有字体都支持斜体风格。
  • 倾斜（oblique）文本也是倾斜的，但不是使用一组专门设计的倾斜字体，而是由浏览器将正常文字倾斜。 font-style: oblique;
• 使用十六进制码指定颜色：以#开头，然后指定红、绿、蓝分量，分别使用两位数字表示。如果每一组分量中两位数字都相同，可以使用简写，如#ccbb00可以缩写为#cb0，#11eeaa可以缩写为#1ea。
• 添加删除线 text-decoration: line-through; 下划线 underline; 上划线 overline;
• 如果颜色的十六进制码中每一位都相同（如#111111，#777777），这些颜色都是灰色，从深灰色到浅灰色。
• 设置行高 line-height: 16em; 即行高为字体大小的1.6倍。
• 从CSS角度看，每个元素就是一个盒子。每个盒子由一个内容区以及可选的内边距（padding）、边框（border）和外边距（margin）组成。内边距和外边距是透明的，没有颜色，也没有自己的装饰。边框可以有各种不同的宽度、颜色和样式。内边距在内容周围增加额外的空间，外边距提供元素之间的间距。元素的背景颜色会延伸到内边距下面，但不会延伸到外边距。
• 利用CSS，可以使用background-image属性为任何元素增加一个背景图像。background-image: url(图片路径不需加引号); 默认地，背景图像会重复（平铺），可以通过background-repeat: no-repeat: 来解决。repeat-x 图像只在水平方向上重复；repeat-y 图像只在垂直方向上重复；inherit 按父元素的设置来处理。另外，浏览器还会默认地把背景图像放在元素的左上角。background-position属性会设置图像的位置，可以按像素指定，也可以指定为一个百分数，或者还可以使用关键字指定，如top、left、right、bottom和center。
• 对于内边距、外边距甚至边框，CSS在每一个方向都提供了一个属性。要在左边增加内边距，可以使用padding-left属性。先统一设置四周的内边距（padding），再为左边指定一个padding-left属性，这将会覆盖之前设定的左内边距。
• 共有8种可用的边框样式（border-style），分别是solid（实线）、double（双线）、groove（槽线）、outset（外凸）、dotted（虚线）、dashed（破折线）、inset（内凹）、ridge（脊线）。
• 可以使用关键字或像素来指定边框宽度（border-width），关键字包括thin，medium，和thick。
• 指定某一边的边框 border-top-color，border-right-style，border-bottom-width
• 指定边框圆角 border-radius: 15px; 指定某一个角 border-top-left-radius: 15px; 也可以用em来指定半径大小。
• 对多个元素使用某个样式时，要使用class。但如果只有一个元素需要加样式，或者页面上只有一个元素，就应该使用id。要用id来选择一个元素，需要在id前面使用一个#字符。
• 类名要以一个字母开头，id名可以以数字或字母开头。类名和id名都可以包含字母、数字、以及_字符，但不能有空格。
• 使用多个样式表时，后面的样式表会覆盖前面样式表中的样式。
• 可以在link元素中增加media属性为不同浏览设备提供指定的样式表。media=”screen and (max-device-width: 480px)” media=”print” 查询中还可以使用min-device-width、orientation[显示方向，可以是横向(landscape)或纵向(portrait)]。
• 还可以使用@media规则直接在CSS中增加媒体查询。在CSS中，要把对所有媒体类型都通用的规则放在最后，这样就不需要重复规则了。
• IE8及以前版本不支持媒体查询。 
  max-device-width和min-device-width媒体属性更依赖于设备的实际屏幕，如果更关心浏览器的大小，可以使用max-width和min-width属性。