a链接伪类选择器
- 了解的写法：如果开发中四种都要使用，必须按照link visited hover active顺序
<style>
/* 设置未点击过的a标签的样式 (设置a标签的默认样式)*/
a:link {
color: #555555;
}
/* 设置被点击过的a链接的样式 */
a:visited {
color: green;
}
/* 设置鼠标经过a的样式 */
a:hover {
color: orange;
}
/* 鼠标按着a链接不松手设置的样式 */
a:active {
color: pink;
}
</style>
<a href="#">搜狗一下</a>
真正开发时，一般只处理a的默认颜色和鼠标经过的颜色设置
<style>
/* a的默认样式的修改 修改a默认的蓝色,去除默认的下划线
a 是 a:link的简写
*/
a {
color: #333333;
text-decoration: none;
}
/* 鼠标经过a 修改为橙色 */
a:hover {
color: orange;
}
</style>
<a href="#">搜狗一下</a>
focus文本框获取光标的伪类
<style>
/* 选择的是 获取到焦点的文本输入框 */
input:focus {
background-color: red;
}
</style>
<input type="text" />
显示模式
块元素
1.独占一行
2.块元素时可以直接设置宽度和高度的，如果未设置宽度，默认是父元素的宽度
3.块元素可以直接设置内外边距
4.可以放置任何行内元素（span a em等）
5.不要早p h标签中嵌套div
6.代表元素：p div h标题 ul li ol dl dt dd
行内元素
1.一行可以放置多个
2.行内元素不能直接设置宽高，如果设置也不会生效，默认的宽高就是内容的宽高
3.行内元素不允许嵌套块级元素（a标签除外），行内元素最好嵌套文字或者行内元素
4.行内元素之内设置水平间距，不能设置垂直间距
5.a标签中不允许再嵌套a标签
6.代表元素：a span em strong ins b s u i
行内块元素
1.一行可以放置多个
2.可以设置宽度和高度，默认都会有自己的宽高
3.可以直接设置内外边距
4.代表元素：img input textarea select
显示模式的转换
转行内元素：display:inline;
转块元素:display:block;
转行内块元素:display:inline_block;
行高总结
line-height是设置行高的
1.当值小于的容器的高度，文字会偏上显示
2.当值等于容器的高度，文字会垂直居中显示
3.当值大于容器的高度，文字会偏下显示
背景
背景色background-color
div {
width: 100px;
height: 100px;
/* 设置背景色 为transparent 是透明色的意思 */
/* background-color: transparent; */
/* background-color: red; 预定义颜色*/
/* background-color: rgb(250,100,0); rgb */
/* background-color: #666666; #666666 可以简写为 #666 十六进制的*/
/* background-color: #666; */
/* #f40的简写 是 #ff4400 */
background-color: #ff4400;
}
背景图background-image
- 要给需要添加背景图的容器,当前容器必须设置宽高, 背景图不会自动撑开容器的
- 小图会显示完整 平铺(重复) 大图显示不完整
- 背景图的使用场景
1.页面logo 装饰性的小图标 页面大的背景图
<style>
div {
要给需要添加背景图的容器,当前容器必须设置宽高, 背景图不会自动撑开容器的
width: 800px;
height: 600px;
background-color: #ccc;
/* 小图会显示完整 平铺(重复) 大图显示不完整 */
/* 背景图的使用场景
页面logo 装饰性的小图标 页面大的背景图
*/
background-image: url(images/icon.png);
}
</style>
<div></div>
背景平铺
- 背景图片默认展示会平铺(重复显示), 可以使用background-repeat来修改
- 取值
1.repeat; 默认值 平铺
2.no-repeat 不平铺----- 使用的最多
3.repeat-x 水平方向平铺
4.repeat-y 垂直方向平铺
<style>
div {
width: 800px;
height: 600px;
background-color: #ccc;
/* 小图会显示完整 平铺(重复) 大图显示不完整 */
/* 背景图的使用场景
页面logo 装饰性的小图标 页面大的背景图
*/
background-image: url(images/icon.png);
/* 背景平铺(背景重复)
background-repeat:
repeat; 默认值 平铺
no-repeat 不平铺----- 使用的最多
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
*/
background-repeat: repeat-y;
}
</style>
<div></div>
背景定位
- 设置背景图的方位 background-position:
- 可以是五个方位名词组合 left top right bottom center
1.这五个方位名词在搭配的使用的时候必须是 横向和纵向
2.如果在设置的时候 只写了一个 第二个值 默认就是center
3.如果使用的时候是 纯方位名词使用 是不分先后顺序的 - 具体数值 设置背景图位置 精确的px单位 第一个值一定是横向的 第二个值一定是纵向,如果在设置的时候 只写了一个 第二个值 默认就是center
- 组合 混搭 具体的像素值和 方位名词混合使用 第一个值一定是横向的 第二个值一定是纵向 顺序不可更改
如果在设置的时候 只写了一个 第二个值 默认就是center
- 可以是五个方位名词组合 left top right bottom center
background-position: top center;
background-position: 10px 50px;
background-position: 50px 10px;
background-position: center 40px;
背景附着-background-attachment
1.属性的默认值是 scroll，
2.也就是说，在默认的情况下，背景会随文档滚动。
3.fixed:背景固定 因此不会受到滚动的影响
<style>
/*如果涉及到超大的图片 已经将网页占满了 说明当前背景图是给body添加的 背景图是不会压住内容*/
body {
background-image: url(images/bg.jpg);
/* 设置 混搭 position 第一个值一定是 水平的 第二个是 垂直的值 */
background-position: center 40px;
/* 背景平铺 */
background-repeat: no-repeat;
/* background-attachment - 背景附着
属性的默认值是 scroll，
也就是说，在默认的情况下，背景会随文档滚动。
fixed:背景固定 因此不会受到滚动的影响
*/
background-attachment: fixed;
}
</style>
背景联写
- background: 颜色 背景图片 背景平铺 背景附着 背景定位 推荐写法 理论上没有固定顺序 顺序可以自定义
- 注意
1. 颜色默认值是 transparent
2.背景图片默认值是 none
3.背景平铺默认值是 repeat
4.背景附着默认值是 scroll
5.背景定位默认值是 0 0 (left top)
背景色半透明
div {
width: 100px;
height: 100px;
/* 设置背景半透明
rgba
rgb三个取值是0-255
a 取值是 0 - 1
*/
background-color: rgba(20,180,210,.5);
}
