您好!欢迎来到静学网! 注册 登入
  • 致力提供中国优质教程及自媒体资讯,打造中国品牌教育先锋。

[CSS教程]css样式链接、列表、表格、轮廓属性讲解,链接的四种状态是重点

课程目录 教育推动者 次浏览
本节将继续讲解css样式部分的内容,这四大块内容是网页设计过程中经常用到的,所以务必掌握和灵活运用,当然这种只需要勤加练习就可以轻易掌握的,没有很强的逻辑性,因此不需要想太多,直接拿来就干。链接是本节重点的内容,在很多的网站设计中链接样式用的相当多,因为这涉及到了鼠标事件,可以不用动态语言就可以实现文字的变化,当然列表、表格也是用很多的,相对而言轮廓用的比较少一些。
css教程
 

链接样式属性详解

 
链接属性样式指的是我们平时可以点击的链接,与字符配合的我们也叫锚文本。因为有这个属性,才使得网站之间相互联系,可以说链接就是网站与网站之间的沟通桥梁,也是站内页面之间的联系方式。根据样式的不同可以分为四种样式属性。
 
a:link //未被访问的链接
a:visited //已被访问的链接
a:hover //鼠标指针移动到链接上
a:active //正在被点击的链接
 
当然,这些链接样式需要与其它属性结合才能更加完美。
 

列表属性详解

 
列表属性指的是用一定规律的一类事物,比如颜色这个列表就有常见的十二种颜色,而这十二种颜色就是一个列表。为了增加列表的多样性,列表前面的图标是可以任意改成你想要的图像,比如圆形、方形等,也可以放置图片。本身列表属性也给我们提供了众多的标志样式。
 
ul li //无序
ol li //有序
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
URL  图像的路径。
none         默认。无图形被显示。
inherit      规定应该从父元素继承 list-style-image 属性的值。
 
list-style-position
 
说明
 
该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。
 
当然也可以连在一起书写,方便快捷,利用简化的list-style: list-style-type  list-style-position  list-style-image       
 

CSS 表格属性详解

 
css表格属性指的是利用代码画表格,一般常用在统计归类的项目中,比如一些理财平台、或者需要对比的项目,也或者为了突出某个事物的强项等等,都需要用到表格。当然我们设计中所用到的表格不仅是实现而已,更多的是好看。
 
table
th
td
tr
相关属性,前面我们已经略提到过。
cellpadding:规定单元边沿与其内容之间的空白。
cellspacing:规定单元格之间的空白。
border-collapse        设置是否把表格边框合并为单一的边框。
border-spacing         设置分隔单元格边框的距离。
caption-side     设置表格标题的位置。
empty-cells      设置是否显示表格中的空单元格。
table-layout     设置显示单元、行和列的算法。
 

CSS 轮廓属性详解

 
CSS轮廓指的是边框周围变化,比如你觉得边框不美观,或者你想着重强调某一句话,这时轮廓属性就派得上用场了。轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
 
outline
outline-color
outline-style
outline-width
inherit

 

基本上就是这些,具体实现过程,我们接下来讲解。


静学网 , 版权所有丨如未注明 , 均为原创丨转载请注明[CSS教程]css样式链接、列表、表格、轮廓属性讲解,链接的四种状态是重点
顶一下
(0)
踩一下
(0)
畅所欲言
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论
友情链接:
自学网
本网站所刊载信息,不代表静学网观点。 刊用本网站稿件,务经书面授权或注明来源。 未经授权禁止转载、摘编、复制及建立镜像,违者将依法追究法律责任。 投稿邮箱:1870447831@qq.com | 举报邮箱:1870447831@qq.com