分享程序员开发的那些事...
更新时间：2022-08-15 16:49:30
css字体属性定义文本的字体系列,大小,加粗,风格和变形等.
css中包含两种字体系列:通用字体系列和特定字体系列.
font-family属性定义文本的字体系列: body {font-family: sans-serif;}
font-style属性用于规定斜体文本.
font-variant属性设定小型大写字母.
font-weight属性设置文本粗细
font-size属性设置文本大小.如果要避免在ie中无法调整文本的问题,许多开发者使用em单位代替pixels.w3c推荐使用em尺寸单位.1em等于当前的字体尺寸.
设置链接样式特殊性在于能够根据它们所处的状态设置它们的样式:
a:link - 普通的
a:visited - 已访问的链接
a:hover - 鼠标指针位于链接上方
a:active - 链接被点击的时刻
当为不同状态设置样式时,必须按以下次序规则:
a:hover必须位于a:link和a:visited之后,active必须位于hover之后
background-color属性规定链接的背景色
css列表属性允许你放置,改变列表项标志,将图像作为列表项标志.
修改列表项的标志类型,可以使用属性list-style-type: ul {list-style-type : square}
list-style-image属性可以为标志使用一个图像:ul li {list-style-image:url(xxx.gif)}
list-style-position属性可以确定标志出现在列表项内容之外还是之内
可以用list-style将多个列表样式属性合并成一个:li {list-style: url(xxx.gif) square inside}
使用border属性设置css表格边框:
table,th,td{
border:1px solid blue;
}
上面例子为table,th,td设置蓝色边框,可以使用border-collapse属性设置是否将表格边框折叠为单一边框.
通过width和height属性定义表格的宽度和高度
text-align和vertical-align属性设置表格中文本对齐方式
如需控制表格内容与边框的距离,可以为td和th设置padding属性
下面代码列出了一个漂亮样式的列表:
<html>
<head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>
<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>
<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>
</table>
</body>
</html>
轮廓是绘制于元素周围的一条线,位于边框边缘的外围.css outline属性规定元素轮廓的样式,颜色和宽度.
以下代码在文本框外在画虚线框:
p {
border:red solid thin;
outline:#00ff00 dotted thick;
}
还可以用outline-color设置轮廓的颜色
用outline-style设置轮廓的样式
用outline-width设置轮廓的宽度
css框模型(box model)规定了元素框处理元素内容,内边距,边框和外边距的方式.
元素框最内部分是实际内容,直接包围内容的是内边距,内边距呈现了元素的背景.内边距的边缘是边框,边框以外是外边距,外边距默认是透明的,不会遮挡后面的元素.背景应用于由内容和内边距,边框组成的区域.可以使用通用选择器对所有元素进行设置:
* {
margin:0;
padding:0;
}
术语翻译:
element:元素 padding:内边距 border:边框 margin:外边距
边框内的空白是内边距,边框外的空白是外边距.
你可以安装上,右,下,左的顺序分别设置各边的内边距,各边均可使用不同的单位或百分比值:
h1 {padding:10px 0.25em 2ex 20%;}
也可以通过pading-top, -right , -bottom , -left设置如上属性.
可以为元素的内边距设置百分比数值,其为父元素width相对值,如果父元素width改变,它们也会改变.
元素的边框有3个方便:宽度,样式和颜色
可以把图片边框定义为outset,像凸起的按钮: a:link img {border-style:outset;}
使用border-width属性为边框指定宽度.由于border-style默认值为none,如果没有声明样式,就相当于border-style:none,因此如果希望边框出现,就必须声明一个边框样式.
css使用border-color属性设置边框颜色.
css2引入了边框颜色值transparent,该值创建有宽度的不可见边框.
设置外边距会在元素外创建额外空白,设置外边距最简单的方法就是使用margin属性.
外边距合并是指,当2个垂直外边距相遇时,它们将形成一个外边距,合并后外边距高度等于2个发生合并的外边距的高度较大者.
css定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局一部分和另一部分重叠.
div,h1或p元素被称为块级元素,这意味着这些元素显示为一块内容,即"块框".与之相反,span和strong称为行内元素,因为其内容显示在行中,即"行内框".可以使用display属性改变生成框的类型,通过将display设置为block,可以让行内元素表现的像块级元素一样.