行内式(内联样式)
通过标签的style属性;来设置元素的样式
<标签名 style="属性1:属性值1;属性2:属性值2;">内容</标签名>
任何标签都拥有style属性,用来设置行内式
例如:
<div style="color:bule; font-size:16px">天下第一</div>
style其实就是标签的属性
样式属性和值之间使用 :
多组属性之间用 ; 隔开
只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余
缺点:
没有实现样式和结构组分离
内部样式表(内嵌样式表)
将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
<head>
<style type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
{
</style>
</head>
<style>
div {
color: red;
font-size: 18px;
}
</style>
style标签一般位于head标签中,理论上也是可以放在html文档的任何地方
type="text/css"在html5中可以省略
只能控制当前的页面
缺点:
没有彻底分离
外部样式表
将所有的样式放在一个.css为扩展名的外部样式文件中
通过link标签将外部样式表文件链接到html文档中
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
link是个单标签
link标签需要放在head头部标签中,并且指定link标签的三个属性
样式书写团队标准:
一种是紧凑型(compact)
h3 { color: deeppink;font-size: 20px;}
一种是展开格式(推荐)
h3 {
color: deeppink;
font-size: 20px;
}
CSS样式规则
总结:
选择器用于指定CSS样式作用的HTML标签,花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
属性和属性值之间用英文 : 连接。
多个键值对之间用英文 ; 进行区分