面向初学者的CSS

分享于 

16分钟阅读

Web开发

  繁體 雙語

CSS代表级联样式表。 这是一种简单的样式语言,允许将样式附加到HTML元素。 每种元素类型以及该类型中特定元素的每次产生都可以声明为独特的样式。比如 边距。定位。颜色或者大小。 因此,你可能将这些样式表视为模板,非常类似于桌面发布应用程序中的模板。 例如:

body { background-color: white;color: darkblue;font-size: 10pt;font-family: Arial;margin-left: 10%}

链接和嵌入

将样式表链接到HTML有很多方法,每个方法都有自己的优点和缺点。 为了便于将样式表合并到HTML文档中,引入了新的HTML元素和属性。

外部样式表

可以使用 <链接> 将外部样式表与文档头中的任意数量的HTML文档链接起来。 标签属性表示关于样式表的内容- rel属性类型( 样式表) 链接类型的类型;类型属性的类型;样式表的类型,样式表的位置。 这是一种非常方便的方式,可以通过编辑一个文件来格式化整个站点和 restyling。 例如:

<HTML><HEAD><LINKrel="stylesheet"type="text/css"href="basic.css"></HEAD><BODY>. . . </BODY></HTML>

将样式表链接到页面之后,就必须创建样式表。 例如:

