基本的css式样学习一

最新推荐文章于 2026-01-05 00:15:00 发布

原创最新推荐文章于 2026-01-05 00:15:00 发布 · 637 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #input #button #url #xhtml #html

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了CSS中的各种选择器使用方法，包括派生选择器、id选择器、类选择器等，并探讨了属性值的继承规则及如何定义背景颜色和图片。

1、h1 {color:red; font-size:14px;}

派生选择器

li strong { font-style: italic; font-weight: normal; }

1、h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

2、如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

3、

id 选择器以 "#" 来定义。

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}
#green {color:green;}

4、

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}
5、.center {text-align: center}
	在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
	在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
	<h1 class="center">
		This heading will be center-aligned
	</h1>
	<p class="center">
		This paragraph will also be center-aligned.
	</p>
6、

.fancy td {
	color: #f60;
	background: #666;
	}

在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）

元素也可以基于它们的类而被选择：

td.fancy {
	color: #f60;
	background: #666;
	}

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

7、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">

</form>
</body>
</html>

7、

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

而内部样式表拥有针对 h3 选择器的两个属性：

h3 {
  text-align: right; 
  font-size: 20pt;
  }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color: red; 
text-align: right; 
font-size: 20pt;

8、背景颜色

body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}（背景颜色为透明的）
p {background-color: rgb(250,0,255)}

p.no2 {background-color: gray; padding: 20px;}

9、背景图片

body {background-image:url(/i/eg_bg_04.gif);}
p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;}
a.radio {background-image: url(/i/eg_bg_07.gif); padding: 20px;}

10、，背景图像将从一个元素的左上角开始。请看下面的例子：

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  background-position:center;（背景定位）

background-position:50% 50%;（百分数值）

background-position:50px 100px;长度值

11、背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }