学习CSS--初步接触

为什么要使用CSS

一、HTML的局限性

1.HTML满足不了设计者的需求
2.操作html属性不方便
3.HTML里面添加样式带来的是无尽的臃肿和繁琐
所以这时候，CSS出现了，CSS的最大贡献就是： 让 HTML 从样式中脱离， 实现了 HTML 专注去做 结构呈现，样式交给css。

二、CSS初识

概念：
CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
作用：
主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

三、引入（书写）样式

1.行内式
语法：
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>
需要注意的是：
style其实就是标签的属性
样式属性和值中间是冒号（ :）
多组属性值之间用分号（；）隔开。
只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
缺点：
没有实现样式和结构相分离
2.内部样式
语法：
< style >
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
< /style >
注意：
style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type=“text/css” 在html5中可以省略。
只能控制当前的页面
缺点：
没有彻底分离
3.外部样式
概念：
称链入式
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
语法:
< head >
< link rel=“stylesheet” type=“text/css” href=“css文件路径” >
< /head >
注意：
link 是个单标签
link标签需要放在head头部标签中，并且指定link标签的三个属性