初识CSS_01
学习目标
- 理解使用CSS的目的,及其作用。
- 理解CSS的三种引入方式。
1、CSS初识
-
概念
CSS(Cascading Style Sheets),通常称为CSS样式表或层叠样式表(级联样式表) -
作用
1、主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式边距等)以及版面的布局外观显示样式。2、CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背静的控制及整体的排版等,而且还可以针对不同的浏览器设置不同的样式。
2、使用CSS的原因及其作用
-
HTML的不足
-
1、HTML不能满足设计者的需求。
-
2、操作HTML属性很不方便。
-
3、HTML里面添加样式,带来的是无尽的臃肿与繁杂。
-
CSS的作用
-
CSS使网页更加丰富多彩,布局更加灵活多变。
-
CSS使HTML从样式中脱离,使HTML专于做结构呈现,样式交给了CSS。
3、引入层叠样式表(书写位置)
- 行内式(内联样式)
- 内部样式表(内嵌样式表)
- 外部样式表(外链式)
3.1、行内式(内联样式)
- 概念
称为行内样式、行间样式。
通过标签的style属性来设置元素的样式。 - 语法
<!-- 行内式 -->
<body>
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3 ... ">内容
</标签名>
</body>
- 案例
<div style="color: pink; font-size: 18px;" >内容</div>
- 缺点
没能实现结构与样式相分离。
3.2、内部样式表(内嵌样式表)
- 概念
将CSS代码集中写在HTML文档的head标签中,并且用style标签定义。 - 语法
<head>
<style type="text/css">
选择器 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
... ...
}
</style>
</head>
- 案例
<!-- 内部样式表 -->
<style type=<