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元素未设置某些样式,但在其父元素中设置了,在子元素就会继承父元素的中的样式。