第七章CSS入门,第八章介绍了字体。个人感觉CSS入门的一些内容比较重要,字体的话讲的属性的值太多,容易忘记。
CSS语句的结构包括三部分:场所(如卧室)、属性(如窗帘)、样式(如蓝色)。依据CSS语言的三个部分,写CSS语句的步骤可分为:选取元素(例如p)、选取属性(background-color :) 、选择属性样式 (如red)。
p { background-color : red ; }为了实现多个html文件对css样式的多次利用,可以新建外部样式表.css文件(stylesheet)。在需要引用css文件的html文件的<head>新增<link>来链接到css文件。type= "text/css"可省略,rel = “stylesheet” 表示链接到样式表,href可以是相对链接或者完整url。<link>为void元素。
< link type = “text/css” rel ="stylesheet" href = "xxx.css">元素可以从父元素继承样式,单独元素的指定属性可以覆盖继承,如<body>中设置字体会影响整个页面)。为HTML元素增加class属性,可以将为该元素设定该类的css样式。
< p class = "classname"> //给HTML文件选定元素增加class属性 p .classname{ color : color-name ; } //创建一个类名选择器于css文件可以指定属于classname类的p元素应用该class的CSS样式。如果省略元素名,点后面是类名, 这个规则会应用到这个类的所有成员。
.classname{ color : colorname ; } //该样式会用到所有属于该class的元素一个元素可以加入多个类,多个元素以空格分隔,该元素样式以css文件中位置顺序最后的样式规则为准,即class类名先后顺序没有影响。
< p class = "greentea raspberry blueberry " >选择器样式选择指南: 是否有特定的选择器选择该元素 -> 继承情况 -> 默认值 。
验证css文件规范的W3C网站:http://jigsaw.w3.org/css-validator/ ,验证成功可以获得可爱的认证图标哈哈哈,放到自己的html页面里面,o(* ̄▽ ̄*)ブ。
字体的属性及属性值还比较多,如果不用的话很容易忘记,所以这部分没有花很多时间,匆匆过一边,记录一下主要字体属性,方便后期查阅。
body { font-family : Verdana, Geneva, Arial, sans-serif; /*候选字体列表*/ color : silver; font-weight : bold; text -decoration:underline; }常用字体格式有: TrueType字体(.ttf)、OpenType字体(.otf)、Embedded OpenType字体(.eot)、SVG字体(.svg)、web开放字体格式(.woff)。其中web开放字体格式应用较广,老旧的浏览器多采用 TrueType字体。类似@font-face的内置规则还有@import(允许导入其他CSS文件,而不是通过一个<link>链入)、@media(允许创建特定于某些媒体类型的CSS规则)。
//定义CSS内置规则 @font-face { font-family: "Emblema One"; src : url ("http://wickedlysmart.com/..../xxx.woff"), url ("http://wickedlysmart.com/..../xxx.ttf"); } //在CSS文件的选择器中使用,其中sans-serif为字体备选项 body { font-family :"Emblema One",sans-serif ; }
