您的位置：首页 > Web前端 > CSS

30-CSS-01-CSS(概述&和html结合的方式一二)

2015-08-11 20:25 501 查看
【CSS介绍】

CSS是层叠样式表(Cascading Style Sheets)用来定义网页的显示效果。

可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并

增强了网页的现实效果功能。

→CSS将网页内容和显示样式进行分类，提高了显示功能。

（降低了耦合性，提高了扩展性）

【CSS和HTML结合的方式】

1.style属性方式

利用标签中style属性来改变每个标签的显示样式。

例：

<p style="background-color:#FF0000; color:#FFFFFF">

p标签段落内容。

</p>

该方式比较灵活，但是对于多个相通标签的同一样式定义麻烦，适合局部修改。

2.style标签方式（内嵌方式）

在【head标签中】加入style标签，对多个标签进行统一修改。

<head>

<style type="text/css">

p{ color:#FF0000;}

</style>

</head>

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

===========================================================================================================

【示例1】

<div style="background-color:#0066FF; color:#FF0000">这是一个div区域1</div>


【效果】

网页中显示“这是一个div区域1”背景变成蓝色(#0066FF)，且整个一行背景都是蓝色，说明<div>封装的区域范围是一行；且字体颜色

是红色(#FF0000)；

===========================================================================================================

【示例2】

<head>
<style type="text/css">

div{
background-color:#000000; color:#FFFFFF
}

</style>
</head>

<div style="background-color:#0066FF; color:#FF0000">这是一个div区域1</div>
<div>这是一个div区域2</div>


【效果】

网页中第一行：红色字体（#FF0000）“这是一个div区域1”，其背景为蓝色（#0066FF）；

网页中第二行：白色字体（#000000）“这是一个div区域2”，其背景为黑色（#FFFFFF）。

【解释】

<style type="text/css">是用CSS去解析下面封装的内容，将自定义样式background-color:#0066FF; color:#FF0000用｛｝封装且

指明哪个标签用（这里指定<div>标签用），所以div{background-color:#0066FF; color:#FF0000}表示所有被<div>标签封装的区域

都用该自定义样式。所以在下方只需要直接将数据放入<div>和</div>之间即可。

同时我们希望在一开始就加载样式，所以将<style>放入<head>中。

因此，封装“这是一个div区域1”的<div>标签自定义了样式，可以理解为将<head>中的样式“覆盖”，而封装“这是一个div区域2”的

<div>标签没有再次定义样式，所以沿用<head>中的样式。

【总结】

重复的样式以最后加载的显示，不重复的样式保留原定义。

（如果10个div，其中前9个样式一样，那么可以用这种方法完成，先在<head>标签中定义统一样式，之后将最后一个div对应的样式

在div标签中定义）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航