开始学习css

时间:2023-12-18 19:59:38

今天开始学习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”>