CSS学习

最新推荐文章于 2024-07-05 14:54:21 发布

jiangzaifu

最新推荐文章于 2024-07-05 14:54:21 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： css stylesheet import html styles filter

本文链接：https://blog.csdn.net/jiangzaifu/article/details/7694501

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Introduction To CSS2 简介

什么是CSS样式表

CSS是Cascading Style Sheet的缩写。译作「层叠样式表单」。是用于控制(增强)网页样式并允许将样式信息与网页内容分离的一种标记性语言。

如何将样式表载入您的网页

你可以用以下几种方式将样式表加入您的网页，而最接近目标的样式定义优先权越高，高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

载入外部样式表文件 (Linking to a Style Sheet)

你可以先建立外部样式表文件(.css)，然后使用HTML的link对象。示例如下：

	<head>
	<title>麟妖软圃</title>
	<link rel=stylesheet href="../common/example.css" type="text/css">
	</head>

而在XML中，你应该如下例所示在声明区中加入：

	<? xml-stylesheet type="text/css" href="../common/example.css" ?>

定义内部样式块对象 (Embedding a Style Block)

你可以在你的HTML文档的<html>和<body>标记之间插入一个<style>...</style>块对象,定义方式请参阅样式表语法。示例如下:

	<html>
	<style type="text/css">
		<!--
		body {font: 10pt "Arial"}
		h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
		h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
		p {font: 10pt/12pt "Arial"; color: black}
		-->
	</style>
	<body>

请注意，这里将 style对象的 type属性设置为" text/css"，是允许不支持这类型的浏览器忽略样式表单

内联定义 (Inline Styles)

内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：

	  <td style="margin-left: 0.5in; margin-right:0.5in">

这种用法的优点是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』

使用<span></span>标记引入样式

例如：

	<span style="font:12px/20px 宋体 #000000;">麟妖軟圃</span>

使用@import引入样式

跟LINK用法很像，但必放在<style>...</style>中

	<STYLE TYPE="text/css">
	<!-- 
		@import url(引入的的位址、路径与档名); 
	-->
	</STYLE>

例如：

	<STYLE TYPE="text/css">
	<!-- 
		@import url(../common/example.css); 
	-->
	</STYLE>

要注意的是，行末的分号是绝对不可少的！

样式表语法 (CSS Syntax)

	  Selector {
		  property: value;
		  property: value
	  }

参数说明:
Selector -- 选择符
property : value; -- 样式表定义。属性和属性值之间用冒号 : 隔开，定义之间用分号 ; 隔开

继承的值 (The ' Inherit ' Value)

每个属性都有一个指定的值：Inherit

它的意思是：将父对象的值等同为计算机值得到，这个值通常仅仅是备用的，显式的声明它可用来强调。

CSS基本属性

属性名称	属性描述	属性值

字体属性（Font）
font-family	使用什么字体	所有的字体
font-style	字体是否斜体	Normal、italic、oblique
font-variant	是否用小体大写	Normal、small-caps
font-weight	字体的粗细	Normal、bold、bolder、lithter等
font-size	字体的大小	Absolute-size、relative-size、length、percentage等

颜色和背景属性
Color	定义前景色	颜色
Background-color	定义背景色	颜色
Background-image	定义背景图案	路径
Background-repeat	重复方式	Repeat-x、repeat-y、no-repeat
Background-attachment	设置滚动	Scroll、Fixed
Background-position	初始位置	Percentage、length、top、left、right、bottom等

文本属性
Word-spacing	单词之间的间距	Normal<length>
Letter-spacing	字母之间的间距	同上
Text-decoration	文字的装饰样式	None\|underline\|overline\|line-through\|blink
Vertical-align	垂直方向的位置	Baseline\|sub\|super\|top\|text-top\|middle\|bottom\|text-bottom\|
Text-transform	文本转换	Capitalize\|uppercase\|lowercase\|none
Text-align	对齐方式	Left\|right\|center\|justify
Text-indent	首行的缩进方式	<length>\|<percentage>
Line-height	文本的行高	Normal\|<number>\|<length>\|<percentage>

边距属性
Margin-top	顶端边距	Length\|percentage\|auto
Margin-right	右侧边距	同上
Margin-bottom	底端边距	同上
Margin-left	左侧边距	同上

填充距属性
Padding-top	顶端填充距	Length\|percentage
Padding-right	右侧填充距	同上
Padding-bottom	底端填充距	同上
Padding-left	左侧填充距	同上

边框属性
Border-top-width	顶端边框宽度	Thin\|medium\|thick\|length
Border-right-width	右侧边框宽度	同上
Border-bottom-width	底端边框宽度	同上
Border-left-width	左侧边框宽度	同上
Border-width	一次定义宽度	同上
Border-color	设置边框颜色	Color
Border-style	设置边框样式	None\|dotted\|dash\|solid等
Border-top	一次定义顶端	Border-top-width\|color等
Border-right	一次定义右侧	同上
Border-bottom	一次定义底端	同上
Border-left	一次定义左侧	同上
Width	定义宽度属性	Length\|percentage\|auto
Height	定义高度属性	Length\|auto
Float	文字环绕	Left\|right\|none
Clear	哪一边环绕	Left\|right\|none\|both

