HTML第三课

一、CSS核心基础
1、CSS样式规则
格式：
选择器{属性1:属性1;属性:属性值2;}属性和属性值之间用英文“:”连接，多个“键对值”之间用用英文“;”进行

• CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。
• 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以隔开，但是，为了增加新样式最好保留。
• 如果属性的值有多个单词组成且中间包括空格，则必须为这个属性值加上英文状态下的引号。
• 在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释，例如：
  /* 这是注释，不会显示在浏览器窗口当中 */
• 在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此，可以用空格键、Tab键，enter键等样式代码进行排版，即所谓的格式化CSS代码，这样可以提高代码的可读性。
  2、引入CSS样式表

• 行内式
  也成为内联样式，是通过标记的style属性来设置元素的设置，格式：
  < 标记名 style =“属性1:属性值1;” >
• 内嵌式
  内嵌式是将CSS代码集中写在HTML文档的< head> 头部标记中，并且用< style >标记定义，格式 ：
  < head >
  < style type=“text/css”>
  < /style >
  < head >
• 链入式
  是将所有的样式放在一个或多个以css. 为扩展名的外部样式表文件中，通过< link/>标记将外部样式表文件链接到HTML文档中，格式：
  < head>
  < linlk href=“CSS文件的路径” type=“text/css” rel=“stylesheet” />
  < head/>
  该语法中，< link />标记需要放在< head>头部标记中，并且必须指定< link/>标记的三个属性。
  （1） href：定义所链接外部样式表文件的URL ，可以是相对路径，也可以是绝对路径。
  （2） type：定义所链接文档的类型，在这里需要指定为text/css，表示链接的外部文件为CSS样式表。
  （3） rel：定义当前文档与被链接文档之间的关系，在这里需要指定为stylesheet，表示链接的文档是一个样式表文档。
• 导入式
  与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用style标记，并在< style>标记内的开头处使用@import语句，即可导入外部样式文件。格式：
  < style type=“text/css”>
  @import url(css文件路径);或@import “css文件路径”;
  /再此还可以存放其他CSS样式/
  < style />
  3、CSS基础选择器
• 标记选择器
  是指用HTML标记名称作为选择器，按照标记名分类，为页面中某一段标记指定统一的CSS样式。格式：
  标记名{属性1:属性值1;属性2:属性值2;}
• 类选择器
  类选择器使用“.”（英文点号）进行标识，后面紧跟类名。格式：
  .类名{属性1:属性值1;属性2:属性值2:}
  注：类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。
• id选择器
  id选择器使用 # 进行标识。后面紧跟id名。格式：
  #id{名属性1:属性值1;属性2:属性值2:}
• 通配符选择器
  通配符选择器用 * 表示，它是所有选择器中作用范围最关的，能匹配页面中所有元素。格式：
  *{名属性1:属性值1;属性2:属性值2:}
  二、CSS文本相关样式
  1、CSS字体样式属性
  • font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。
• font-family:字体
  用于设置字体
• font-weight：字体粗细
  定义字体的粗细
• font-variant：变体
  用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效。
  （1）normal：默认值，浏览器会显示标准的字体。
  （2）small-caps：浏览器会显示小型大写字体，及所有的小写字母均会转换为大写。但是，所有使用小型大写字体的字母与其与文本相比，其字体尺寸更小。
• font-style：字体风格
• 用于设置字体风格，如斜体、倾斜等。
  （1）normal：默认值
  （2）italic：倾斜字体
• font：综合设置字体样式
  格式：选择器{font: font-style font-variant font-weight font-size/line-height
  font-family;}
  2、CSS文本外观属性
• color：文本颜色
  用于定义文本颜色，方式有三种
  （1）预定义的颜色值，如red,green,blue等。
  （2）十六进制，如#FF0000等
  （3）RGB代码，如红色可以表示为rgb（255，0，0）或rgb（100%，0%，0%）
• letter-specing：字间距
  用于定义字间距，就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值。
• word-spacing：单词间距
  定义单词之间的间距，对中文字符无用。
• line-height：行间距
  用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
• text-traansform：文本转换
  控制英文字符的大小写
• text-decoration：文本装饰
  用于设置文本的上画线、下划线、删除线等装饰效果。
• text-align：水平对齐方式
  用于是指文本内容的水平对齐。
• text-indent：首行缩进
  设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数，或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。
• white-space：空白符处理
  设置空白符的处理方式。