css知识回顾（3）

72 阅读 0 评论 48 点赞

我是靠谱客的博主朴实豆芽，最近开发中收集的这篇文章主要介绍css知识回顾（3），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

知识回顾

- css字体
- css链接
- css列表
- css表格
- css轮廓

来源博客：u.mr90.top

css字体

font-variant:把段落设置为小型的大写字母字体
属性有small-caps，normal，inherit
16px=1em

css链接

a	标签的状态
a:link	普通的，未被点击的链接时候的状态
a:visited	用户已经访问的链接
a:hover	鼠标指针位于链接的上方
a:active	链接被点击的时刻

顺序要求

a:hover 必须跟在a:link 和a:visited后面
a:active 必须跟在a:hover后面
a:link-a:visited-a:hover-active

链接属性可改变链接hover时的字体大小，颜色背景，可以消除下划线text-decoration:none,还可以加入方框类型display:block

css列表

list-style-type:circle空心圈无序 <ul style="list-style-type:circle">无序空心圈</ul>
square``<ul style="list-style-type:square">实心黑圈</ul>
upper-roman``<ol style="list-style-type:upper-roman">有序</ol>
lower-alpha 有序字母
ul无序 ol有序
列表还可以使用图片表示list-style-image:url('图片链接')可定义图片的大小类型等等
list-style-position属性有inside和outside
list-style按顺序设置list-style-type和list-style-position和list-style-image

{% tabs list, -1 %}

值	描述
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, 等。（日文片假名）

{% endtabs %}

css表格

表格定义的属性table,th(表头),td(表值) ，tr换行

{% folding green,css表格代码 %}

<style>
table{
border-collapse: collapse;
}
table,td,th{
border: 2px solid black;
}
</style>
<table>
<tr>
<th>1</th>
</tr>
<tr>
<td>2</td>
</tr>
</table>

{% endfolding %}

css轮廓

{% folding green,轮廓 %}

属性	说明	值
outline	在一个声明中设置所有的轮廓属性	outline-color, outline-style ,outline-width, inherit
outline-color	设置轮廓的颜色	color-name,hex-number,rgb-number,invert,inherit
outline-style	设置轮廓的样式	none,dotted,dashed,solid,double,groove,ridge,inset,outset,inherit
outline-width	设置轮廓的宽度	thin,medium,thick,length,inherit

{% endfolding %}

{% folding green, out-style属性 %}

值	描述
none	默认。定义无轮廓。
dotted	定义点状的轮廓。
dashed	定义虚线轮廓。
solid	定义实线轮廓。
double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit	规定应该从父元素继承轮廓样式的设置。