分级属性
Display	定义是否显示	Block、inline、list-item、none
White-space	怎样处理空白	Normal、pre、nowrap
List-style-type	加项目编号	Disc、circle、square等
List-style-image	加图案	<url>\|none
List-style-position	第二行起始位置	Inside、outside
List-style	一次定义列表	<keyword>\|<position>\|<url>

鼠标（Cursor）属性		鼠标移动到下列对应效果演示
Cursor	自动	Auto
	定位"十"字	Crosshair
	默认指针	Default
	手形	Hand
	移动	Move
	箭头朝右方	e-resize
	箭头朝右上方	Ne-resize
	箭头朝左上方	Nw-resize
	箭头朝上方	n-resize
	箭头朝右下方	Se-resize
	箭头朝左下方	Sw-resize
	箭头朝下方	s-resize
	箭头朝左方	w-resize
	文本“I”形	Text
	等待	Wait
	帮助	Help

CSS基本定义示例

	body,td,th {
		font-family: 宋体;
		font-size: 12px;
		color: #000000;
	}

	body {
		background:url(../images/bg.jpg);
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
	}

	a {
		font-size: 12px;
		color: #990000;
	}

	a:link {
		text-decoration: none;
	}

	a:visited {
		text-decoration: none;
		color: #990000;
	}

	a:hover {
		text-decoration: none;
		color: #FF7C3E;
		position:relative;
		top:1px;
		left:2px;
	}

	a:active {
		text-decoration: none;
		color: #006600;
	}

	.codefont {
		color: #FFFFFF;
		font-family: 宋体;
		font-size: 12px;
	}

	.tagfont {
		color: #CC6633;
		font-family: 宋体;
		font-size: 12px;
		font-weight: bold;
	}

	.bar_cn {
		font-size:12px;
		color:#000000;
		font-family: Arial; 
		position: relative; 
		filter: blur(add=1, direction=45, strength=3);
		cursor:default;
	}

代码说明
	a:link	CSS1 IE4+ 、 NS4+ 设置a对象在未被访问前的样式表属性
	a:hover	CSS1/CSS2 IE4+ 、 NS4+ 设置对象在其鼠标悬停时的样式表属性
	a:active	CSS1/CSS2 IE4+ 设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性
	a:visited	CSS1 IE4+ 、 NS4+ 设置a对象在其链接地址已被访问过时的样式表属性

代码内最后的.codefont {}、.tagfont {}、.bar_cn {}代码段为自定义的样式属性

在页面中文本使用示例

	<span class="codefont">这里所显示的是.codefont自定义的样式</span>

在表格中使用示例

	<td cliass='tagfont'>这里所显示的是.tagfont自定义的样式</td>

在表格中使用示例

	<table class="bar_cn" width="380"
	 border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000">
		</tr>
			<td cliass='bar_cn'>这里所显示的是.bar_cn自定义的样式</td>
		</tr>
	</table>

效果演示：

这里所显示的是.bar_cn自定义的样式

在同一页面内控制不同链接的CSS属性

在Dreamweave的CSS中定义一个新的标示，按照HTML的语法，CSS中定义超级连接语法示例如下

	/* img样式方案 */
	a.img {
		font-size: 12px;
		color: #990000;
	}

	a.img:link {
		text-decoration: none;
	}

	a.img:visited {
		text-decoration: none;
		color: #990000;
	}

	a.img:hover {
		text-decoration: none;
		color: #FF7C3E;
		position:relative;
		top:0px;
		left:0px;
	}

	a.img:active {
		text-decoration: none;
		color: #006600;
	}

示例中img为自定义的方案名，然后在页面使用中选中某个连接后，在CSS面版中点中img即可。
要注意的是如果在img中未定义的某条样式而a中有定义、则会继承a的样式，假设img中未曾定义a.img:hover{}中的位置偏移、那么将会采a用中的偏移样式、所以要在img中到达不偏移的效果则需加上top:0px; left:0px;
按需要，你可以定义N个标示，N种鼠标over的效果。

CSS基本示例

自定义的按钮

	.mybutton { 
		background-color: #FFCC99; /*按钮底背景色*/
		border-bottom: #FF6633 1px solid; /*按钮底边框颜色*/
		border-left: #FF9966 1px solid; /*按钮左边框颜色*/
		border-right: #FF6633 1px solid; /*按右底边框颜色*/
		border-top: #FF9966 1px solid; /*按钮顶边框颜色*/
		color: #666666; /*按钮文字颜色*/
		height: 30px; /*按钮高度*/
	}

效果演示: 颜色可自行修改

自定义的立体字

	.myfont{
		width: 220;
		color: #000000;
		filter: DropShadow(Color=#FFCC99, OffX=1, OffY=1, Positive=2);
		font-family: "宋体";
		font-size: 12px;
		text-decoration: none;
		text-align: inherit;
	}

效果演示:

这是自定义的文本样式

虚线表格边框

	.mode_table_quote{
		padding: 3px 10px;
		margin: 5px 10px;
		border: 1px dotted #FF0000;
	}

效果演示:

这是虚线表格边框的效果

jiangzaifu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS学习

Introduction To CSS2 简介什么是CSS样式表CSS是Cascading Style Sheet的缩写。译作「层叠样式表单」。是用于控制(增强)网页样式并允许将样式信息与网页内容分离的一种标记性语言。如何将样式表载入您的网页你可以用以下几种方式将样式表加入您的网页，而最接近目标的样式定义优先权越高，高优先权样式将继承低优先权样式的未重
复制链接

扫一扫