从零开始学web开发之CSS-7.超链接样式&8.图片样式

超链接样式

1.超链接伪类

超链接默认有自带的一种样式。

• 默认情况：字体为蓝色，带有下划类
• 鼠标点击时：字体为红色，带有下划线。
• 鼠标点击后：字体为紫色，带有下划线。

点击时，指的是点击超链接的一瞬间的状态。

<1>.去除超链接下划线

在a标签的css样式中使用

text-decoration:none.

<2>.定义超链接伪类

语法:

a:link{css样式}
a:visited{css样式}
a:hover{css样式}
a:actived{css样式}

说明:

属性	说明
a:link	定义a元素未访问时的样式
a:visited	定义a元素访问后的样式
a:hover	定义鼠标经过显示的样式
a:actived	定义鼠标单击激活时的样式

定义这四个伪类必须按照link,visited,hover,actived的顺序进行，不然浏览器可能无法正常显示这4种样式。
实际运用中，一般只需要用到两种状态，未访问状态和鼠标经过状态。未访问状态，直接在a标签中定义就行了，没必要使用”a:link”.
语法：

a{css样式}
a:hover{css样式}

2.hover伪类

“:hover”伪类可以定义任何一个元素在鼠标经过时的样式，应用非常广泛。
语法：

元素:hover{}

说明：
“元素”可以是任意的块元素和行内元素。

3.鼠标样式

<1>.浏览器鼠标样式

语法：

cursor:属性值;

说明：
常用值

• default：鼠标默认的显示样式，箭头
• pointer:手状样式，一般用于超链接。

具体值，来源于绿叶学习网。

<2>.自定义鼠标样式

语法：
cursor:url("地址"),属性;

---

图片样式

1.图片大小

语法：

width:像素值;
height:像素值;

2.图片边框border

语法：

border-width:像素值;
border-style:属性值;
border-color:颜色值;

说明：
与前面的边框样式一致，也可以简写为border:2px soild green;

3.图片水平对齐

语法：

text-align:属性值;

说明:

属性值	说明
left	默认值，左对齐
center	居中对齐
right	右对齐

与前面的文本样式一致，text-align属性一般只用于两个地方：文本水平对齐和图片水平对齐，只对文本和img标签有效，对其他标签无效。
注意点：
图片水平对齐是针对父元素设置的，直接对img是无效的，如img元素的父元素是div,则要在div中设置对齐方式，img要相对于div进行对齐的。

4.图片垂直对齐

语法：

vertical-align:属性值;

说明：

属性值	说明
top	顶部对齐
middle	中部对齐
baseline	基线对齐
bottom	底部对齐

• 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
• 允许指定负长度值和百分比值。这会使元素降低而不是升高。
• 在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

5.文字环绕效果float

<1>float属性

可设置文字在某个元素的周围，能应用于所有的元素。
语法：

float:取值;

说明:

属性值	说明
left	元素向左浮动
right	元素向右浮动

默认情况下，元素是不浮动的。

<2>定义图片与文字间距

如希望图片与文字有一定的距离，可给img标签添加margin属性(外边距)。
语法：

margin-top:像素值;
margin-bottom:像素值;
margin-left:像素值;
margin-right:像素值;

示例网页链接，右键可查看源码

网页链接