CSS 回顾
CSS 层叠样式表.
将网页中的样式分离出来,完全由css来控制.
增强样式的复用性以及可扩展性.
格式:
选择器{属性名:属性值;属性名:属性值...}
css和html代码相结合的四种方式:
1,每一个html标签都有一个style属性.
2,当页面有多个标签有相同样式时,可以进行复用.
<style>
css代码
</style>
3,当有多个页面中的标签的样式相同时,还可以将样式单独封装成一个css文件.
通过在每个页面中定义
<style>
@import url( "1.css");
</style>
4,通过html中head标签中的link标签链接一个css文件.//rel 属性指示被链接的文档是一个样式表: <head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head>
<link rel="stylesheet" href="1.css" />
技巧:为了提高相同的样式的复用性以及可扩展性,可以将多个标签样式进行单独定义,并封装成css文件.
p.css,div.css
在一个css文件中使用css的import将多个样式文件导入.
然后在html页面上,使用link标签导入这个总的css文件即可.
1.css
@import url("p.css");
@import url("div.css");
<link rel="stylesheet" href="1.css" />
-------------------------
(被)选择器:其实就是样式要作用的标签容器.
当样式后分离后,html作用在于用标签封装数据.然后将css加载到指定标签上.
选择器的基本分类:
1,标签选择器:其实就是html中的每一个标签名.
2,类选择器:其实就是每一个标签中的class属性. 用.的形式表示.
只用来给css所使用.可以对不同标签 进行相同样式设定.
3,ID选择器:其实就是每一个标签中的ID属性.但是要保证id唯一性.用#来标识.
ID不仅可以被css所使用,还可以被javascript所使用.
选择器优先级.ID>CLASS>标签
扩展选择器:
1,关联选择器:其实就是对标签中的标签进行样式定义.选择器 选择器...
2,组合选择器:对多个选择器进行相同样式定义.将多个选择器通过","隔开的形式
3,伪元素选择器:其实就是元素的一种状态.
a:link:超链接 被点前状态
a:visited:超链接 点击后状态
a:hover:悬停 在 超链接 上.
a:active: 点击 超链接时.
在定义这这些状态时,有一个顺序: L V H A
p:first-letter//设置对象内的第一个字符的样式表属性
p:first-line//CSS ::first-line 伪元素,匹配一个段落的第一行的样式... 猴子提示: ::first-line伪元素只可以和块类元素(div、p)连用p::first-line { background:red; color...
:focus://CSS :focus 选择器 ,IE6不支持.但FF支持
//所有主流浏览器都支持 :focus 选择器。 注释:如果:focus 用于 IE8 ,则必须声明 <!DOCTYPE>。定义和用法 :focus 选择器用于选取获得焦点的元素。 提示:接收键盘.
CSS滤镜:其实通过一些代码完成丰富了样式.
当使用到CSS的更多属性时,还需要查阅CSS API
网页设计的时候.div+css
div:行级区域
span:块级区域
p:行级区域.p中不要嵌套div.
CSS 回顾
最新推荐文章于 2024-07-06 14:50:23 发布