Css学习整理,记录容易忘掉的一些内容

本次内容包括Css字体,css链接,css列表,css表格等

css字体

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

css链接

a标签的状态
a:link普通的,未被点击的链接时候的状态
a:visited用户已经访问的链接
a:hover鼠标指针位于链接的上方
a:active链接被点击的时刻
  • 顺序要求
  1. a:hover 必须跟在 a:linka:visited后面
  2. a:active 必须跟在 a:hover后面
  3. a:link-a:visited-a:hover-active

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

css列表

  1. list-style-type:circle空心圈无序 <ul style="list-style-type:circle">无序空心圈</ul>
  2. square``<ul style="list-style-type:square">实心黑圈</ul>
  3. upper-roman``<ol style="list-style-type:upper-roman">有序</ol>
  4. lower-alpha 有序字母
  5. ul无序 ol有序
  6. 列表还可以使用图片表示list-style-image:url('图片链接')可定义图片的大小类型等等
  7. list-style-position属性有inside和outside
  8. list-style按顺序设置list-style-type和list-style-position和list-style-image
描述
none无标记。
disc默认。标记是实心圆。
circle标记是空心圆。
square标记是实心方块。
decimal标记是数字。
decimal-leading-zero0开头的数字标记。(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, 等。(日文片假名)

css表格

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

css表格代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

css轮廓

轮廓

属性说明
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

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规定应该从父元素继承轮廓样式的设置。

来源:菜鸟教程