HTML第三天
css入门
1.1 css简介
HTML 称之为 超文本标记语言 学习思路：有哪些标签 在浏览器中有什么效果
CSS 称之为 层叠样式表 给HTML添加样式效果
学习css思路： 有哪些样式 能产生什么效果
1.2 css的三种形式
学习思路： 能干什么 在哪写代码 如何写 写什么
三种形式 其实就是三个写css代码的地方
A 行内样式
描述： 在标签的开始标签中 添加一个style的属性 在属性赋值的时候 通过 key:value的形式进行赋值
如果需要设定多个值 此时中间使用 分号隔开
例如: <div style="color: red;">你好世界</div>
模板： <开始标签 style="key:value ; key:value" >内容</结束标签>
局限性： 行内样式只能作用于一个标签 ，如果多个标签有相同的样式 此时行内样式就无法满足需求
<div style="color: red;">你好世界</div>
<div style="color: red;">你好 中国</div>
重复代码太多
B 页内样式
描述：在html网页的head标签中 添加一个style标签 在style标签中 通过 选择器{} 形式选取页面内容
然后在大括号中通过 key:value的形式添加样式
例如:
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div { color: red; background-color: yellow; }
p { color: blue; background-color: pink; }
</style>
</head>
<body>
<div>123</div>
<div>123</div>
<div>123</div>
<p>456</p>
<p>456</p>
<p>456</p>
</body>
局限性：如果多个网页有相同的样式设定 此时如果使用页内样式 还是存在重复内容问题
C 页外样式
描述：在css文件夹中 创建一个后缀为.css文件 然后在文件中通过 选择器 {} 选取页面内容
在{}中 通过key:value进行样式的设定。
并且在html的head标签中 需要通过link标签将其引入到当前文件
例如：
A 在css文件夹中创建一个css文件
div { color: blue; }
p {color: green; }
B 在需要使用当前css的html中 通过link标签引入
<head>
<meta charset="utf-8" />
