CSS基础学习-列表和超链接伪类
CSS基础学习-列表和超链接伪类
列表
列表属性(list
)
属性 | 描述 |
---|---|
list-style |
简写属性。用于把所有用于列表的属性设置于一个声明中。 |
list-style-image |
将图象设置为列表项标志。 |
list-style-position |
设置列表中列表项标志的位置。 |
list-style-type |
设置列表项标志的类型。 |
marker-offset |
列表类型
要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型。
例如,在一个无序列表中,列表项的标志 (marker
) 是出现在各列表项旁边的圆点。
在有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。
要修改用于列表项的标志类型,可以使用属性 list-style-type
:
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
list-style-type
属性
值 | 描述 |
---|---|
none |
无标记。 |
disc |
默认。标记是实心圆。 |
circle |
标记是空心圆。 |
square |
标记是实心方块。 |
decimal |
标记是数字。 |
decimal-leading-zero |
0开头的数字标记。(01, 02, 03, 等。) |
lower-roman |
小写罗马数字(i, ii, iii, iv, v, 等。) |
upper-roman |
大写罗马数字(I, II, III, IV, V, 等。) |
lower-alpha |
小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
upper-alpha |
大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
lower-greek |
小写希腊字母(alpha, beta, gamma, 等。) |
lower-latin |
小写拉丁字母(a, b, c, d, e, 等。) |
upper-latin |
大写拉丁字母(A, B, C, D, E, 等。) |
hebrew |
传统的希伯来编号方式 |
armenian |
传统的亚美尼亚编号方式 |
georgian |
传统的乔治亚编号方式(an, ban, gan, 等。) |
cjk-ideographic |
简单的表意数字 |
hiragana |
标记是:a, i, u, e, o, ka, ki, 等。(日文片假名) |
katakana |
标记是:A, I, U, E, O, KA, KI, 等。(日文片假名) |
hiragana-iroha |
标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名) |
katakana-iroha |
标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名) |
更多实例 | |
### 列表项图像 | |
有时,常规的标志是不够的。你可能想对各标志使用一个图像,这可以利用list-style-image 属性做到: |
ul li {list-style-image : url(xxx.gif)}
只需要简单地使用一个 url() 值,就可以使用图像作为标志。
list-style-image
属性
值 | 描述 |
---|---|
URL |
图像的路径。 |
none |
默认。无图形被显示。 |
inherit |
规定应该从父元素继承 list-style-image 属性的值。 |
列表标志位置
CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用list-style-position
完成的。
规定列表中列表项目标记的位置:
ul
{
list-style-position:inside;
}
list-style-position 属性
值 | 描述 |
---|---|
inside |
列表项目标记放置在文本以内,且环绕文本根据标记对齐。 |
outside |
默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 |
inherit |
规定应该从父元素继承 list-style-position 属性的值。 |
### 简写列表样式 | |
为简单起见,可以将以上 3 个列表样式属性合并为一个方便的属性:list-style ,就像这样: |
li {list-style : url(example.gif) square inside}
list-style
的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。
更多实例
超链接
设置链接样式
链接可以使用任何 CSS 属性(例如 color
、font-family
、background
等)来设置样式。
实例
此外,可以根据链接处于什么状态来设置链接的不同样式。
四种链接状态分别是:
a:link
- 正常的,未访问的链接a:visited
- 用户访问过的链接a:hover
- 用户将鼠标悬停在链接上时a:active
- 链接被点击时
实例
/* 未被访问的链接 */
a:link {
color: red;
}
/* 已被访问的链接 */
a:visited {
color: green;
}
/* 将鼠标悬停在链接上 */
a:hover {
color: hotpink;
}
/* 被选择的链接 */
a:active {
color: blue;
}
总结:
如果为多个链接状态设置样式,请遵循如下顺序规则:
* a:hover
必须 a:link
和 a:visited
之后
a:active
必须在a:hover
之后
文本装饰
text-decoration
属性主要用于从链接中删除下划线:
实例
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
背景色
background-color
属性可用于指定链接的背景色:
实例
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
链接按钮
本例演示了一个更高级的例子,其中组合了多个 CSS 属性,将链接显示为框/按钮:
实例
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
伪类
什么是伪类?
伪类用于定义元素的特殊状态。
例如,它可以用于:
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
语法
伪类的语法:
selector:pseudo-class {
property: value;
}
锚伪类
链接能够以不同的方式显示:
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
注意:a:hover 必须在 CSS 定义中的 a:link
和 a:visited
之后,才能生效!a:active
必须在 CSS 定义中的a:hover
之后才能生效!伪类名称对大小写不敏感。
伪类和 CSS 类
伪类可以与 CSS 类结合使用:当您将鼠标悬停在例子中的链接上时,它会改变颜色:
a.highlight:hover {
color: #ff0000;
}
悬停在 <div>
上
在 <div>
元素上使用 :hover 伪类的实例:
div:hover {
background-color: blue;
}
简单的工具提示悬停
把鼠标悬停到 <div>
元素以显示 <p>
元素(类似工具提示的效果):
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
CSS - :first-child 伪类
:first-child
伪类与指定的元素匹配:该元素是另一个元素的第一个子元素。匹配首个 <p>
元素在下面的例子中,选择器匹配作为任何元素的第一个子元素的任何 <p>
元素:
p:first-child {
color: blue;
}
匹配所有 <p>
元素中的首个 <i>
元素
在下面的例子中,选择器匹配所有 <p>
元素中的第一个<i>
元素:
p i:first-child {
color: blue;
}
匹配所有首个 <p>
元素中的所有 <i>
元素
在下面的例子中,选择器匹配作为另一个元素的第一个子元素的 <p>
元素中的所有 <i>
元素:
p:first-child i {
color: blue;
}
CSS - :lang 伪类
:lang
伪类允许您为不同的语言定义特殊的规则。在下面的例子中,:lang
为属性为 lang="en"
的 <q>
元素定义引号:
<html>
<head>
<style>
q:lang(en) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
所有 CSS 伪类
选择器 | 例子 | 例子描述 |
---|---|---|
:active |
a:active |
选择活动的链接。 |
:checked |
input:checked |
选择每个被选中的 <input> 元素。 |
:disabled |
input:disabled |
选择每个被禁用的 <input> 元素。 |
:empty |
p:empty |
选择没有子元素的每个 <p> 元素。 |
:enabled |
input:enabled |
选择每个已启用的 <input> 元素。 |
:first-child |
p:first-child |
选择作为其父的首个子元素的每个 <p> 元素。 |
:first-of-type |
p:first-of-type |
选择作为其父的首个 <p> 元素的每个 <p> 元素。 |
:focus |
input:focus |
选择获得焦点的 <input> 元素。 |
:hover |
a:hover |
选择鼠标悬停其上的链接。 |
:in-range |
input:in-range |
选择具有指定范围内的值的 <input> 元素。 |
:invalid |
input:invalid |
选择所有具有无效值的 元素。 |
:lang(language) |
p:lang(it) |
选择每个 lang 属性值以 "it" 开头的 <p> 元素。 |
:last-child |
p:last-child |
选择作为其父的最后一个子元素的每个 <p> 元素。 |
:last-of-type |
p :last-of-type |
选择作为其父的最后一个 <p> 元素的每个<p> 元素。 |
:link |
a:link |
选择所有未被访问的链接。 |
:not(selector) |
:not(p) |
选择每个非 <p> 元素的元素。 |
:nth-child(n) |
p:nth-child(2) |
选择作为其父的第二个子元素的每个 <p> 元素。 |
:nth-last-child(n) |
p:nth-last-child(2) |
选择作为父的第二个子元素的每个 元素,从最后一个子元素计数。 |
:nth-last-of-type(n) |
p:nth-last-of-type(2) |
选择作为父的第二个<p> 元素的每个<p> 元素,从最后一个子元素计数 |
:nth-of-type(n) |
p:nth-of-type(2) |
选择作为其父的第二个 <p> 元素的每个 <p> 元素。 |
:only-of-type |
p:only-of-type |
选择作为其父的唯一 <p> 元素的每个 <p> 元素。 |
:only-child |
p:only-child |
选择作为其父的唯一子元素的 <p> 元素。 |
:optional |
input:optional |
选择不带 "required" 属性的 <input> 元素。 |
:out-of-range |
input:out-of-range |
选择值在指定范围之外的 <input> 元素。 |
:read-only |
input:read-only |
选择指定了 "readonly" 属性的 <input> 元素。 |
:read-write |
input:read-write |
选择不带 "readonly" 属性的<input> 元素。 |
:required |
input:required |
选择指定了 "required" 属性的 <input> 元素。 |
:root |
root |
选择元素的根元素。 |
:target |
#news:target |
选择当前活动的 #news 元素(单击包含该锚名称的 URL)。 |
:valid |
input:valid |
选择所有具有有效值的<input> 元素。 |
:visited |
a:visited |
选择所有已访问的链接。 |
所有 CSS 伪元素
选择器 | 例子 | 例子描述 |
---|---|---|
::after |
p::after |
在每个 元素之后插入内容。 |
::before |
p::before |
在每个 元素之前插入内容。 |
::first-letter |
p::first-letter |
选择每个 元素的首字母。 |
::first-line |
p::first-line |
选择每个 元素的首行。 |
::selection |
p::selection |
选择用户选择的元素部分。 |
原文地址:https://www.cnblogs.com/hirak0/p/15232633.html
- 大数据学习之路(持续更新中...)
- 如何养成良好的c++编程习惯(1)——内存管理
- 使用jOrgChart插件实现组织架构图的展示
- Spark源码分析 之 Driver和Excutor是怎么跑起来的?(2.2.0版本)
- webpack入门——webpack的安装与使用
- Portal-Basic Java Web应用开发框架V3.0正式发布(源码、实例及文档)
- ELK5.0安装教程
- 替换空格
- JavaScript实现段落文本高亮
- 原生js实现简单移动端轮播图
- html5页面实现点击复制功能
- python生成式
- Elasticsearch——分词器对String的作用
- AR改变生活:远程AR辅助应用程序可以解决更多现实问题
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例