css引入方式
1 外部引入:在html的head部分<link rel="stylesheet" type="text/css" href="css文件路径">
2 头部引入:在head部分加入<style>css代码写在这里</style>
3 标签引入:直接写在页面标签里<div style="background:red;width:200px"></div>
4 @import url()引入:属于css2,不常用,不能用dom控制 ie5不支持link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面
css选择器
1 标签选择器:直接使用html标签作为选择器,一般用来设置默认属性或者和后代选择器一起使用
2 类选择器:.classname{}
特点:可以给不同标签设置同一个类来添加样式,减少代码量,方便修改等
命名规范:第一个字符不能使用数字,尽量参考大神们的国际标准命名
3 id选择器:#idname{}id具有唯一性
4 层级选择器:如.xxx span img{} 后代选择器实际上是使用多个选择器加上中间的空格来找到具体的要控制的标签。
5 分组选择器:如.xxx,span,img{} 实际上是对css的一种简化写法,是把具有相同css样式的不同选择器放在一起,减少代码量
6 通配选择器:* 很少用
7 伪类选择器:
css选择器中的属性顺序
显示属性:display list-style position float clear
自身属性:width height margin padding border background
文本属性:color font text-decoration text-align vertical-align white-space content
符合浏览器的渲染顺序,最终达到提高执行效率的目的
css优先级
标签内嵌样式>头部书写样式>外部引用样式>浏览器默认样式
css选择器的优先级:id>class>标签选择器
id=100 class=10 标签选择器=1
!important:在css属性后面标明具有最高的优先级 不能被覆盖
盒模型
完整的盒模型是由content border padding margin 四部分组成
a标签的4个伪类
link 未被访问前的样式表属性
visited 链接地址已被访问过的样式表属性
hover 鼠标悬停时的样式表属性
active 鼠标点击未释放时发生的事件: 伪类:: 伪元素
标签语意化
1 明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如,
网页上的文章的标题就得用标题标签,网页上的各个栏目的栏目名称也可
以使用标题标签
2 语义话的作用:更容易被搜索引擎收录,更容易让屏幕阅读器读出网页内容。