恶补web之二:css知识(1)

2022-06-18 23:51:27

css指层叠样式表(Cascading Style Sheets)

    样式定义如何显示html元素，样式通常存储在样式表里。把样式添加到html4.0中，是为了解决内容与表现分离的问题。外部样式表可以极大提高工作效率，外部样式表存储在css文件里，多个样式定义可层叠为一。

    html标签原本被设计为用于定义文档内容，由于netscape和ie不断将新的html标签和属性（比如字体和颜色属性）添加到html规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为解决该问题，w3c在html4.0之外创造出样式。所有主流浏览器均支持层叠样式表。

    当同一个html元素定义不止一个样式时，会优先使用小编号的样式：

1.内联样式(html元素内部)

2.内部样式表(位于<head>标签内部)

3.外部样式表

4.浏览器缺省设置

   css规则由2部分组成：选择器以及一条或多条声明。选择器通常是需要改变样式的html元素，而声明由一个属性和一个值组成：selector {property:value},比如以下代码将h1元素内文字定义为红色，同时字体大小设置为14象素：

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

    是否包含空格不会影响css在浏览器的效果，css也是大小写不敏感的。不过存在一个例外：如果涉及到与html文档一起工作的话，class和id名称对大小写是敏感的。

    选择器的分组。你可以对选择器分组，被分组的选择器共享相同的声明：

h1,h2,h3,h4 {

    color:green;

    }

    根据css，子元素从父元素继承属性，但实际不总是如此：

body {

    font-family:Verdana,sans-serif;

    }

根据上条规则，站点的body元素使用特定字体。通过css继承，子元素将继承*元素（本例中为body）所拥有的属性，这些子元素诸如p,td,ul,ol,li,dl,dt;这样所有body子元素都应该显示body设定的字体，子元素的子元素也一样，并且在大多数现代浏览器中，也确实如此。但某些浏览器不支持继承，而且忽略应用于body元素的规则；ie直到ie6还存在相关问题：在表格内字体样式会被忽略。

    如果不希望子元素继承父元素属性，可以单独为子元素创建一个特殊规则即可：

body {

     font-family: Verdana, sans-serif;

     }

td, ul, ol, ul, li, dl, dt, dd {

     font-family: Verdana, sans-serif;

     }

p {

     font-family: Times, "Times New Roman", serif;

     }

    派生选择器允许你根据上下文关系来确定某个标签的样式；比如你只希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以如下定义派生选择器：

li strong {

    font-style: italic;

    font-weight: normal;

}

在上面例子中，只有li中的strong元素会发生改变。

    id选择器可以为标有特定id的html元素指定特定的样式，id选择器以”#“来定义。

#red {color:red;}

#green {color:green;}

下面是如何应用上述样式：

<p id="red">xxx</p>

<p id="green">xxx</p>

    在现代布局中，id选择器常用来建立派生选择器：

#sidebar p{

    font-sytle:italic;

    text-align:right;

    }

以上样式只会应用于出现在id是sidebar元素的段落。

    即使id只能在文档中出现一次，但id选择器作为派生选择器也可以被使用多次：

#sidebar p {...}

#sidebar h2 {...}

    id选择器可以独立发挥作用：

#sidebar{

    border: 1px dotted #000;

    padding:10px;

    }

老版本的ie浏览器会忽略该规则，除非你特别定义这个选择器所属的元素：

div#sidebar {...}

    在css中，类选择器以一个点号显示：

.center {text-align:center}

在上面例子中，所有拥有center类的html元素均居中显示。类名第一个字符不能使用数字，它在firefox中不起作用。

    和id一样，class也可以被用作派生选择器：

.fancy td {...}

以上代码表示类名为fancy更大元素内部的表格单元的样式信息。

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

td.fancy {...}

表示类名为fancy的表格单元的样式信息：<td class="fancy"></td>

    可以为拥有指定属性的html元素设置样式，而不仅限于class和id属性。（只有在规定了!DOCTYPE时，ie7和ie8才支持属性选择器，更低的ie版本不支持。）

    下面代码为带有title属性以及title属性为hello的所有元素设置样式：

[title]

{

color:red;

}

[title=hello]

{

color:5px solid blue;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style type="text/css">

[title=W3School]

{

border:5px solid blue;

}

</style>

</head>

<body>

<h1>可以应用样式：</h1>

<img title="W3School" src="/i/w3school_logo_white.gif" />

<br />

<a title="W3School" href="http://w3school.com.cn">W3School</a>

<hr />

<h1>无法应用样式：</h1>

<p title="greeting">Hi!</p>

<a class="W3School" href="http://w3school.com.cn">W3School</a>

</body>

</html>

下面代码为包含指定值（不必严格匹配）的title属性所有单元设置样式,适合于空格分隔的属性值：

[title~=hello]{color:red;}

下面代码为带有包含指定值得lang属性的所有元素设置样式，适用于连字符分隔的属性值:

[lang|=en]{color:red;}

    属性选择器在为不带有class或id的表单设置样式时特别有用：

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;

}

下表列出了其他的匹配模式：

选择器   描述

[attribute]   用于选取带有指定属性的元素。

[attribute=value]   用于选取带有指定属性和值的元素。

[attribute~=value]   用于选取属性值中包含指定词汇的元素。

[attribute|=value]   用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[attribute^=value]   匹配属性值以指定值开头的每个元素。

[attribute$=value]   匹配属性值以指定值结尾的每个元素。

[attribute*=value]   匹配属性值中包含指定值的每个元素。

应用样式表的3种方法：

1 外部样式表。

<head>

<link rel="stylesheet" type="text/css" href="xxx.css" />

</head>

外部样式表可以在任何文本编辑器中编辑，其中不能包含任何html标签，后缀应该是.css.

2 内部样式表。

<head>

<style type="text/css">

hr {...}

p {...}

body {...}

</style>

</head>

3 内联样式。

<p style="color:sienna;margin-left:20px">

this is a box

</p>

    css背景。css运行应用纯色作为背景，也允许适用背景图像。css在这方面的能力远在html之上。

    p {background-color:gray;}    #将元素背景设置为灰色

    p {background-color:rap;padding:20px;} #如上，不过背景色像外略有延伸（增加一些内边距）

    body {background-image:url;} #设置背景图像

    也可以为属于某个类的某个元素设置背景图像：

p.flower {...}

a.hello {...}

理论上，设置可以向textures和select等替换元素的背景应用图像，不过不是所有浏览器都能很好的处理这种情况。另外background-image不能继承。事实上，所有背景属性都不能继承。

    背景重复。如果在页面上对背景图像进行平铺，可以使用background-repeat属性。

    背景定位。可以用background-position属性改变图像在背景中的位置。

    背景关联。可以用background-attachment属性防止背景滚动（声明图像为fixed）。

CSS 文本属性

属性   描述

color   设置文本颜色

direction   设置文本方向。

line-height   设置行高。

letter-spacing   设置字符间距。

text-align   对齐元素中的文本。

text-decoration   向文本添加修饰。

text-indent   缩进元素中文本的首行。

text-shadow   设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。

text-transform   控制元素中的字母。

unicode-bidi   设置文本方向。

white-space   设置元素中空白的处理方式。

word-spacing   设置字间距。

码农公寓

相关文章