CSS伪类选择器：给超链接加的样式（链接的不同状态加样式）

一个超链接，有四个状态；
正常状态（:link）：鼠标没放上去之前的样式；
放上状态（:hover）：鼠标放到链接上时的样式；
激活状态（:active）：按下后，按住鼠标的时候的样式；
访问过的状态（:visited）：按下鼠标左键，弹起后的样式；
在平常工作中，会使用以下写法，来给链接加不同的样式：
a:link, a:visited{color:#444; text-decoration:none;}//将“正常状态”和“访问过的状态”合二为一，即使用相同的样式；
a:hover{color:#990000; text-decoration:underline;}//"鼠标放上"单做一种效果；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS层叠样式表</title><style>/* 为HTML文件添加样式通常遵循：标记的基础样式 > 部分模块不同的样式 > 个别标记特殊的样式 */.box {/* 使用了“.”开头的类选择器 */width: 600px;border: 1px solid #333;/* 边框：1像素 实线 十六进制下的一种颜色 */padding: 20px;/* padding同时给四个边加内填充 */}/* 使用组合选择器中的后代选择器选择 */.box a:link,.box a:visited/* box类所有后代中<a>的正常状态和box类所有后代中<a>的访问过后状态 */{color: "#007FFF";text-decoration: none;}/* 超链接统一基础样式 */.box a:hover {color: red;text-decoration: underline;}/*使用组合选择器中的后代选择器选择 a.a1是指给class=a1的<a>元素添加样式
a.a1:link //给class=a1的<a>元素的正常状态，添加样式*/.box a.a1:link,.box a.a1:visited {color: aqua;font-size: 24px;background-color: #FFFF33}</style>
</head><body><div class="box"><a href="#">网站首页</a> |<a href="#">公司简介</a> |<a href="#" class="a1">新闻动态</a> |<a href="#">产品中心</a> |<a href="#" class="a1">最新发布</a> |<a href="#">在线留言</a></div>
</body></html>

显示效果如下：

图片中鼠标放在了网站首页（未点击）

CSS列表属性

list-style属性，取值：none;去除前面的符号（系统默认的样式太普通了）；

CSS边框属性：每个元素都可以加边框线

border-left :左边框线
语法格式：border-left:粗细线型线的颜色;
线型有：none(无线),solid(实线),dashed(虚线),dotted(点状线)
例：border-left :2px dashed red;
border-right :右边框线；border-top :上边框线；border-bottom :下边框线；这些边框线的语法格式及取值与border-left（左边框线）相似；
border :边框线（左右，顶部，底部同时加边框线）

CSS内边距属性

注意：平常我们所说的width和height属性，它们指内容的宽度和高度，不包含内，外边距和边框线；
padding-left :左内填充距离，左边线到内容间的距离；
padding-right :右内填充距离，右边线到内容间的距离；
padding-top :顶部内填充距离，上边线到内容间的距离；
padding-bottom :下内填充距离，下边线到内容间的距离；
padding(缩写形式)，顺序规定为“顶右底左”
例：padding:10;//四个边的内填充都为10px;
padding:10px 20px;//上下为10px，左右为20px;
padding:5px 10px 20px;//顶部为5px，左右为10px，底部为20px;
padding:5px 10px 15px 20px;//顶部为5px,右为15px,底部为15px,左为20px;

CSS背景属性

background-color :背景颜色；
background-image :背景图片；例：background-image:url(images/righttitle.gif);
background-repeat:背景平铺方式。取值：no-repeat（不平铺）,repeat(水平方向平铺)，repeat-y(垂直方向平铺)
background-position :背景定位，格式：background:水平方向定位垂直方向定位;
        用英文单词定位：background-position:left|center|right top|center|bottom;
        用固定值定位：background-position:50px 50px;//背景距离容器的左边50px,容器顶端50px;
        用百分比定位：background-position:50% 50%;//水平居中，垂直居中；
        用混合定位：background-position:left 10px;//背景靠左边齐，距离容器顶端10px。
(简写)background: 背景色背景图平铺方式定位方式；
举例：background:url(images/bg.gif) no-repeat center center;
举例：background:#ccc url(imgaes/bg.gif) no-repeat left 10px;

@沉木

前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性相关推荐

html伪类选择器focus,了解CSS :focus-within伪类选择器
一.了解CSS :focus-within伪类选择器 CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲,区别在于:focus表示当前元素处于focus状态时候干 ...
使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
Css 结构伪类选择器
目录 Css 结构伪类选择器结构伪类-公式 Css 结构伪类选择器在日常开发中,结构伪类选择器用的还是比较多的熟练的使用它,可以让我们的代码更整洁. 作用与优势: 作用:根据元素在HTML中的结构 ...
CSS常用伪类选择器详解
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素. 应用场景: 鼠标经过元素时的样式变化,Tips提示,下拉列表和过渡动画等细节优 ...
css基础伪类选择器与选择器权重以及盒子模型的用法演示
1. 伪类选择器根据元素的位置或状态来匹配子元素 1.1 结构伪类与上下文选择器很相似后文演示所用 HTML 代码如下: <!DOCTYPE html> <html lang= ...
CSS结构伪类选择器
结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁. 表 2-6 结构伪类选择器选择器功能描述版本 E:last-chi ...
CSS 语言伪类选择器
语言伪类选择器,用来匹配使用指定语言的元素.对使用多语言版本的网站,可以根据不同语言版本,设置不同的样式. 表 2-9 语言伪类选择器选择器功能描述版本 E:lang(language) 选择使 ...
css中伪类选择器详解(a:visited不生效的原因)
css伪类是一种css定义的方法,主要用于对链接显示效果的定义, 主要包括: a:link :链接平常的状态. a:visited:链接被访问之后的状态. a:hover:鼠标停留在链接上的状态. a ...
css first-child伪类选择器详解
三种使用情况 p:first-child 选中同级第一个并且为p的元素 p:first-child em 选中同级第一个并且为p的元素下的em元素 p em:first-child 选中所有p元素下 ...

前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性