css中的一些基础知识-01

css引入

外部引入:
1.一个css可以控制多个html页面.
2.方便改版和维护.
3.有效利用浏览器的缓存,实现加载更快.
4.相对于整站来说,代码更少,更加方便于分工合作.
5.相对于单页面来说,有垃圾代码,而且link标签中的href会增加服务器的压力.
6.整站,访问量不是那么大的网页中

头部引入特点:
1.速度快(网络原因),没有请求压力.
2.相对于外部引入来说代码更少.
3.不宜改版和维护.
4.代码很乱, 不利于跟前后台的沟通.
5.使用场景:高访问量的网页(首页,活动页)

优先级:外部引入-头部-标签内
范围越小优先级越高.

标签引入特点:
1.优先级高
2.多余代码多
3.不利于维护
使用场景:跟js和后台生成

css选择器

一.标签名选择器
最基本的选择器,其样式是标签名+{}在大括号中写标签的样式改变
ps:
div{
/*标签名选择器*/
color: red;
}

二.class选择器
常用的选择器,其用法如下
<div class="g">我是div4</div>
一个div的标签 我给其加了一个class=“g”,这是这个”g"其实就相当于一个标识,我可以通过我这个标识来修改被标记过的标签的样式
然后在head的style中加入
.g{
color: green;
}
即可修改标签的样式

三.id选择器
优先级比class选择器高,可以在被class选择器修改过样式的标签进行修改和改变
<div class="g" id="yellow">我是div2</div>
#yellow{
color: yellow;
}
这样就完成了修改

四.群组选择器
顾名思义,对一系列标签进行样式的修改
<p>我是p</p>
<div>我是div</div>
<a href="###">我是a1</a>
<a href="###" class="red">我是a2</a>
<a href="###">我是a3</a>
<a href="###" class="red">我是a4</a>
这是很多个标签,那么在head中的style怎么进行修改呢,需要进行如下操作
div,p,.red{
color: red;
}
如上就对标记的标签进行了样式的修改

五.后代/派生选择器
如下有一些标签我想修改div标签中的a标签的样式
<div>
<a href="###">我是div1</a>
<a href="###">我是div2</a>
<a href="###">我是div3</a>
<a href="###">我是div4</a>
<a href="###">我是div5</a>
<p>
<a href="###" class="green">里面的a</a>
</p>
</div>
我做了如下操作
div a{
/*div里面的所有a标签*/
/*建议尽量少的使用*/
color: red;
}
但是我们尽量不要这么用因为他会修改div标签下的所有a标签的样式,那我们需要怎么使用呢?  如下所见
div a.green{
/*组合选择器*/
/*css2*/
color: blue;
}

css命名规范:
1.class/id的命名必须是英文单词和数字
2.class/id的首字母不能是数字
3.如果是多个单词用_连接