公输的前端学习记录day6（CSS）

CSS层叠样式表一

目录：

1. CSS简介
2. CSS基础选择器
3. CSS字体属性
4. css文本属性
5. css的引入方式
6. 综合案例
7. Chrome调试工具

一：css简介

 1.1HTML的局限性

HTML只关注内容的语义。主要做结构的，显示元素内容。

1.2css-网页的美容师

css是层叠样式表（Cascading Style Sheets ）的简称，有时也称css样式表或级联样式表。

css也是一种标记语言。

css主要用于设置HTML页面中的文本内容（字体大小对齐方式等），图片的外形（宽高，边框样式边距等）以及版面的布局和外观显示样式。

简单来说：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。

总结：css的最大价值：由HTML专注去做结构呈现，样式交给css，即结构（HTML）与样式（CSS）相分离。

1.3css语法规范

css规则由两个主要部分构成：选择器以及一条或多条声明。

在学习过程中一般在＜head＞＜/head＞中添加一对＜style＞＜/style＞，css语言写在＜style＞中。但在实际开发中，常使用外链式，另写一个css文件，然后通过link标签将两个文件联系在一起。

如给标题（p标签内的字体）改成红色，字体修改成12像素

p ｛

 color: red；

 font-size: 12px；

｝

1.4css代码风格

不是强制规范，而是符合实际开发的书写方式。

   最好使用展开式风格，一行一个属性，更直观。

   样式选择器 属性名，属性值关键字全部使用小写字母，特殊情况除外。

   空格规范：在属性值前，冒号后边要保留一个空格，选择器（标签）和大括号中间保留空格。

二：css基础选择器

2.1  css选择器的作用

选择目标标签用的。

2.2 选择器分为基础选择器和复合选择器两个大类。

基础选择器由单个选择器组成。

基础选择器又包括：标签选择器，类选择器，id选择器和通配符选择器。

2.3标签选择器

 指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式。

2.4类选择器（口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用）

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以用类选择器。

以点开头，如将所有拥有red类的HTML元素均为红色

.red ｛

 color: red;

｝

结构需要用class属性来调用class类的意思。

＜div class='red' ＞变红色＜/div＞

注意：类选择器用英文点号“.”标识，后面紧跟类名（类名自定义，不能用标签名）。

长名称或词组可以使用中横线来为选择器命名，不要使用纯数字，中文等命名，尽量使用英文字母来表示。命名要有意义，尽量让别人一眼看出来这个类名的目的，最好用英文单词，用拼音的话最好用全拼，命名规范，在web前端开发规范手册有详细的各类别命名。

我们可以给一个标签指定多个类名，从而达到更多的选择目的。就是一个标签多个名字。

多类名使用方式：

如＜div class="red font20 "＞亚瑟＜/div＞

在标签class属性中写多个类名，多个类名之间必须使用空格分开。

节省css代码，同时便于修改。

2.5 id选择器（样式#定义，结构id调用，只能调用一次，别人切勿使用）

id，选择器可以为标有特定id的HTML元素指定特定的样式，HTML元素以id属性来设置id选择器，css中id选择器以“#”来定义。

语法：

#id名 ｛

  属性1： 属性值1；

  。。。

｝

区别：

类选择器（class），可一人多名，一名多人

id选择器好比人的身份证号码，唯一的，不能重复

两者最大不同在于使用次数上，

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

2.6 通配符选择器

 使用“*”定义，表示选取页面中所有元素（标签）。

语法

* ｛

 属性： 属性值；

｝

通配符选择器不需要调用，自动给所有的元素使用样式

三：css字体属性

 3.1 字体系列

使用font-family定义文本的字体系列。

p ｛font-family： “微软雅黑”；｝

提倡英文写法，兼容性更好，“Microsoft Yahei”

可以下多个字体，一个字体多个单词用单引号包含。多个字体名之间用逗号。尽量使用系统默认自带字体，保证任何用户的浏览器都能正确显示。

一般直接给＜body＞加字体。

3.2 字体大小 font-size

谷歌默认16px，不同浏览器可能默认字号不一样，尽量给一个明确的值，不要默认大小。

标题标签比较特殊，需要单独指定文字大小。千万记得加px；

如 p ｛

 font-size： 20px；

｝

3.3 粗细 font-weight 

 normal：正常字体，相当于number：400

bold：粗体，number：700

bolder 特粗体

lighter 细体

这个数字不用加单位，700等价于bold，直接写700；

3.4文字样式

font-style

值：normal默认值，显示标准字体样式

italic斜体

注意：平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不斜字体。

3.5 字体复合属性

/* font： font-style font-weight font-size/line-height font-family；*/

font： italic 700 16px “Microsoft yahei”有严格顺序。不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性将不起作用。

四：css文本属性

   css text（文本）属性可定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等。

4.1 文本颜色（text-color）

  属性值：

• 预定义的颜色值，red ，green，blue等
• 十六进制：#ff0000，#ff6600，#29D794
• RGB代码：rgb（255，0，0）或rgb（100%，0%，0%）

十六进制用的最多，通常使用ps的吸墨器吸取颜色。

4.2 对齐文本（text-align）

 设置元素内文本内容的水平对齐方式。

属性值：left（左对齐默认）

right（右对齐）center（居中）

4.3 装饰文本（text-decoration）

加下划线，删除线，上划线等。

none 默认，没有装饰线

underline下划线，链接a自带下划线（常用）

overline上划线（几乎不用）

 line-through删除线（不常用）

最常用：取消a的默认下划线

a ｛

  text-decoration： none；

｝

4.4 文本缩进（text-indent）

指定文本的第一行缩进，通常是讲段落首行缩进。

如：

p ｛

  text-indent： 20px；

｝

或

p ｛

text-indent：2em；

｝ em是一个相对单位，就是当前元素（font-size）1个文字的大小

4.5 行间距（line-height）（行高）

一个完整的行高由：上间距，文本高度和下间距三部分组成。