日度归档:2020年1月3日

css 字体样式定义时,font-family后面加一个sans-serif的用途说明


摘要:
下文讲述我们经常看见的font-family后面的sans-serif的用途,如下所示:


开门见山的讲:
sans-serif放在font-family后面的作用是:
当前面定义的字体都不存在于操作系统时,无法使用时,就调用默认的字体 sans-serif

在W3Chtml设计中,建议我们在font-family后面加上sans-serif

sans-serif是什么?

sans-serif是一类在操作系统或浏览器中设置的字体,并且这个字体存在于操作系统中;
sans-serif是指西文中没有衬线的字体,与汉字字体中的黑体相对应。该类字体通常是机械的和统一线条的,它们往往拥有相同的曲率,笔直的线条,锐利的转角。
sans-serif是无衬线字体,是一种通用字体族
常用的sans-serif字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等

如何使用CSS对table(表格)标签进行样式设置呢?


摘要:
下文讲述使用css对table(表格)标签进行样式设置的方法分享,如下所示:


表格边框设置–使用Border属性进行设置

对表格边框设置,使用css中的border属性设置。
例:
将表格边框设置为黑色边框,如下所示;

    table, th, td
	{
	  border: 1px solid black;
	}
	


合并边框-使用border-collapse属性进行设置

border-collapse属性的功能设置
边框是合并,还是分开

table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}


表格宽度和高度

Width: 表格的宽度
height:表格的高度

table 
{
    width:100%;
}
th
{
    height:50px;
}


表格文字水平对齐

表格中文字水平对齐使用text-align属性进行设置。
text-align:
center:居中
left:靠左
right:靠右

	  
td
{
    text-align:right;
}


表格文字垂直对齐

文字垂直对齐使用 vertical-align 属性进行设置
vertical-align:
Middle:中间对齐
top:顶部对齐
bottom:底部对齐

 
td
{
    height:80px;
    vertical-align:bottom;
}


表格颜色

表格颜色设置使用color属性
例:

    th
{
    background-color:green;
    color:white;
}

 

CSS 列表样式设置方法分享


摘要:
下文讲述CSS列表样式设置方法及列表样式的作用,如下所示:

css 列表属性

属性

备注说明
list-style

简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image

将图象设置为列表项标志
list-style-position

设置列表中列表项标志的位置
list-style-type

设置列表项标志的类型


css 列表属性的功能:

1.可以将列表设置为有序列表(列表项前面用数字或字母标记)
2.可以将列表设置为无序列表(列表项前面 会出现小黑点或小方框标记)
3.可以设置列表标记图像

不同的列表项标记
list-style-type属性指定列表项标记的类型是:

实例
ul.a {list-style-type: circle;} //小方框
ul.b {list-style-type: square;} //小黑点

ol.c {list-style-type: upper-roman;} //大写1 2 3
ol.d {list-style-type: lower-alpha;} //字母标记

    <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(maomao365.com)</title> 
<style>
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;}
</style>
</head>

<body>
<p>无序列表实例:</p>

<ul class="a">
  <li>cssA</li>
  <li>cssB</li>
  <li>cssC</li>
</ul>

<ul class="b">
  <li>cssA</li>
  <li>cssB</li>
  <li>cssC</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
  <li>cssA</li>
  <li>cssB</li>
  <li>cssC</li>
</ol>

<ol class="d">
  <li>cssA</li>
  <li>cssB</li>
  <li>cssC</li>
</ol>

</body>
</html>
css ul  li 列表样式设置方法

css ul li 列表样式设置方法