1、CSS简介
(1)CSS的全称为:层叠式样式表(Cascading Style Sheets)
(2)CSS也是一种标记语言,用于给HTML结构设置样式,例如:文字大小、颜色、元素宽度等等。
剖析层叠式样式表:
层叠:一层一层“涂”上去
样式:文字大小、背景颜色、元素宽度等等
表:列表
简单理解:CSS可以美化HTML,让HTML更漂亮。
核心思想:HTML搭建结构,CSS添加样式,实现了:结构与样式的分离。
2、CSS的编写位置
(1)行内样式
示例:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS_行内样式</title>
</head>
<body><h1 style="color:green;font-size: 60px;">好好学习,天天向上</h1>
</body></html>
结果:
所谓的行内样式就是与HTML的标签搭配使用。
在HTML中,名值对之间用“=”相连;
例如:
而在CSS中,名与值之间用“:”相连,末尾加";"
总结:
(1)CSS的行内样式是写在标签的style属性中(行内样式又称:内联样式)
(2)语法:
<h1 style="color: blue;">锄禾日当午</h1>
<h1 style="color: red;">汗滴禾下土</h1>
运行结果:
(3)注意点:
1))style属性的值不能随便写,写时要符合CSS语法规范:是名:值;的形式
2))行内样式表,只能控制当前标签的样式,对其他标签无效
例如:
存在的问题:
书写繁琐,样式不能复用,并且没有体现出结构与样式分离的思想,不推荐大量使用,只有对当前元素添加样式时,才偶尔使用。