新人打卡地点（css简介，思维导图）

css的主要场景就是美化网页，布局页面的

一，css的局限性

说起html，这其实是个非常单纯的家伙，他只关注内容的语义。比如<h1>表明这是一个大标题，<p>表明这是一个段落，<img>表明这儿有一个图片，<a>表示此处有个链接。
很早的时候，世界上网站虽然很多，但是他们都有一个共同的特点:丑
虽然html可以简单的样式，但是带来的是无尽的臃肿和繁琐.........

二，css-网页的美容师

css是层香样式表(Cascading Style Sheets）的简称。

有时我们也会称之为css样式表或级联样式表。
css也是一种标记语言
css主要用于设置html页面中的文本内容(字体，大小，对齐方式等)图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
css让我们的网页更加丰富多彩，布局更加灵简单理解:活自如。css可以美化html，让html更漂亮，让页面布局更简单，

总结：

1.html主要做结构，显示元素内容
2.css美化html，布局网页。
3.css最大价值:由html专注去做结构呈现，样式交给css，即结构(html)与样式(css)相分离。

 三，css语法规范

1、使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。
2，CSS 规则由两个主要的部分构成:这选择器以及一条或多条声明。

<style>
        h1{
            color: #e71a42;
            font-size: 20px;
        }
</style>

• css选择器:后代选择器用空格表示，子代选择器用>表示，相邻兄弟选择器用+分隔，普通兄弟用~分隔

• 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式

• 属性和属性值以“键值对”的形式出现

• 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等

• 属性和属性值之间用英文“:”分开

• 多个“键值对”之间用英文“;”进行区分 

所有的样式，都包含在<style>标签内，表示是样式表。<style>一般写到</head>上方

<style>
        h1{
            color: #e71a42; 字体颜色
            font-size: 20px;  字体大小
        }
</style>

四，css代码风格

(1)紧凑格式

      h1{
            color: #e71a42; 字体颜色font-size: 20px;  字体大小
        }

(2)展开格式

      h1{
            color: #e71a42; 字体颜色
            font-size: 20px;  字体大小
        }

自处强烈推荐第二种格式，因为更直观。 

2.样式大小写风格

(1)小写格式

      h1{
            color: #e71a42; 字体颜色
        }

(2)大写格式

      H1{
            color: #e71a42; 字体颜色
        }

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

3、样式空格风格

属性值前面，冒号后面，保留一个空格选择器(标签)和大括号中间保留空格

五，CSS基础选择器

1.CSS选择器的作用

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

找到所有的 h1 标签。选择器(选对人)
设置这些标签的样式，比如颜色为红色(做对事）。

 2.选择器分类

基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器

3.标签选择器

标签选择器(元素选择器)是指用 HTML 标签名称作为选择器按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

语法：

 

作用：

标签选择器(元素选择器)是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

4. 类选择器

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

语法：

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

<div class="类名">变红色</div>

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

2、类选择器在 HTML 中以 class 属性表示，在CSS 中，类选择器以一个点“.”号显示

3、类选择器使用“.”(英文点号)进行标识，后面紧跟类名(自定义，我们自己命名的)

4、可以理解为给这个标签起了一个名字，来表示。

5、长名称或词组可以使用中横线来为选择器命名。

6、不要使用纯数字、中文等命名，尽量使用英文字母来表示。

7、命名要有意义，尽量使别人一眼就知道这个类名的目的。

8、命名规范:见附件(Web 前端开发规范手册.doc)

 5.多类名选择器

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。
简单理解就是一个标签有多个名字.

 多类名的具体使用:

<div class="red font20">亚瑟</div>

注意:
1、在标签class 属性中写 多个类名
2、多个类名中间必须用空格分开
3、这个标签就可以分别具有这些类名的样式 

 6.id选择器

 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样渝式。

 HTML 元素以 id 属性来设置 id 选择器,，CSS中id选择器以“#”来定义。

语法:

 

注意:id 属性只能在每个 HTML 文档中出现一次
id选择器和类选择器的区别:
1、类选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
2、id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
3、id 选择器和类选择器最大的不同在于使用次数上
4、类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。 

7.通配符选择器

语法:

通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期讲)

8.选择器总结

基础选择器	作用	特点	使用情况	方法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p{color，red}
类选择器	可以选出一个或者多个标签	可以根据需求选择	非常多	.nav{color:red}
id选择器	一次只能选择一个标签	ID属性只能在每个html文档中出现一次	一般和js搭配	#nav{color，red}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况下使用	*{color，red}

 选择器权重
id=100;class=10;标签=1;*(通配符)=0
100+10+1+0=111