今天开始学习css;应用一本《HTML5与CSS3网页设计基础》
先学习css样式规则声明。
Body{ color:blue}
对应:选择符:{声明属性:声明值};
Background-color:属性
Body{ Background-color:yellow}
配置元素背景颜色css属性是Background-color:,颜色是黄色
Color属性
Body{ color:red}
配置文本颜色css属性是color,颜色是红色。
配置背景颜色也文本颜色
Body{ Background-color:yellow color:red }
注意:css语法允许通过多种方式配置颜色:
l 十六进制颜色值
l 十六进制短颜色值
l 十进制颜色值(RGB三元组)
l Css3新增的HSL
配置css方式有四种:内联,嵌入,外部和导入。
Style属性
<h1 style=“color:#cc0000”>
如果属性不止一个,用;分割开。
<h1 style=“color:#cc0000 Background-color:yellow”>
将全局body标记配置成白底绿字。这种样式也会被其他元素继承
<Body style=“Background-color:yellow color:#cc0000”>
h1元素配置成绿底白字。将覆盖body元素的全局样式。
<h1 style=”background-color:#008080; color:#F5F5F5;”>
内联样式并不常用。它的效率并不高,并且会给网页带来额外的代码。不便于维护。
配置嵌入的css
嵌入样式将于与整个文档,这些样式将要放在head部分的<style>中,以<style>开始,以</style>结束。
代码为
<head>
<style>
Body{
Background-color:#CCFFFF;
Color:#000033;
</style>
</head>
}
嵌入的css样式可以用于h1,h2,div,p,ul,ol,li,等元素
在head中配置body,h1,h2
<style>
Body{background-color:#E6E6F6;color:#191970;}
h1{background-color:#E6E6F6;color:#191970;}
h2{background-color:#E6E6F6;color:#191970;}
配置外部css
当css位于网页文档内部时,css的灵活性与强大才真正显露无遗。
外部样式是包含css样式规则的文本文件,使用. Css拓展名。通过link相关联。因此,多个网页可以共同关联同一个. Css文件。
Link元素
Rel属性值是“stylesheet”
Href属性值是“.css”文件名
Type属性值是“text/css”
例如在head中加入一下代码,将网页和外部样式表与color.css关联。
<link rel=”stylesheet” href=””color.css”>