CSS简介
css简介
1.css介绍
层叠样式表(英文全称:cascading style sheets)是一种用来表现html(标准通用标记语言的一个应用)
或xml(标准通用标记语言的一个子集)等文件样式的计算机语言。css不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.css语法
选择器 {属性:属性值;}
3.css使用方式
内部样式表 |
<style type="text/css"> /*css语句*/ </style> |
外部样式表 |
<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" /> <style type="text/css"> 差别1:本质的差别:link属于xhtml标签,而@import完全是css提供的一种方式。
差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的css会同时被加载,而@import引用的css会等到页面全部被下载完再被加载。所以有时候浏览@import加载css的页面时开始会没有样式(就是闪烁),网速慢的时候明显。
差别3:兼容性的差别:@import是css2.1提出的,所以老的浏览器不支持,@import只有在ie5以上的才能识别,而link标签无此问题。 差别4:使用dom(document object model文档对象模型 )控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的. |
内联样式表 | <div style="width:500px; height:200px;"></div> |
4.css不同使用方式的优先级
a、内联样式表的优先级别最高
b、内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高。
5.样式表的作用域
作用域:内联样式的作用域最小,只能应用于当前元素,其次是内部样式表,能应用于当前html文件,最后是外部样式表,能应用于所有链接的html文件。
6.css选择器
什么是选择器?
帮助我们在css中找到html的元素并且定位到指定元素的身上。
三大基础选择器
id
class
html
高级选择器
* 通配符
.d1,.d2{} 群组选择器
.d1 .d3{} 后代选择器
.d1>.d2{} 子元素选择器
伪类选择器
a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值;}超链接被访问后的状态;
a:hover{属性:属性值;}鼠标悬停,即鼠标划过超链接时的状态;
a:active{属性:属性值;}超链接被激活时的状态,即鼠标按下时超链接的状态;
link--visited--hover--active。
选择器权重比较
三大基础选择器 | id>class>html |
权重比较 | id、class、html选择器数量 |
是否直接选中目标 |
|
!important |
7.css基本样式
width
height
background
8.css注释
/* 注释内容 */
上一篇: Python 入门之 递归
下一篇: Vue学习笔记