Css基础语法

最新推荐文章于 2025-07-03 23:57:50 发布

原创最新推荐文章于 2025-07-03 23:57:50 发布 · 845 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

css基础-html 专栏收录该内容

3 篇文章

订阅专栏

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/