web前端学习——DAY4-CSS-样式、font字体样式规则

web前端学习——DAY4-CSS

CSS目的：让网页的结构和样式分离！
CSS(Cascading Style Sheets)层叠样式表
样式写在head和/head之间
css注释写法：/* 注释内容 */快捷键：ctrl+shift+/
注意事项：
-1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
-2.属性和属性值以“键值对”的形式出现。
-3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
-4.属性和属性值之间用英文“:”连接。
-5.多个“键值对”之间用英文“;”进行区分。
eg：

1.字体样式规则
（1）字号大小

最常用使用相对长度单位，推荐px（像素）。段落当中基本上是14px，尽量用偶数。
（2）font-family:字体
p{ font-family:“微软雅黑”;}
注意：
-1. 现在网页中普遍使用14px+。
-2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
-3. 各种字体之间必须使用英文状态下的逗号隔开。
-4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
-5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
-6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

（3）.font-weight:字体粗细
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
提示：数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。
eg:

(4)font-style字体样式
normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

eg：让斜体变得不倾斜。

（5）font综合字体样式
font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

2.利用chrome排查错误
按f12，检查，左边为html，右边是css。

提示：ctrl+滚轮 可以 放大开发者工具代码大小

3.选择器（重点！！！）
（1）标签选择器（元素选择器）
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

之前学的都是标签选择器。
（2）类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名”  即可。

举个栗子：

上面声明，下面引用。
声明命名规范：

注意：
-1.长名称或词组可以使用中横线来为选择器命名。
-2.不建议使用“_”下划线来命名CSS选择器。
-3.不要纯数字、中文等命名， 尽量使用英文字母来表示。

废话：每天都有一点点点点点小进步！开森！！！