body { font-family: Verdana, Helvetica, Arial, sans-serif;color: darkblue;background-color: #ffeeff}

如果将示例 上面 保存为样式表,那么每个链接到它的页面都具有指定的样式。 包含样式信息的文件必须具有扩展. css.

嵌入样式表

如果具有唯一样式的单个文档,则可以使用嵌入样式表。 如果在多个文档中使用同一样式表,则外部样式表将更合适。 嵌入样式表是带有样式元素的HEAD元素,并将应用到整个文档:

<STYLETYPE="text/css"MEDIA=screen><!--body { background: url(flower.gif) lightyellow;color: darkblue }.zn { margin-left: 8em;margin-right: 8em }-->
</STYLE>

required类型属性用于指定媒体类型,它的函数与链接元素一起使用。 应该将样式表作为HTML注释编写,也就是说,在 <--和 --> 之间隐藏不支持的浏览器。

导入样式表

你可以使用css语句的@import 导入样式表:

<STYLETYPE="text/css"MEDIA="screen, projection"><!--@import url(http://www.tongchiu.com/gen.css);@import url(/product/file.css);table { background: yellow;color: #003366 }-->
</STYLE>

@import 允许你在使它的他人不同时保持一些相同的情况;并遵循以下语法: @import url(gen.css);

注意:如果导入多个工作表,它们将重叠。最后一个导入的工作表将覆盖第二个。 如果导入样式与主表中声明的规则冲突,则将重写该样式。

inline 样式

inline 样式是附加到一个特定元素的样式。 任何开始标记都可以采用样式属性:

<Pstyle="font-size: 10pt">.

要使用 inline 样式,必须使用 Content-Style-Type HTTP header 扩展声明整个文档的单个样式表语言。 在内联CSS中,作者必须发送文本/CSS作为 Content-Style-Type header,或者在头中包含以下标记:

<METAHTTP-EQUIV="Content-Style-Type"CONTENT="text/css">

命令行语法

基本语法如下:

selector { property: value }

这是( 如颜色) 后面跟冒号(: ) 和一个值的属性。 属性被分配给选择器以操作它的样式。 属性的示例包括颜色。margin 和字体。 值是属性接收的赋值。 单个选择器的多个样式声明可以用分号分隔。 下面的示例定义了H1和P 元素的颜色和 font-size 属性:

<HEAD><TITLE>CSS Example</TITLE><STYLETYPE="text/css">H1 { font-size: x-large;color: darkred }P { font-size: 12pt;color: darkblue }</STYLE></HEAD>

你可以使用选择器和声明组合来减少样式表中重复的语句。 例如:

H1, H2, H3, H4 { color: #666666; font-family: Arial }

选择器

选择器用于将样式声明与元素或者元素关联起来。 这是通过将声明放置在 block 中( 在 {}) 中包括在中并在它的前面。 例如:

p {color: #008000}
div {color: #cccccc; font-size: 14pt}
标记选择器

你可以采用任何打开的HTML标记,并将它的用作选择器:

h3 {color: red}
类选择器

这些允许你给元素一个特定的名称。 例如:

<Pclass="zn">.. .. </P>

在样式表中,语法作为 below:

P.zn { color: blue }

或者像这样:

.zn { color: blue }
伪类选择器

可以将伪类分配给元素以显示链接。访问的链接和活动链接。 anchor元素可以给伪类链接。访问或者激活。 可以定义访问的链接以以不同的颜色呈现,甚至使用不同的字体大小和样式。 示例样式表的外观可能如下所示:

A:link { color: red }
A:active { color: blue; font-size: 150% }
A:visited { color: green }
ID选择器

这些选择器与类非常类似,除了只有一个文档中具有给定in的元素。 使用指示器"#"指定一个ID选择器。 例如:

#abc { text-style: bold }

要使用标识选择器:

<PID=abc>Welcome to my website</P>

注:IDs类应该是 lowercase 中的类,不能以数字开头或者包含空格。 这里选择器类型应仅由于它的固有限制而被使用。

span

这里元素可以用作样式表中的选择器,并且它还接受样式,类和标识属性。 以下是 span的一些示例:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0//EN"><HTML><HEAD><TITLE></TITLE><METAHTTP-EQUIV="Content-Style-Type"CONTENT="text/css"><STYLETYPE="text/css"><!--
.zn { font-size: 28pt }-->
</STYLE></HEAD><BODY><P><SPANCLASS=zn>These words could be big.</SPAN></p><p><SPANSTYLE="font-family: Arial;font-size:12"> And these ones are different.</SPAN>.</P></BODY></HTML>
Div

DIV ( for"除法") 是一个块级元素,在函数中类似于 span。 但是DIV可能包含段落。标题和表格。 例如:

<DIVCLASS=zn><H1>Welcome</H1><P>Hello World</P><P>Welcome to my website!</P></DIV>

属性

颜色

你可以将颜色声明为以下示例:

P {color: red}
H2 { color: #000080 }
LI {color: rgb(12%, 51%, 62%)}
background

background-color 设置元素的background 颜色。 例如:

BODY { background-color: white }
H1 { background-color: #000080 }

注:
1.为了避免与用户样式表冲突,应在使用 background-color 时指定 background-image。 在大多数情况下,background-image: 无适用。
2."Netscape 4.*"在 block 元素的background 中不颜色如果给定了不同于 body的background 颜色,则不颜色。 要避免这里问题,请显式设置边框: 无

使用 background-image 指定的background-image。例如:

BODY { background-image: url(/images/cloud.gif) }
P { background-image: url(http://www.internetcollege.com/bg1.gif) }

background-repeat 这里状态表示 background 图像的平铺。 可能的值包括:重复| repeat-x | repeat-y | no-repeat。

repeat-x 值将水平重复图像,而 repeat-y 值将在垂直方向重复图像。 例如:

BODY { background: white url(candybar.gif);
background-repeat: repeat-x }

在 上面 示例中,图像将只水平平铺。 IE 只将 repeat-x 绘制到右侧,并且 repeat-y 下降,而不是左和右和下,因为它应该是。

background 允许在顺序颜色,图像,重复,附件,位置中指定一个或者多个属性。 例如:

BODY { background: white url(http://www.internetcollege.com/bg1.gif) }BLOCKQUOTE { background: #6699ff }
P { background: url(image/line.gif) #e2e9ee fixed }
TABLE { background: #ffeeff url(house.gif) no-repeat top center }
字体

font-family 允许使用特定字体。 例如:

P { font-family: Times }

你可以指定一对用逗号分隔的字体。 如果你的首选字体不可用,则使用第二种选择。 例如 font-family: Times,宋体。 请注意,任何包含空格的字体名都必须引用,只有单引号或者双引号。 例如:

P { font-family:"New Times Roman", Times, serif }

font-size 可以指定为长度,或者指定以下关键字之一: xx小,x 小,小,medium ( 初始),大,x 大,xx大。 例如:

H2 { font-size: large }
P { font-size: 10pt }
LI { font-size: 80% }
Table { font-size: small}

注意:IE 和Netscape将所有 relative 单元和 % 视为元素默认值,而不是作为父元素的relative。

font-style 定义了以以下三种方式之一显示字体: 正常 , italic 或者 ( 倾斜)。例如:

P {font-style: italic}

font-weight 用于指定可以指定为普通( 初始值)的字体的粗细,或者粗体。 例如:

P {font-weight: bold}

它也可以被指定为绝对数,是 100,200,300,400,700,800,其中是最轻,最粗的。 例如:

H1 { font-weight: 800 }

Font可以用作各种字体属性的shorthand。 例如:

P { font: italic bold 12pt/14pt Times, serif }

这指定具有粗体和 italic 时间的段落,它的字体大小为 12点和 14点的线高。

文本

text-align 值可以是( 初始值),右,中心或者 justify (。与两个边对齐)。 text-align 只适用于 block 元素并且继承。 例如:

H1 { text-align: center }
P.newspaper { text-align: justify }

text-decoration 允许通过以下五个属性之一来修饰文本:

<span style="text-decoration: 下划线"=""> 下划线,<span style="text-decoration: 上上"="> 上的overline <span style= text-decoration: line-through"=""> line-through,<span style="text-decoration: blink"=""> blink,或者默认的<span style="text-decoration: 无"="">。例如:
A:link, A:visited, A:active { text-decoration: none }

text-transform 允许通过以下四个属性之一来转换文本: 无( 初始值),lowercase,大写或者大写( 大写每个单词的第一个字母)。 它适用于所有元素并继承。 例如:

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }
margin

这里属性通过指定长度或者百分比来设置元素的margin。 每个元素可以有四个边距- 左。右。底和顶。 这些是由 margin-left。margin-right。margin-top。margin-bottom 属性定义的。 例如:

P {margin-left: 20px}

可以使用 margin shorthand 同时为所有四个边指定边距。 边距可以为负数,初始页边距为 0.

P {margin: 10px 12px 6cm 8pt}

这将给P 个像素为1 像素,右键为 12像素,底部为 6像素,左 margin 8像素。

规则

继承基本上是一个选择器,它嵌套在另一个选择器中,它将 inherit 指定给外部选择器的属性值。 例如为 body 定义的字体也将应用于段落中的文本。

重要的样式可以指定为重要的,指定 ! 重要。被指定为重要的风格将赢得原本同等重量的矛盾风格。 重要的声明如下:

BODY { background: url(man.gif) white; background-repeat: repeat-x! important }

权重排序权重排序根据权重排序声明。 声明可以有正常权重或者重要权重。 声明是重要的,因为添加了重要( 或者 ! 重要)。例如:

P {font-size: 36pt!important} P {font-size: 16pt}

36 pt将结果,因为声明的权重较大。

当两个规则具有相同的权重时排序排序,最后一个指定的规则获胜。 因此:

P {color: red}
P {color: green}

它会导致绿色。

区分大小写所有CSS都不区分大小写。


相关文章