css层叠样式表

Hit_me

浏览: 19531 次
性别:
来自: 成都

最近访客更多访客>>

xiaosansan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

css层叠样式表

CSS的简单声明：

CSS:的全称是（Cascading Style Sheet）,他的主要作用是定义如何显示HTML中的元素。

语法构成：选择器，属性，值；如下。

P{background-color:red;font-size:12px…….}

</style>

选择器p是某个HMTL标签的名称或者自定义的名称,属性background-color是你控制的样式的背脊颜色，red值就是你的背景颜色红色。

上面一样我的p选择器的的属性不只有一个我就需要用到分号“；”把我的属性隔开，属性名和值我们用“：”冒号隔开。

这里要注意的是<style>标签我们是放在<head>里面的。

选择器：

下面我们来的谈一下选择器的分类，可以分为 HTML选择器，类选择器，ID选择器，伪类选择器，伪元素选择器，上下文选择器，群组联合选择器，简单的说它的作用是说明这条样式规则在网页中适合范围，或者说网哪个地方或那些地方将要用到它。

HTML选择器：

使用某种HTML标签的名称作为选择器如table,p,a,h1,body等等，这样做的目的是为了覆盖浏览器内部对这样标签显示方式预先定义的规则。

如我们最常用的就是body{background-imag:url(imgs/02.png)}像淘宝，京东有些时候就是这样的一般都是先用scc把body的背景先做出来让后再在body上面写内容。

类选择器：

有时候，我们要求页面中同一种标签完全以一种外观显示并不可行，比如一个<input>的外观当他作为一个文本框显示的是普通的外观，而当它作为一个按钮的时候又是另一种外观。范例如下：

<style>

.txt{

Border:1px dashed;

Background-color:red;

}

.txt2{

Border:1px solid;

Background-color:#ccccff;

Font-weight:bold;

}

</style>

<form>

<form>

显示的结果我就不用图表示出来了，我们来说说ID选择器的主要事项，首先是以“.”号开头，类名可以自己定义当必须符合命名规范，让后在要用的标签里面跟是class就行了，

ID选择器ID顾名思义都知道特有的，有时候需要为页面特定的某个标签指定自己特有的外观那么就会用到。

#mytable{

Width:260px;

Boder:red;

Boder-style:double;

}

</style>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

ID选择器样式规则在一个页面中只被使用一次，只能在一处标签使用此样式规则。

伪劣选择器：

伪劣用于向其他选择器指定适用范围内的特定元素或特定状态制定样式，使用的最多的就是当一个页面中超链接在不同场景下的样式；

A:like{color:blue}

A:visited{color:gray}

A:hover{color:red;font-size:16px;text-decoration:underline;}

A:active{font-style:italic}

</style>

<a herf=5.1.html>样式规则声明<a>

Like:链接，visited:访问，hover:悬浮，active：鼠标点击时，这四个样式规则声明所使用的选择器是锚伪类。注意：这个锚类应按照这个顺序写。

伪元素选择器：

伪元素用于向其他选择器指定适用范围内的元素特定部分指定样式。一般应用与文本快的首行或文本快的首字字符。

Font-size:14px;

}

P:first-line{

Font-size:16px;

Text-decoration:line-through;

}

H1{

Font-size:18pt;

Color:black;

}

H1:first-letter{

Font-size:24pt;

Color:red;

}

</style>

<p>这是一个段落，它的第一行文字将有删除线修饰，字号比其他他行要大。这是一个段落，它的第一行文字将有删除线修饰，字号比其他他行要大。这是一个段落，它的第一行文字将有删除线修饰，字号比其他他行要大。</p>

<h1>这是一级标题，它的第一个字号比其他的大，字是红色额<h1>

注意：样式表中有俩条伪元素选择器的样式规则声明，p:first-line伪元素设置了页面中所有段落的第一行的样式，h1-first-letter伪元素设置了页面中所有一级标题的样式。

上下文选择器：

上下文选择器又称为派生选择器，用于根据上下文关系来确定某个标签是否使用上下文选择的样式规则。

Ol li{list-style-type:upper-alpha;font-size:14px;}

</style>

<p>XX公司三亚之旅第一天行程<p>

<ol>

<li>07:00在大广场集合</li>

<li>07:30乘飞机前往三亚</li>

</ol>

群组联合选择器：

多个样式规则的定义相同，但选择器名称不同。可以将这些规则合成为一个样式规则。

H1,h2,h3{color:black;text-align:center;font-family:”微软雅黑”;}

H1{font-size:24px}

H2{font-size:16px}

H3{font-size:12px}

</style>

常用的CSS样式属性

背景：

边框:

文本：

字体：

列表：

我只是把一些常用的找了出，也没有在一个一个的举例了相信大家看了这些都知道怎么用了吧。

总结：

CSS层叠样式表对页面元素外观风格可实施全面并精确的控制，CSS可使得网页的结构与表现分离，即网页的内容结构由HTML标签负责，网页的外观风格由CSS负责。

CSS层叠样式表的代码体现为多条样式规则，样式规则除对样式进行定义之外，还说明此规则的适用范围。样式规则由选择器和大括号内的一组样式定义构成。样式定义是样式属性的名/值对集合，选择器说明此规则定义的样式作用于页面中的哪些元素。

选择器包含了HTML标签选择器，类选择器，ID选择器，伪类选择器，伪元素选择器，上下文选择器，群组选择器等。

样式代码可以放置在当前网页的头部，也可放置在网页之外独立的样式文件中，还可以内联在标签的style属性中。

常用的样式属性包含：background , border , font , list-style , color , letter-spacing , word-spacing , text-align , text-transform , text-indent , text-decoration等。