CSS样式

来源：互联网发布：淘宝网秋冬婴儿服装编辑：程序博客网时间：2024/06/05 01:29

可以用来定义div下的元素属性
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}

用于定义表格内容的背景颜色和字体颜色
.fancy td {
color: #f60;
background: #666;
}
在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。
（名为 fancy 的更大的元素可能是一个表格或者一个 div）
元素也可以基于它们的类而被选择：
td.fancy {
color: #f60;
background: #666;
}
在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。
<td class="fancy">
你可以将类 fancy 分配给任何一个表格元素任意多的次数。
那些以 fancy 标注的单元格都会是带有灰色背景的橙色。
那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。
还有一点值得注意，class 为 fancy 的段落也不会是带有灰色背景的橙色，
当然，任何其他被标注为 fancy 的元素也不会受这条规则的影响。
这都是由于我们书写这条规则的方式，这个效果被限制于被标注为 fancy 的表格单元（即使用 td 元素来选择 fancy 类）。

定义输入字体的样式
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}

input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}

用于多个文档的声明
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

可以改变所在行一整行的背景色
这条规则把元素的背景设置为灰色：
p {background-color: gray;}
如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：
p {background-color: gray; padding: 20px;}

单独设置背景色
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
大多数背景都应用到 body 元素，不过并不仅限于此。
下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：
p.flower {background-image: url(/i/eg_bg_03.gif);}
您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
a.radio {background-image: url(/i/eg_bg_07.gif);}

图片放置位置
如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}

字间距

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

处理输入字母的大小写
h1 {text-transform: uppercase}
参数：none
uppercase全大写
lowercase全小写
capitalize首字母大写

将表格边框折叠成一条线
table
{
border-collapse:collapse;
}

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

光标变色
在页面首先导入jquery.js ；你可以到网上下载

$('#输入框的id').mousein(function(){
$('#输入框的id').css('backgroundcolor','red');
}).mouseout(function(){
$('#输入框的id').css('backgroundcolor','red');
});

<input type="text" id="txtUid" onfocus="this.style.backgroundColor='#DADADA'" onblur="this.style.backgroundColor='#FFFFFF'" />

变背景色

链接的话，可以设置伪类：

a:link {
background:#000;/* 原来的颜色 */
}
a:visited {
background:#000;
}
a:hover {
background:#fff;/* 鼠标移上去后的颜色 */
}
a:active {
background:#000;
}

<style>

</style>
变成手型
style="cursor:hand;"