学习前端的第三天2020-10-14

今天是我学习web前端的第三天，也是学习CSS的第一天~
首先老师带我们了解了什么是CSS、使用CSS的目的和CSS语法规范。
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称,有时我们也会称之为 CSS 样式表或级联样式表。
使用CSS的主要目的就是为了美化我们的HTML页面，使我们的页面更加好看。
CSS的结构分为两部分，分别是选择器和样式说明。它的语法格式如下：
其中要注意：①属性和属性值以“键值对”的形式出现；②属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等；③属性和属性值之间用英文“:”分开；④多个“键值对”之间用英文“;”进行区分。
接下来我们又学习了选择器，选择器的作用就是根据不同需求把对应的标签选择出来从而修改样式。选择器分为两种，第一种是基础选择器，第二种是复合选择器。
其中基础选择器又分为标签选择器、类选择器、id选择器和通配符选择器四种，我们最常用的是类选择器。
标签选择器是用HTML标签名称作为选择器，作用是把把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。它的优点是能快速为页面中同类型的标签统一设置样式，缺点是不能设计差异化样式，只能选择全部的当前标签。
类选择器用 “.Class” 作为选择器，特点是可以同时选择一个或多个标签，并且可以重复使用，class属性还可以拥有多个类名，不过多个类名中间必须用空格隔开，此时使用这个class的标签就可以分别具有这些类名的样式。
id选择器是用 "#Id"作为选择器，它的特点是每个HTML文档中只能出现一次且只能选择一个标签。
通配符选择器是用*表示页面内的所有元素，统一修改样式，我们只会在某些特殊情况时才会使用。
CSS的font属性用于定义文字的字体、大小、粗细和文字样式，其中font-family设置字体，Chrome浏览器默认微软雅黑；font-size设置文字大小，Chrome浏览器默认大小为16px，；font-weight设置文字粗细，值有100、200、300、400、500、600、700、800、900等九个规格，其中400是标准粗细normal，700是加粗blod；font-style用来设置字体的倾斜，不过把字体设置为倾斜不常用，我们在开发中经常用它来把倾斜的字体变正。
font属性还可以写成复合形式，可以有效的节约代码，不过顺序是固定的，只能是font： font-style font-weight font-size/line-height font-family。需要注意的是style、weight、line-height不需要时可不写，但是size和family必须要写，否则这个复合形式不起作用。
文本颜色属性是color，在实际开发中我们经常用十六进制来选择颜色。
文本对齐：text-align，可以设置文本水平方向上的对齐方式，left为左对齐，center为居中对齐，right为右对齐。不过这个属性只适用于独占一行的标签，例如<hn></hn>、<div></div>等。
文本装饰：text-decoration，可以设置文本下划线、上划线、删除线等，不过我们开发中最常用的是利用它清除下划线，比较常用的是添加下划线，上划线和删除线很少用。属性值none是默认没有下划线，underline是下划线，overline是上划线，line-through是删除线。
文本缩进：text-indent，它的作用是将段落首行进行缩进，一般我们使用时属性值为2em，em是当前文本一个文字大小的距离。仅对独占一行的元素生效。（TIP：&nbsp是1/2个中文宽度的空格，&emsp是一个中文宽度的空格）
行间距：line-height，用于设置行间间隔，控制文字行与行之间的距离。行间距由三部分构成，分别是上间距、文字高度和下间距。
最后我们学习了CSS的引用方式，一共有三种，分别是行内样式表、内部样式表和外部样式表。
行内样式表就是直接在HTML标签内写样式属性，这种方法不能实现结构与样式分离，且只针对一个标签生效，所以我们不推荐使用。
内部样式表理论上可以放在HTML的任意位置，不过推荐放在</head>之上，它可以通过不同的选择器来为HTML标签改变各种样式。
外部样式表是在外部新建立一个后缀名为.css的文件，在里面写好样式后link到HTML文件中，此方式真正实现了结构和样式分离。
今天我们学习了css的这部分相关内容，看起来很复杂繁琐，但是其实并没有多少东西，我们要循序渐进的学习，慢慢提升自己的能力！
晚安~