css样式表

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

本章我们学习css样式表，css是用来美化网页页面效果，如果将html比作人的话，那css就是化妆师了，利用css样式表的重用性，可以简化html文本代码的编写量，css也是html学习中比不可少的一部分。

一、什么是CSS:Cascading Style Sheet简写,层叠样式表、级联样式表、样式表

二、样式表的作用

1.修改页面中元素的显示样式

2. 能够实现内容与表现分离

3. 提高代码的可重用性和可维护性

三、HTML 与 CSS 之间的关系

HTML : 构建页面

CSS : 构建HTML元素的样式

HTML是页面的内容组成，CSS是页面的表现

四、使用CSS样式表

1、使用方式

1、内联样式(行内样式):在html元素中声明样式内容

每个属性都具备 style 属性

2.CSS语法:

1、允许出现多个属性:值对

2、每对之间用 ; 隔开

eg:<h1 style="属性:值;属性:值;"></h1>

属性:

background-color : 背景颜色

color : 文本颜色

特点：只作用在所定义的标签内，其他标签不受影响

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
</head>
<body>
<h1 style="color:red;background-color:yellow;">这是一个一级标题</h1>
<h1>这又是一个一级标题</h1>
</body> </html>

复制代码

2、内部样式表

样式定义在html中的 <head> 中

特点：定义好内部样式表后，当前页面中所有的标签都可以使用定义好的样式,可以实现代码重用。

使用方式:

1、在 <head>中定义<style></style>

2、在<style>元素中添加样式规则

样式规则组成:

1、由选择器和样式声明组成

2、选择器 :

1、当前样式规则的名字

2、决定哪些元素能够使用当前规则

3、样式声明 :

由一对{}，包含多个属性:值; 对

<head>

<style>

选择器

{

属性:值;

.....

}

</style>

</head>

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
<style>
/*这是css的注释方式*/
/*声明样式规则:选择器{属性:值;}*/
h2{
color:red;
background-color:green;
}
</style>
</head>
<body>
<h2>测试h2片段</h2>
<h2>测试h2片段</h2>
<h3>测试h3片段</h3>
<h4>测试h4片段</h4>
</body> </html>

复制代码

3、外部样式表

1.将样式定义在一个外部的CSS文件中(*.css)

2.在HTML页面中，引用CSS文件

3.真正意义的体现样式重用的效果

使用方式:

1、创建外部样式表

2、在外部样式表中声明样式规则

选择器{

属性:值;

}

3、在页面中引入外部样式表

<head>

</head>

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
<style>
/*这是css的注释方式*/
/*声明样式规则:选择器{属性:值;}*/
h2
{
color:red;
background-color:green;
}
</style>
<!--此为style.css中文本内容:
/*声明h3样式:将文本颜色改为 blue 色*/
h3
{
color:blue;
}
/*声明h4样式:将背景颜色改为 pink 色*/
h4
{
background-color:pink;
}
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h2>测试h2片段</h2>
<h2>测试h2片段</h2>
<h3>测试h3片段</h3>
<h4>测试h4片段</h4>
</body> </html>

复制代码

五、CSS样式表特征

1、继承性

2、层叠性

一个选择器可以被重复定义

在多个不同的定义中，不重复的属性可以层叠到一起

如果属性重复的话，以后定义的为准

3、优先级

样式定义冲突时，按照不同样式的优先级来使用样式

1、浏览器缺省设置（最低）

2、外部样式表或内部样式表

-就近原则

3、内联样式（最高）

4、!important

手动调整样式属性的优先级

<!DOCTYPE html>
<html>
<head>
<title> 样式优先级 </title>
<meta charset="utf-8" />
<!-- 此为03—style.css中文本内容：
h3{
/*颜色 green，大小 10pt，背景颜色 #666*/
color:green;
font-size:10pt !important;
background-color:#666;} -->
<link rel="stylesheet" type="text/css" href="03_style.css" />
<style>
/*定义h3的样式：颜色为 red , font-size:30pt*/
h3{
color:red;
font-size:30pt;
}
</style>
</head>
<body>
<h3 style="color:yellow;">这是一个h3标题</h3>
</body> </html>

复制代码

[HTML5开发] css样式表

[HTML5开发] css样式表

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

浏览过的版块

用微信扫一扫