css
2018-01-18 本文已影响0人
打死你的小乌龟
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>
