你的位置:首页 > 网页设计

[网页设计]《Head First HTMLCSS》笔记


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