Css基础语法

来源：互联网发布：mac安装ubuntu双系统编辑：程序博客网时间：2024/05/12 21:32

css基础语法

css规则

css规则主要由两部分构成:选择器，以及一条或者多条申明,每条申明后面后封号结尾。

selector {declartation1;declartation2;...}

选择器通常是改变样式的HTML元素，每条申明有一个属性和值组成，例如设置h1元素内的文字颜色为红色,同时将大小设置为14px，eg：其中的value可以用多种方式表达，例如红色可以用==red,#ff0000,#f00,RGB(255,0,0),rgb(100%,0%,0%)==多种方式表达。

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

如果要给的值有多个单词，需要给值添加引号：

p {font-family: "sans serif";}

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

Css高级语法

选择器的分组

在使用css时，可以同时对多组数据进行定义，用逗号隔开即可，如下面代码所示：

h1,h2,h3{color:green;}

我们就成h1、h2、h3为一组，他们享有共同的声明。

继承

派生选择器

通过依赖的元素在其位置的上下文来定义样式，可以使标记更加简洁。
派生选择其允许根据文档的上下文关系来确定某个标签的样式，通过合理的使用派生选择器，HTML代码将会变得更加整洁。

eg：你希望列表中的strong元素变成斜体字,而不是普通的粗体字，可以这样定义派生选择器：

ls strong{    font-style:italic;    font-weight:normal;}<p><strong>正常的粗体字,因为我不在列表当中</strong></p><li><strong>斜体子，因为我在ls的strong列表中</strong></ls>

Css id选择器

基础用法

id选择器可以为标记有特定id的html元素制定特定的样式
id选择器以‘#’来定义。
eg：第一个定义元素的颜色为红色，第二个定义元素的颜色为绿色

#red {color:red;}#green {color:green;}<p id="red">红色的段落</p><p id="green"> 绿色的段落</p>

在一个html文档中，id属性只能出现一次

id选择器和派生选择器
在现代布局中，id 选择器常常用于建立派生选择器。
eg:

#sidebar p {    font-style: italic;    text-align: right;    margin-top: 0.5em;    }#sidebar h2 {    font-size: 1em;    font-weight: normal;    font-style: italic;    margin: 0;    line-height: 1.5;    text-align: right;    }

上面的样式（第一段）只会应用于出现在 id 是==sidebar==的元素内的段落。
这个元素可能是div或者表格单元。
应用eg：

<div id="sidebar">这里是正常的显示<h2>这是是前面定义在sidebar h2中的样式</h2><p>这里显示的是前面定义在sidebar p中的样式</p></div>

Css类选择器

在Css中，类选择器一个点号表示.eg:

.center{text-align:center}...<!--引用--><p class="center">这里显示的内容样式为cnter中定义的样式</p>

注意：==类名的第一个字符不能使用数字==。
用作派生选择器：

.fancy td{    color:#f60;    background:#666;}<!--添加引用--><div class="fancy"> <table><tr><td>123</td><td>567</td></tr><tr><td>910</td><td>qwe</td></tr></table></div>

在这里例子中，类名为fancy的更大元素内部的表格单元都会以灰色背景显示橙色文字。

td.fancy{    color:#f60;    background:#666;}<!--引用--><td class="fancy">

我们可以将类fancy分配给任何一个表格元素任意多的次数。那些没有被分配名为fancy的类的单元格不会受到这些规则的影响。

Css属性选择器

对带有制定属性的html元素设置样式。可以为拥有指定属性的html元素设置样式，而不限于class和id属性。

[title]{color:red;}...<h2 title="null or other values"> 这里显示的格式是在[title]中定义好的格式</h2><!--这个例子说明的说名包含指定值的title属性中设置样式-->[title2=reoger]{backgorund=back;}...<p title2="reoger">这里将显示[title2]中定义好的格式</p><p titile2="null or other values">这里显示的是默认格式</p><!--包含指定值的 title 属性的所有元素设置样式，适合于空格分隔的属性值-->[title3~=hello]{color:red;} ...<h2 title3="hello world">这里将显示[title3]中定义好的格式</h2><h2 title3="world or other values (don`t include hello)">这里将显示默认格式</h2><!--包含制定值的lang属性的所有元素设置样式，适合由连字符分隔的属性值-->[title4|=en]{    color=red;}...<h2 title4="en-us">这里将显示[title4]中定义好的格式</h2><h2 title4="null or other values (don`t include hello)">这里将显示默认格式</h2>

创建Css

外部样式

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

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

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。注意css中==属性值与单位之间不要留有空格==

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

<head><style type="text/css">  hr {color: sienna;}  p {margin-left: 20px;}  body {background-image: url("images/back40.gif");}</style></head>

之前我们写代码运行的效果基本上都是采用的这种方式。

内联样式

当样式仅需要在一个元素上应用一次时，应该采用内联样式。可以在相关的标签内使用style属性。eg：

<p style="color: sienna; margin-left: 20px">This is a paragraph</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。eg，

h3 {  color: red;  text-align: left;  font-size: 8pt;  }  <!--假设这里采用的是外部样式--> h3 {  text-align: right;   font-size: 20pt;  }  <!--假设这里采用的是内部样式-->  h3{color: red; text-align: right; font-size: 20pt;}  <!--那么最后h3的结果就是上所示-->

综上，都是css中基础中的基础，记录下来以免忘记。
参考博客http://www.w3school.com.cn/

0 0