css笔记-img-a-伪类

来源:互联网 发布:上海优越感知乎 编辑:程序博客网 时间:2024/06/09 13:48

img

1:单标签 行间元素,默认表现inline-block效果,直接适用盒子模型
img标签不是直接在网页中插入图像,而是指定一个链接图像文件的地址。因此 img标签创建的是被引用图像的占位空间


background-repeat
repeat:默认值。背景图像在垂直方向和水平方向重复
repeat-x:背景图像在水平方向重复
repeat-y:背景图像在垂直方向重复
no-repeat:不允许重复,背景图像只显示一次


background-position
设置背景图像的起始(原点)位置,默认是html元素的左上角
其值应该有2个,依次是:1:横向坐标的值 2:纵向坐标的值
如果只指定了一个值,那么该值为横向坐标的值,第一个纵向坐标的值默认为50%(center)
值的写法有三种:像素值,百分比,范围值
允许负值的存在


复合属性 background-color,background-image background-repeat,background-attachment,background-position



超级链接

1:锚点(anchor)
锚点链接主要用来跳转到页面中特定的位置
通过设置href属性的值为#+id名,可以定位到具有特定id属性的html元素所在的文字
<a href="#footer"> 可以链接到当前页面中<div id="footer">元素


2:邮箱链接:<a href="mailto:xxx@163.com">
3:电话链接:<a href="tel:15900001111">
4: target: _self:默认值,当前窗口打开链接 _blank:在新窗口打开链接
如果需要页面中所有的超级链接都在新窗口打开,可以直接在页面的header区域加上 <base target="_blank">




伪类
超级链接的交互状态
未被点击的状态
已被访问过的状态
鼠标悬停的状态
激活状态(鼠标点击时的状态)
伪类的定义
一种动态的类选择符,不是预先创建而是动态形成
当html元素具有不同的状态或特征时,伪类可以设定该元素不同状态或特征下的样式效果
伪类的写法
在常用选择符后面追加一个冒号:,然后加上伪类的名称


:link     a标签 未被访问的链接状态
:visited  a标签 已被访问的链接状态
:hover    所以html元素 鼠标悬停时的状态
:active   a标签    被激活时的状态
:focus    表单控件 获取焦点的状态

0 0