css技术
1.css:级联样式表,层叠样式表
作用: 在html标签的基础之上,添加更丰富的,更简便的样式设置
2.嵌入到html里的方式
1) 行内样式 — 通过为标签添加style属性来指定css样式
2)内嵌样式
语法:将css样式定义在head标签中,通过style标签添加
~~~html
<head>
<meta http-equiv="content-type" content="text/html;charset=GBK"/>
<style type="text/css">
选择器{ css属性样式 } -- 通过选择器描述需要设置样式的html标签
</style>
</head>
~~~
常见选择器
1. 标签名选择器 : 通过标签名指定标签
h1{ color:red ; background-color:blue }
h2,h3,h4{ color: pink }
2. class选择器 : 通过class属性指定标签
定义 --> .class名{ css代码 } .abc{color:green}
使用 --> <h1 class="abc">
3. id选择器: 通过为标签添加id属性来指定标签样式
定义 --> #id值{css代码} #p1{ color:orange }
使用 --> <p id="p1">
注意: id属性主要用来在网页里唯一标识一个标签,其次还可以为这个标签指定css样式
4. 后代选择器
语法: 选择器1 选择器2{ css代码 }
定义: p h1{ color:red } #d1 .abc h1{ ...... }
作用: 为所有出现在p里的h1标签定义风格样式(包括儿子,孙子,...)
5. 伪类选择器 --- 针对超链接标签(鼠标悬停状态)
a:hover{ ....... }
3)外部样式文件
特点: 将css代码定义在一个以.css为结尾的文件中,需要使用样式的网页通过link标签引入
1. 将css代码(只是css代码不包括标签)存放dao单独的css文件中
2. <link type="text/css" rel="stylesheet" href="xxx.css"/>
4)注意:
当三种样式引入同时作用在一个标签上时,如果样式之间不冲突,那么效果叠加;如果有冲突,采用就近原
则,最终生效优先级别是:行内样式 --> 内嵌样式 --> 外部样式文件。
统一设置 background:颜色 图片 偏移 重复
- 图片小 , 区域大 : background-repeat
- 图片大 , 区域小 : 偏移 -300px 图片整体向左移动300px, -300px 图片整体向上移动300px