css
1.什么是css: Cascading Style Sheets 层叠样式表
2.作用:定义网页的显示效果。
3.css和html的结合方式行内样式
1)行内样式表(内联样式表)
在每个html的标签中都提供了一个属性 style样式属性 style="就是css的代码"
1. 缺点:不能实现标签与样式的分离,不能共享复用代码,效率低
2.何时使用:个别页面某个地方单独需要某种样式
2)内部样式表
html提供了一个标签 <style type="text/css">css的代码</style> 写在<head></head>
1. 缺点:不方便多个页面之间的代码维护(不好控制多个页面的样式)
没有实现html标签与样式的完全分离
2. 何时使用:单独某个页面需要定义某种样式(作用于当前页面)
3)外部样式表
1.外部样式表(导入式):
在stype标签中css提供了@import url("链接文件的地址");(url可不写)
2.外部样式表(链接式):
html一个标签 <link rel="引入的文件与html的关系" type="text/css" href="文件的地址">
优点:彻底实现了标签与样式的分离,提高代码的共享及复用程度
4.优先级
从上到下,从外到内,优先级从低到高。(大多数情况下)
5.代码规范
选择器名称 { 属性名:属性值;属性名:属性值;…….}
属性与属性之间用 分号 隔开
属性与属性值直接按用 冒号 连接
如果一个属性有多个值的话,那么多个值用 空格 隔开。
css基本选择器
1)标签名称选择器
2)html的标签提供属性 class 类属性 通过class编写的样式的优先级别高。
3)html的标签提供的属性 id 通常会把id定义成唯一性的。
id的优先级别高于class。style属性的优先级最高。
标签名 < class < id < style属性
css的扩展选择器
1)关联选择器:标签是可以嵌套的,两个或多个选择器之间产生关系,就可以用此选择器。
2)直接后代选择器:选取的是父元素下每个直接子元素
3) 属性选择器
i. 可以根据HTML元素的属性及属性值来选中元素
4) 通配符选择器
i. *代表HTML中所有的元素
5)组合选择器:对多个不同选择器进行相同样式设置的时候应用此选择器。
伪元素选择器:
1)a:link 超链接未点击状态。
2)a:hover 光标移到超链接上的状态(未点击)。
3)a:active 点击超链接时的状态。
4)a:visited 被访问后的状态。
注意:a:hover必须写在a:visited后面,a:acitive必须写在a:hover后面l>v>h>a,
可以单独设置某个样式
块级元素:<div></div>
(1)特点:独占一行,可以设置宽、高
(2)作用:主要起到分区的作用,可以把html页面分成独立、不同的部分
(3)常用块级元素:p,h1~h6
行内元素:<span></span>
(1)特点:不会独占一行,宽高靠内容撑起,不能设置宽高(即使设置了也不起作用)
(2)常用的行内元素:<a></a>,<label></label>