有经验的合肥网站建设深圳高端seo公司助力企业
一.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;} |