CSS基础

CSS的基础语法:

  其格式分为两部分:选择器和样式规则。

           样式规则:用于设置样式类容 。

           选择器:用来指定哪些HTML元素采用该样式规则

  格式: H3{color:red;} ,其中H3为选择器,{}中的内容为样式规则。  

      如果有多个样式规则则用(;)隔开。如果要为一个属性赋多个值,中间用(,)分开。

      H3{

        font-family:Arial , sans-serif ;

        color:red ;

        }

一、在HTML中定义样式:

  在HTML中通过<style>标签可以将HTML元素中的样式提炼出来:

  1、id 选择器

  在选择器前面加上 (#)表示这个选择器是一个id属性值。 

<html>
<head>
<title>CSSTest.html</title>
<style type = "text/css">
#red
{background-color:red;}
</style>
</head>
<body>
<a href = "http://www.cnblogs.com/jbelial" id = "red">http://www.cnblogs.com/jbelial</p> <br>
</body>
</html>

  

  2、类选择器 

    在选择器前加(.)表示这个选择器的名可以放在class属性中。  

<html>
<head>
<title>CSSTest.html</title>
<style type = "text/css">
.red
{
background-color
: red ;
padding
: 18px ;
}
</style>
</head>
<body>
<a href = "http://www.cnblogs.com/jbelial" class = "red"> http://www.cnblogs.com/jbelial</p> <br>
</body>
</html>

 

  3、HTML标签名选择器

  当选择器名正好是一个HTML元素名的话,所有相应的HTML元素应用都会用这个样式。 

<html>
<head>
<title>CSSTest.html</title>
<style type = "text/css">
.red
{
background-color
: red ;
padding
: 18px ;
}
h1
{ font-size : 40px; }
</style>
</head>
<body>
<h1> http://www.cnblogs.com/jbelial</h1>
<a href = "http://www.cnblogs.com/jbelial" class = "red"> http://www.cnblogs.com/jbelial</p> <br>
<h1> http://www.cnblogs.com/jbelial</h1>
</body>
</html>

 二、在外部文件中定义样式

  CSS标准中允许将样式单独写在一个.css文件中(在HTML中定义样式不可以在不同的HTML页面间共享),通过<link>标签应用这个文件(这样

便可以达到共享的样式的目的) 。 

@CHARSET "UTF-8";
<style type = "text/css">
<!--
.red
{
background-color
: red ;
padding
: 18px ;
}
h1
{ font-size : 50px; }
-->
</style>

 

<html>
<head>
<title>CSSTest.html</title>
<!-- 引用一个css文件 -->
<link type = "text/css" rel = "stylesheet" href = "CSSTest.css" />
</head>
<body>
<a href = "http://www.cnblogs.com/jbelial" class = "red" id = "link"> http://www.cnblogs.com/jbelial</a> <br>
<h1 > http://www.cnblogs.com/jbelial</h1>
</body>
</html>


三、样式的继承

   如果HTML元素未设置某些样式,但在其父元素中设置了,在子元素就会继承父元素的中的样式。


posted @ 2012-03-06 20:30  贺佐安  阅读(457)  评论(0编辑  收藏  举报