1.文本修饰
1.1.对于一般的元素而言是默认值,定义的标准文本 没有下划线
1.2. a元素是默认就含有下划线
a{
text-decoration: none;
}(该语法可去除a元素的下划线)
1.3.设置文本的上划线
a{
text-decoration:overline;
}
1.4设置文本的删除线
a{
text-decoration:line-through;
}
1.5设置文本的下划线
a{
text-decoration: underline;
}
1.6内部选择器的方式去除a元素的下划线
<a href="http://www.baidu.com" style="text-decoration: none;">跳转到百度</a>
2.垂直对齐方式
2.1让图片后面的文字垂直对齐方式为居中
img{
vertical-align:middle;
}
2.2.让图片后面的文字垂直对齐方式为向上
或者使用text-top也开始实现对齐方式为向上 和图片保持向上对齐
img{
vertical-align: top;
}
2.3让图片后面的文字垂直对齐方式为向下
或者使用text-bottom也开始实现对齐方式为向下 和图片保持向下对齐
img{
vertical-align: bottom;
}
2.4.使用super可以让文字的垂直对齐方式更加的靠下
img{
vertical-align: super
}
3.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。
3.1鼠标摸上p标签的时候显示红色的背景 离开样式就会消失
p:hover{
background:red;
}
3.2.
a:link{
color:red;
}
- 未单击访问时超链接样式
- href属性里面的网络地址没有在你的浏览器访问过则会显示:link伪类的颜色
- 地址跳转了但是没有访问成功,或者你的地址无效,也就意味永远不能访问,那么就会一直显示:link的样式
3.3
a:visited{
color:green;
}
- 单击访问后超链接样式 */
- visited写的样式会对href里面之前已经被访问过的网址生效
- ▲伪类冒号前面不要加空格
3.4
a:hover{
color:blue
}
鼠标悬浮其上的超链接样式
3.5
a:active{
background:cyan;
}
鼠标单击未释放的超链接样式
我给女朋友买了一个LV 然后她就笑HA了
设置伪类的顺序:a:link->a:visited->a:hover->a:active
4.列表样式
去除了无序列表的小黑点
list-style-type: none
list-style-type:disc实心圆(默认)
list-style-type:cirle空心圆
list-style-type:square实心正方形
list-style-type:decimal 数字序列
list-style-image:url(./pic1\ \(1\).png);
border:1px solid red;
list-style-position: inside ;inside就是把标记符号放在里面,outside就是标记符号在外侧,默认采用outsidelist-style-position:outside
li是块元素没有宽度会自动撑满一行
一般开发去掉标记符号可以简写为list-style:none
5.背景属性
通过 CSS 背景属性,可以给页面元素添加背景样式,包括背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定、背景图片缩放等。
1.1 背景颜色
background-color 属性定义了元素的背景颜色。
background:red;
一般情况下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色。
background-color: transparent;
背景颜色 ,一样可以使用三种方式——分别为具体的英文颜色/十六进制/rgb形式*
具体的英文颜色 red yellow 也可以写十六进制颜色 #cccccc简写为#ccc
也可以写rgb颜色 例如rgb(35,120,147)
也可以写rgba颜色rgba(35,120,147,.5)
background-color: rgb(35,120,147,.5);
1.2 背景图片
background-image 属性表示元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)
图片默认会铺满整个div
background-image:url(./images/pic1.png);
1.3 背景平铺
background-repeat 属性表示在 HTML 页面上对背景图像进行平铺。
- 不平铺,即只显示一次
- background-repeat: no-repeat;
- repeat-x:只沿水平方向平铺
- background-repeat: repeat-x;
- repeat-y:只沿垂直方向平铺
- background-repeat: repeat-y;
1.4 背景图片位置
background-position 属性可以改变图片在背景中的位置
① background-position: x y;中的x表示水平位置,y表示垂直位置, 默认为x和y均为0;越向右向下,x和y的值越大
②如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中 。
③可以使用百分比表示背景图片的位置, 相对于盒子的宽度高度来说的,比如这里的30%指的就是这个背景图片所处盒子的30%。
④可以使用方位词表示背景的位置 ,如: right、left、center、top、bottom ;
⑤如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐;
⑥x轴的位置属性和 y轴的位置属性 也可以分开写。
1.5 背景图像固定(背景附着)
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
①属性值scroll表示背景图像是随对象内容滚动的;
②属性值fixed表示背景图像固定。
1.6 背景图像缩放
background-size 属性k可以设置背景图像的大小。 这个属性是CSS3特有的,之前的版本不具有.
①属性值为: 长度|百分比|cover|contain;
②属性值设置成百分比时 这个百分比是相对于盒子而言的,比如background-size: 60% 60%;则表示这个背景图片占这个盒子宽度的60%,高度的60%;
③若background-size只指定一个精确值,那么这个值指的是宽度,高度省略了,则表示为等比例缩放;比如background-size: 60%; 其实等价于 background-size: 60% auto;
④属性值cover,表示把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,实行的是等比例缩放,可能有部分背景图片显示不全
⑤属性值contain, 表示把当宽度或高度,有一者铺满盒子时就不再进行拉伸了,实行的是等比例缩放,可能有部分空白区域。