网页设计与制作（HTML+CSS)第三课

       3.1CSS核心基础：

3.1.1CSS样式规则：
格式：选择器{属性1：属性值； 属性2:属性值2； 属性3：属性值3；}
选择器严格区分大小写，属性和值不区分大小写。

*如果属性的值有多个单词组成且中间包含空格，则必须为这个属性值加上英文状态的引号
*在CSS代码中空格是不被解析的
3.1.2引用CSS样式表：
1.行内式：也称为内联样式，是通过标记的style属性来设置元素的样式，基本语法如下：< 标记名 style=“属性1：属性值1； 属性2：属性值2； 属性3:属性值3；”>内容< /标记名>
行内式只对所在的标记及嵌套在其中的子标记起作用。
没有做到结构与表现的分离。只有在样式规则较少且只在该元素上使用一次，或则需要临时修改某个样式规则时使用。
2.内嵌式：
是将CSS代码集中写在HTML文档的< head >头部标记中，并且用< style >标记定义，基本语法如下：
< head>
< style type=“text/css”>
选择器 {属性1：属性值1； 属性2：属性值2； 属性3：属性值3；}
< /style>
< /head>
< style>标记一般位于< head>标记中< title>标记后，也可以放在HTML的任何地方。必须设置type的属性值为text/css
3.链入式：
是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过< link/>标记将外部样式表文件链接到HTML文档中。基本语法格式如下：
< head>
< link herf="CSSd=“文件的路径” type=“text/css” rel=“stylesheet” />
< /head>
< link />标记需要放在< head>头部标记中，并且必须指定< link />标记的3个属性：
herf:定义所链接外部样式表文件URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为text/css,表示链接的外部文件为CSS样式表。
rel：定义当前文档与被连接文档之间的关系，在这里需要指定为stylesheet，表示被链接的文档是一个样式表文件。
4.导入式：
对HTML头部文档应用style标记，基本语法格式：
< style type=“text/css” >
@import url(css文件路径）；或 @import “css文件路径”;
< /style>
< link />标记引用CSS样式表将同时被加载，而@import引用CSS样式表会等到页面全部下载完再被加载。 常用链入式
3.1.3CSS基础选择器
1.标记选择器：
基本语法格式：
标记名{属性1：属性值1； 属性2：属性值2； 属性3：属性值3；}
所有的HTML标记名都可以作为标记选择器。优点：能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式
2.类选择器
基本语法格式如下：
.类名{属性1：属性值1； 属性2：属性值2； 属性3：属性值3；}
类名即为HTML元素的class属性值。优势：可以为元素对象定义单独或相同的样式。
3. id选择器：
基本语法格式：
#id名{属性1：属性值1； 属性2：属性值2； 属性：属性值3；}
id名即为HTML元素的id属性值。元素的id值是唯一的，只能对应于文档中某一个具体的元素。
4.通配符选择器
所有选择器中作用范围最广的，能匹配页面中所有的元素。基本语法格式如下：
*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
初始化应用较多。
3.2CSS文本相关样式
3.2.1CSS字体样式属性
1.font-size:字体大小

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用，推荐使用

绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

2.font-family：字体：
基本语法格式：
p{ font-family:“微软雅黑”；}
*中文字体需要加英文状态下的引号，英文字体一般不需要
*如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或者双引号。
3.font-weight:字体粗细

值	描述
normal（400）	默认值，定义标准的字符
bold(700)	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900(100的倍数)	定义由细到粗的字符。

4.font-variant:字体（仅对英文字符有效）
*normal:默认值，浏览器会显示标准的字体
*small-caps:浏览器会显示小型大写的字体，及所有的小写字母均会转换为大写。但是，所有使用小型大写的字母与其他文本相比，其字体尺寸更小。
5.font-style：字体风格
*normal：默认值，浏览器会显示标准的字体样式。
*italic：浏览器会显示斜体的字体样式
*oblique：浏览器会显示倾斜的字体样式
常用italic 显示效果没有本质区别
6.font：综合设置字体样式
基本语法格式：
选择器{font·：font-style font-variant font-weight font-size/line-height font-family；}
使用font属性时必须按照上面语法格式中的顺序书写。
3.3.2 CSS文本外观属性
1.color：颜色
*预定义的颜色。red green blue
*十六进制，#FF0000 #FF6600 #29D794
*RGB代码，红色：rgb(255,0,0)或rgb(100%,0%,0%)
2.letter-spacing:字见距(中英文所有字符之间)
允许使用负值，默认为normal
3.word-spacing：单词间距(对中文无效）
允许使用负值，默认为normal
4.line-height：行间距（最多的是像素px)
像素px
相对值em
百分比%
5.text-transform：文本转换
控制英文字符的大小
*none：默认值，不转换
*capitalize:首字母大写
*uppercase：全部字符转换为大写
*lowercase：全部字符转换为小写
6.text-decoration：文本装饰（可以同时使用）
*none：没有装饰（正常文本默认值）
*underline:下划线
*overline：上划线
*line-through：删除线
7.text-align:水平对齐方式
*left
*right
*center
8.text-indent：首行缩进（建议em作为设置单位）可以使用负值
*不同单位的数值
*em字符宽度的倍数
*相对于浏览器窗口宽度的百分比%
9.while-space：空白符处理
*normal：常规(默认值)，文本中的空格、空行无效，满行（到达区域边界)后自动换行
*pre：预格式化，按文档的书写格式保留空格、空行原样显示
*nowrap:空格空行无效，强制文本不能换行，除非遇到换行标记< br/>。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动滚条