css简介

一.css-网页的美容师

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

二.css语法规范

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

写在head标签中

选择器是用于指定css样式的html标签，花括号内是对该对象设置的具体样式属性和属性值以"键值对'的形式出现属性是对指定的对象设置样式属性，如字体大小，文本颜色等属性和属性值之间用英文":"分开多个"键值对"之间用英文";"进行区分 三.css基础选择器 3.1css选择器的作用

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

css做了两件事：

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

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

基础选择器是由单个选择器组成的基础选择器又包括：标签选择器 类选择器 id选择器 通配符选择器 3.3标签选择器

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

语法 

标签名 {

        属性1：属性值1；

        属性2：属性值2；

} 

 

优点

能快速为页面中同类型的标签设置统一样式。

缺点

不能设计差异化样式，只能选择全部的当前标签。 

3.4类选择器

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

语法 

.类名 {

        属性1:属性值1；

}

例如将所有red类的html元素变为红色

.red{

       color:red;

}

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

<div class="red"> 变红色</div>

总结 类选择器使用"."(英文)进行标识，后面紧跟类名(自己定义)。长名称或词组可以使用中文横线来为选择器命名。例如star—sing不用使用纯数字 中文等命名，尽量使用英文字母来表示    3.5类选择器-多类名

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

3.51多类名的使用方式

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

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

 

3.52多类名的使用场景 可以把标签相同元素的样式(共同的部分)放到一个类里面(类似封装了一个函数，提高代码复用率)

这里假设要画三个格子

不使用多类名

 使用多类名

同样的效果，但把共同的功能封装起来，提高了代码复用率

3.6 id选择器 语法

#id名 {

        属性1:属性值1

}

例如，将id为nav的元素内容设置为红色

#nav{

color:red;

}

这时候可以看到他的使用方式和class非常相似，那他们的区别是什么呢？

3.53id选择器和类选择器的区别 类选择器(class)好比人的名字，同个名字可以被多个人使用，即类似公共属性id选择器好比身份证，一个人只能有一个，即类似私有属性所以id选择器只能被调用一次类选择器在修改样式中的最多，id选择器一般用于页面唯一性的元素上，和JavaScript搭配使用 3.7通配符选择器

在css中，通配符选择器使用"*"定义，它表示选取页面中所有元素(标签)。

语法 

* {

        属性1:属性值1；

}

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

* {

        margin:0;

        padding:0;

} 

3.8基础选择器总结 基础选择器作用特点使用情况用法标签选择器可以选出所有相同的标签，比如p不能差异化选择较多p{color:red}类选择器可以选出1个或者多个标签可以根据需求选择非常多

.nav{color:red;

}

id选择器

一次只能选择1个标签id属性在每个HTML文档出现一次一般和js搭配#nav{color:red;}通配符选择器选择所有标签选择的太多，有部分不需要特殊情况使用*{color:red;}