css引入方式
1.行内样式(内联样式)仅做了解 原因是因为把html和css都写在一行上了,比较乱,不好二次修改 优点:快速直接对一个标签修饰 缺点:结构样式不分离,不易维护,代码复用不强
2.内部样式 书写在html页面中的 适合案例书写** 优点** : 简化页面结构, 做到了一部分的结构样式分离; 缺点:没有充分做到结构样式分离,还是在一个文件中,代码过多,操作不易
3.外部样式 新建一个css文件,把html文件和css文件产生关联 适合长页面或者整站开发通过 link标签引入
<link rel="stylesheet" href="路径">
链接一个小图标
<link rel="icon" href="图片路径">
link和import之间的区别
1:语法不同 link是HTML标签的语法 import是css的语法
2:加载顺序不同 link引入的css文件,会把css和html结构一起进行加载,而用import引入的css文件,是会等下面的html结构加载完毕之后再回去加载css,这样的加载方式,在网速比较慢的时候,会出现闪屏
3:浏览器兼容上,link是没有兼容问题,import这样的方式引入css在一些低版本的浏览器上是不支持的
4:js中操作dom修改样式的时候,link可以被操作,import不行
优先级和权重
多个样式表同时使用,当样式发生冲突的时候,语法使用位置的优先级:
行内样式>内部样式>外部样式
行内样式规定了权重是1000 而内部和外部样式{}前面的是类型选择器权重是1 又因为样式遵循的原则:就近原则,根据代码的执行顺序,谁在下面实现谁的样式效果所以 行>内>外
以上的结论跟CSS的层叠(覆盖)性有关系
CSS的层叠性规则规定了
如果对同一个标签,设置一样的CSS属性的时候,会发生冲突,解析规则遵循
1:如果权重(特定性)是不一样的,那么解析的规则是高权重的样式覆盖低权重的样式
2:如果权重是一样的,那么解析的规则就是就近原则
权重是浏览器衡量一段css代码冲突的时候,在浏览器中占比的参考值,类似人的体重
css规定了,行内样式的权重是1000 其他样式表内的权重看{}前面的选择器
标签选择器(元素选择器/类型选择器) 权重值是0001 ;类选择器权重是0010 id选择器权重是0100 !import把某样式权重添加到最大
不同的选择器修饰同一个元素的时候, 遵循的是权重值相加的情况
#box ul li a .cur {color:red;}
#box li .cur {color:green;}
#box ul li a.cur 权重是 100+1+1+1+10 = 113
#box li .cur 权重是 100+1+10 = 111
类选择器
起类名注意:
1)不能以数字开头;
2)不要使用汉字;
3)不要出现特殊符号;
4)可以使用字母数字下划线连接符配合使用;
5)建议使用小写字母;
6)推荐使用语义化命名,做到见名知意;
7)可以使用驼峰命名法
类名可以出现重复的,相同的样式使用同一个类名即可
多类名使用注意事项:<div class="box1 box2"></div> 多个类名共用一个class多个类名之间使用空格隔开
注:两个类选择器同时使用的时候, 后面的修饰会把前面的修饰覆盖掉, 因为代码从上向下执行, 后面的代码覆盖前面的代码(就近原则)
id选择器
用id进行区分 id只能有1个名字 不能用多个名字,但是改名字可以重复使用(仅限css阶段)
#bobo{样式规则}
类选择器和id选择器的使用场景想要区分多个相同的标签的时候
通配符选择器
{margin:0;padding:0}
!主要作用:取消元素自带的内边距和外边距
但是有些标签没有间距也会执行该代码(权重为0)
群组选择器
把相同样式的选择器修饰放在一起,起到节约代码的作用,降低代码的重复率
基本语法:
选择器1,选择器2,选择器3{样式规则}
层次选择器
后代(包含)选择器
使用场景:想要修改某个父元素内部所有的子元素(包括儿子,孙子,重子等)的时候
基本语法:
选择器1 选择器2{样式规则}
ul li{
border: 2px solid gray;
}
子代选择器
使用场景:想要修改某个父元素内部所有的儿子元素的时候
基本语法:
选择器1>选择器2{样式规则}
ul>li>ol>li{
border: 2px solid red;
}
相邻选择器
使用场景: 想要修改某个元素1后面紧挨着的某个元素2 后面的 紧挨着
语法: 某某1+某某2{}
.box+.box1{
background-color: red;
}修改的是类名为box1的样式(必须是兄弟)
毗邻选择器
匹配的是当前元素后面所有符合条件的兄弟元素 后面的 所有的
基本语法:
选择器1~选择器2{}
.box1~p{
background-color: gold;
}修改的是 类名为box1的元素后面的所有兄弟元素(即box1后面的所有p标签)
伪类选择器
伪类代表的是, 元素本身没有对应的样式, 需要通过鼠标事件等行为触发之后才会出现对应的效果 (权重是0010)
基本语法:
选择器:hover{}
扩展了解的部分
:link{} 链接的初始样式,都是给a标签
:active{} 链接按下不动时候的样式,都是给a标签
:visited{}链接访问过后的样式,都是给a标签
注意点:细节点如果同时使用的话,需要注意顺序问题,顺序不对的话,效果有的会失效,正确的顺序是L-V-H-A 还有需要清除浏览器的缓存(link不清除缓存看不到效果)
:focus{} 设置input获得焦点时候样式
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box1:hover{
background-color: blue;
color: yellow;
}
.box2 p{
width: 100px;
height: 100px;
background-color: skyblue;
}
/* 需求,想要p鼠标经过时候背景颜色变粉色 */
.box2 p:hover{
background-color: deeppink;
}
.box3{
width: 300px;
height: 300px;
background-color: blue;
}
.box3 p{
width: 100px;
height: 100px;
background-color: red;
}
/* 需求: 想要鼠标经过box3的时候内部的p背景颜色变橘色 */
.box3:hover p{
background-color:orange;
}
a{
font-size: 80px;
}
a:link{
color: orange;
}
a:visited{
color: deeppink;
}
a:hover{
color: green;
}
a:active{
color: yellow;
}
input{
width: 400px;
height: 100px;
}
input:focus{
width: 200px;
height: 300px;
/* border 边框 solid 实线 */
border: 10px solid blue;
}
</style>
<body>
<div class="box1">我是盒子</div>
<div class="box2">
<p>段落p</p>
</div>
<div class="box3">
<p>段落p</p>
</div>
<a href="http://www.baidu.com">点我跳转到百度</a>
<form>
<input type="text">
</form>
</body>