Css学习笔记（一）

最新推荐文章于 2025-12-20 20:37:31 发布

原创最新推荐文章于 2025-12-20 20:37:31 发布 · 909 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #脚本 #stylesheet #html #浏览器 #styles

本文详细介绍了如何在HTML文档中应用CSS样式表，包括链接外部样式表文件、定义内部样式块对象以及内联定义等方法，并对一些常用CSS属性进行了说明。

如何将样式表加入您的网页：

1。链入外部样式表文件 (Linking to a Style Sheet)

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

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

<? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>

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

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

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

内联定义 (Inline Styles)

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

<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>

样式表语法 (CSS Syntax)

Selector { property: value }

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

继承的值 (The ' Inherit ' Value)

每个属性都有一个指定的值： Inherit 。它的意思是：将父对象的值等同为计算机值得到。这个值通常仅仅是备用的。显式的声明它可用来强调。

font-style	:	CSS1	请参阅 font-style 属性
font-variant	:	CSS1	请参阅 font-variant 属性
font-weight	:	CSS1	请参阅 font-weight 属性
font-size	:	CSS1	请参阅 font-size 属性
line-height	:	CSS1	请参阅 line-height 属性
font-family	:	CSS1	请参阅 font-family 属性
caption	:	CSS2	使用有标题的系统控件的文本字体(如按钮，菜单等)
icon	:	CSS2	使用图标标签的字体
menu	:	CSS2	使用菜单的字体
message-box	:	CSS2	使用信息对话框的文本字体
small-caption	:	CSS2	使用小控件的字体
status-bar	:	CSS2	使用窗口状态栏的字体

color

指定颜色。请参阅颜色单位

#RRGGBB rgb(R,G,B) Color Name

取值：

xx-small

绝对字体尺寸。根据对象字体进行调整。最小

x-small

绝对字体尺寸。根据对象字体进行调整。较小

small

绝对字体尺寸。根据对象字体进行调整。小

medium

默认值。绝对字体尺寸。根据对象字体进行调整。正常

large

绝对字体尺寸。根据对象字体进行调整。大

x-large

绝对字体尺寸。根据对象字体进行调整。较大

xx-large

绝对字体尺寸。根据对象字体进行调整。最大

larger

相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的 em 单位计算

smaller

相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的 em 单位计算

length

百分数 | 由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。请参阅长度单位

font-size-adjust : none | number

取值：

none	:	默认值。允许字体序列中每一字体遵守它的自己的尺寸
number	:	为字体序列中所有字体强迫指定同一尺寸

说明：

设置或检索用于对象中文本的字体名称序列是否强制使用同一尺寸。
对应的脚本特性为 fontSizeAdjust 。

示例：

语法：

取值：

normal	:	默认值。不应用拉伸变形
narrower	:	使用比当前设置的值导致字体宽度更小的值
wider	:	使用比当前设置的值导致字体宽度更大的值

说明：设置或检索用于对象中文本的文字是否横向的拉伸变形。
改变是相对于浏览器显示的字体的正常宽度的。
对应的脚本特性为 fontStretch

font-style版本：CSS1　兼容性：IE4+ NS4+　继承性：有

语法：

font-style : normal | italic | oblique

取值：

normal	:	默认值。正常的字体
italic	:	斜体。对于没有斜体变量的特殊字体，将应用 oblique
oblique	:	倾斜的字体

说明：

设置或检索对象中的字体样式。
对于此属性的默认值来说，IE提供了预定义样式。但是你可以在浏览器菜单的 Internet 选项 中更改它。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 fontStyle 。

font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

取值：

normal	:	默认值。正常的字体。相当于 400 。声明此值将取消之前任何设置
bold	:	粗体。相当于 700 。也相当于 b 对象的作用
bolder	:	比 normal >粗
lighter	:	比 normal >细
100	:	字体至少像 200 那样细
200	:	字体至少像 100 那样粗，像 300 那样细
300	:	字体至少像 200 那样粗，像 400 那样细
400	:	相当于 normal
500	:	字体至少像 400 那样粗，像 600 那样细
600	:	字体至少像 500 那样粗，像 700 那样细
700	:	相当于 bold
800	:	字体至少像 700 那样粗，像 900 那样细
900	:	字体至少像 800 那样粗

说明：

设置或检索对象中的文本字体的粗细。
作用由用户端系统安装的字体的特定字体变量映射决定。系统选择最近的匹配。也就是说，用户可能看不到不同值之间的差异。
IE4.0仅仅支持 normal 和 bold 值。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 fontWeight 。

text-decoration : none || underline || blink || overline || line-through

取值：

none	:	默认值。无装饰
blink	:	闪烁
underline	:	下划线
line-through	:	贯穿线
overline	:	上划线

说明：

检索或设置对象中的文本的装饰。
有 href 特性的 a ，以及 u ， ins 对象默认值为 underline 。
对象 strike ， s ， del ，默认值是 line-through 。
假如 none 值在属性声明的最后，所有的先前的其他取值都会被清除。例如，声明 text-decoration: underline overline blink none 等于声明 text-decoration: none 。
假如对象没有文本(如 img 元素)或者是空元素(如：<EM></EM>)，此属性不会发生作用。
假如你设置 body 对象的此属性值为 none ， a 对象将依然保持其原有的下划线样式。除非你针对 a 对象声明此属性值。
指定块对象的此属性将影响其所有内联子对象。而此影响一旦发生，块对象容器最终会受到影响。
在IE4+中可用的值为 overline 和 blink 。虽然 blink 值被提供，但它不会被作用。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textDecoration 。

text-underline-position : below | above

取值：

below	:	默认值。在文本下面
above	:	在文本上面

说明：

设置或检索 text-decoration 属性定义的下划线的位置。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textUnderlinePosition 。

text-shadow : color || length || length || opacity

取值：

color	:	指定颜色。请参阅颜色单位和附录：颜色表
length	:	由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。请参阅长度单位
length	:	由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的垂直延伸距离。请参阅长度单位
opacity	:	由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。请参阅长度单位