一、css的三种引入方式
1.css�行间样式:写在标签肩括号里面
优点:不会额外的产生请求
缺点:
1.容易产生重复的代码,造成文档体积变大
2.不利于维护
3.不符合结构与样式分离的规范
综上所述:不建议使用行间样式
2.CSS内部样式:在html文档中开辟一个书写css语句的区域
内部样式的优缺点以及适用情况:
1.不会产生额外的请求
2.初步实现结构与样式的分离
3.代码复用不方便
4.适合单页面网站应用
3.外部引入CSS
优点:
1.利于后期维护
2.可以重复使用
3.完成实现结构与样式的分离
缺点:
会产生额外的请求(但是后期我们会借助工具抹平这个缺点)
二.css基础选择器
1.基础选择器-通配选择器:作用于所有标签,无论你这个标签有没有写,有没有在文档当中出现
基本语法结构:选择器{
CSS语句;
CSS语句;
}
在编写网页时,写上以下代码,就能把网页内所有标签默认的margin和padding去掉,虽然用起来很方便,但由于它要请求所有标签,会减慢网页加载速度,有利有弊,用之前可以先思考一下哪种最有利。
*{
margin: 0;
padding: 0;
}
2.基础选择器-标签名选择器:作用于一类标签,方式是通过标签名称,使用场景:重置某类标签样式
实例代码:div{
width: 200px;
height: 40px;
background-color: black;
}
标签选择器一般应用于在body里设置整个网页基本样式;如背景颜色:background-color,网页整体字体大小: font-size, 字体样式: font-family, margin: 0;等...
3.基础选择器-群组选择器:选择器1,选择器2,...{}
使用场景:常用于优化代码,减少文档体积
4.基础选择器-类选择器:.类名称{}
使用场景:可以应付各种场景,是最常用的一种选择器。class名可以多个,多个class名用空格隔开。主要用于具有相同样式的
5.基础选择器-后代选择器:选择器1 选择器2 选择器3..{}
样式作用于最后一个选择器,前面一个选择器只是帮助我们定位