黑马前端入门学习笔记Day3

CSS美化网页，布局页面

1. HTML的局限性：主要做结构，显示元素内容；只关注内容的语义

2. CSS是一种标记语言，用于美化HTML；由选择器（HTML标签）和声明组成 

选择器{属性1 : 值1;  属性2 : 值2}

3. CSS代码风格：展开式书写，提倡小写字母，冒号后保留一个空格，选择器和大括号中间保留空格

4. 选择器：基础选择器和复合选择器

基础选择器

① 标签选择器，HTML标签

② 类选择器   .类名 {属性： 属性值}   可单独选一个或某几个标签，谁使用谁调用，在标签中写上 class="类名"；多类名使用，类名之间用空格隔开；

③ id选择器   #id名 {属性1: 属性值1;}   HTML元素用id属性来选择id选择器，在标签（唯一）中写上  id="id名"，id选择器只能调用一次；

注：类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

④ 通配符选择器  * {属性1: 属性值1;}  选取页面中所有元素（标签）。

5. 字体属性font

字体系列 font-family

① 各种字体之间必须使用英文状态下的逗号隔开；

② 一般情况下，如果有空格隔开的多个单词组成的字体，加引号；

③ 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示；

④ 最常见的几个字体：body {font-family: 'Microsoft Yahei',tahoma,arial,'Hiragion Sans GB';}

字体大小font-size。

① px(像素)大小是网页最常用的单位；

② 谷歌浏览器默认16px；

③ 不同的浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小；

④ 可以给body指定整个页面文字的大小。

字体粗细 font-weight

① normal（400）不加粗；

② bold（700）加粗。

文字样式font-style（平时很少用，反而会给斜体标签em，i改为不倾斜字体）

① normal 默认值

② italic 斜体

复合属性：font: font-style  font-weight  font-size/line-height font-family;  不能更换顺序，属性之间用空格隔开；必须保留font-size和font-family（否则font不起作用），其他属性可以省；

6. 文本属性

① 文本颜色 color；

② 对齐文本 text-align  设置元素内文本内容水平对齐，left(默认)，center，right；

③ 装饰文本 text-decoration  文本修饰，none(默认，没有装饰线)，underline(下划线，a自带下划线)；

④ 文本缩进 text-indent   文本段落首行缩进，单位px或em(相对单位，当前1个文字的大小)；

⑤ 行间距 line-height

7. CSS引入方式

① 内部样式表：写在html标签内部，单独放在<style>标签中；

② 行内样式表：在元素标签内部的style属性中设置；

③ 外部样式表：单独写到CSS文件中，在引入到HTML页面，通过<link>标签（嵌套在head标签中）中属性href="CSS文件路径"，其中rel="stylesheet"表示被链接的文档是一个样式表文件；

8. Chrome调试工具

① Ctrl+滚轮可以放大开发者工具代码的大小；

② 右键点击检查，或者F12键，可查看HTML元素结构，右边是CSS样式；CSS样式可改动数值和查看颜色；

③ ctrl+0复原浏览器大小；

④ 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误；

⑤ 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。