概念:
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素(我们编辑的html在界面中显示是用什么格式,风格,颜色,背景。)
css的语法:
css由两部分构成:选择器和一条或者多条的样式组。
1.选择器:Slector(html的元素)
id ;class选择器
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
例:
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
例:
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
2.样式表:有一组样式或者多组样式构成
样式分为三种:
- 外部样式表
- 内部样式表
- 内联样式
外部样式表:
当同一个样式需要应用多个页面的时候,外部样式表效率会非常的高。他是将样式表作为一个单独的文件保存在外面,需要引用的时候,盗用引入到页面中即可:调用语句为
<headf>
< link rel=" stylesheet " type="text/css" href="mystyle.css"> mystyle.css 作为地址读到样式声明,并根据它来格式文档。
</head>
--------------------------------------------------------------------------------
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
内部样式表:
区别与外部样式的是 如果单个文档需要特殊的样式时,就应该使用内部样式表。
例:
<head>
<style>
hr {color:000000;}颜色黑色
p {margin-left:20px;}左外距离是20
body {background-image:url("images/back40.gif");}传入背景图地址
</style>
</head>
--------------------------------------------------------------------------------
当样式只需要在一个html元素上应用一次的时候,就会使用内联样式。缺点是会损失掉样式表的许多优势,代码的可读性降,显得杂乱无章
例:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
---------------------------------------------
多重样式:
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
例:
外部样式表的三个属性
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;
颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。
注:当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?(1-4最低到最高)
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)