css初识及引入样式
概念:css通常称为css样式表或层叠样式表
作用:
- 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式- css以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
引入css样式表的三种方式:
1)行内式(内联样式)
概念:称行内样式、行间样式,是通过标签的style属性来设置元素的样式基础语法<标签名 style="属性1:属性值1;属性2:属性值2;">内容</标签名>
注意:
style其实就是标签的属性
样式属性和值之间用:
多组属性值之间用;隔开
只能控制当前的标签和嵌套在其中的字标签,造成代码冗(rong)余缺点:没有实现样式和结构的分离
2)内部样式表(内嵌样式表)
是将css代码集中写在HTML文档的head头部标签中,并且用style标签定义基础语法
<head><style type="text/css">div{color: red;font-size: 12px;}</style></head>
注意
style标签一般位于head标签中,理论上他可以放在HTML文档的如何地方。
type="text/css"在html中可以省略。
只能控制当前的页面。
缺点:没有彻底分离
3)外部样式表(外链式)
概念:是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中基本语法
<head><link rel="stylesheet" type="text/css" href="css文件路径"></head>
注意
link是一个单标签
link标签要放在head头部标签中,并且指定link的三个属性缺点:需要引入
CSS样式总结:
选择器用于指定css样式作用的HTML标签,花括号内是对该对象设置的具体样式属性和属性值以“键值对”的形式出现属性是对指定的对象设置的样式属性属性和属性值之间用“.”连接多个“键值对”之间用“;”,进行区分