基本的css式样学习一

原创 2012年03月27日 16:10:03

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
  }

 

相关文章推荐

CSS学习笔记7-基本视觉格式化

基本框 元素框 外边距 边框 内边距 内容区 包含框 最近的块级祖先框、表单元格和行内块祖先框的内容边界构成 块级元素 width:做内边界到右内边界 height:上内边...

css3学习以及移动端开发基本概念的思考

--> 此时在所有的手机上都是document.document.clientWidth,也就是[layout viewport!!!]都是400px;  在渲染页面之前,浏览器需要知道layo...

CSS学习笔记(基本知识)

最近在自学web前端的一些知识。 第一章 : 几个常识如下 1  html中注释是   css中注释/*        */ 2  元素可以利用里面的title属性来制作备选样式表,也可以通过将tit...

CSS学习之 基本视觉格式化

1、基本框         CSS假定每个元素都有一个或多个矩形框,称为元素框。各元素框中还有一个内容区,内容区周围有可选的内边距、边框和外边距。         外边距可以为负值,但内边距和边框...
  • hslhy
  • hslhy
  • 2012年05月26日 09:59
  • 389

CSS3学习笔记 之 基本选择器

  要使某个样式应用于HTML元素,首先需要找到该元素,在CSS中执行这一任务的表现规则称为CSS选择器。       CSS3选择器有如下几种:     &n...
  • atleks
  • atleks
  • 2014年08月31日 23:49
  • 230

CSS学习之字体,文本,列表,背景设计基本内容

关于Css字体设计,文本设计,列表设计,背景设计基本内容。   下面的标签都是一大堆的文字,只有边学边用才不会烦躁。     字体:我们在做页面的时候,通常会有很多文字,对这些文字,我们会需要各种...

第18回 函数tslp_tsk的式样

第18回 函数tslp_tsk的式样 tslp_tsk的式样 函数tslp_tsk和slp_tsk稍微有些不一样, 函数tslp_tsk是带有参数的 ER ercd = tslp_tsk(TMO...

日语式样书常见语法问题

•否定句中不能使用“すべての” 在描述事物的时候,这种带有歧义的话尽量不要说。“すべての猫は白いではない。”这句话可以理解为:所有的猫都不是白色。同样也可以理解为:不是所有的猫都是白猫。如果在式...

多式样ProgressBar

多式样ProgressBar 拷贝处:http://www.eoeandroid.com/thread-1081-1-1.html 普通圆形ProgressBar 该类型进度条也就是一个表示运转的过...
  • gyflyx
  • gyflyx
  • 2011年07月01日 15:05
  • 704

标签页式样的对话框参考

http://blog.csdn.NET/akof1314/article/details/5979405 Visual Studio 2008 SP1自带的示例里面,有个工程为PropSheetD...
  • Qsir
  • Qsir
  • 2017年07月18日 10:36
  • 88
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基本的css式样学习一
举报原因:
原因补充:

(最多只允许输入30个字)