CSS的初识
- CSS：Cascading Style Sheet，层叠样式表。
- CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
HTML的缺点
- 维护困难
- 标记不足
- 网页过"胖"
- 定位困难
CSS的优点
- 表现与内容分离
- 增强了网页的表现力
- 使整个网站显示风格趋于统一
CSS语法
-
每个CSS样式由两个组成部分：选择器(Selector)和声明(Declaration)。声明又包括属性和属性值。每个声明之后用分号结束。
-
基本语法：
selector {property1:value1; property2:value2; ……} -
CSS注释：
/*这是注释*/
CSS的引入
内联样式
- 内联样式表又称行内样式表
- 写在首标记内，只对所在的标记有效
- 几乎任何一个HTML标记上都可以设置style属性
- style标记的使用：
- 标记的style属性只对自身起作用
- style属性值可以包含多个属性/值对，每一属性/值对之间用**“;”**分隔
- 标记自身定义的style样式优先于其他所有的样式的定义
<div>
<p style="color: green">我是一个段落</p>
</div>
内接样式
-
内部样式表：写在HTML的
<head></head>里面 -
只对所在的网页有效
-
使用
<style></style>标记对-
<head> <style type="text/css"> 选择器{} </style> </head>
-
head标签里写style标签
<style type="text/css">
/*写我们的css代码*/
span{
color: yellow;
}
</style>
外接样式
- 外部样式表是将CSS相关语法写在以.css为后缀的CSS文件中
- 一个CSS文件可以供多个网页引用
链接式
-
链接外部样式表是通过link标记引入CSS文件
-
link标记的使用:
-
<head> <link type="text/css" rel="stylesheet" href="out.css"> </head> -
link标记是单个标记，也是空标记（仅包含属性，没有内容）
-
存在于head标记中
-
可出现多次
-
head标签里面写link标签
<link rel="stylesheet" href="文件路径">
stylesheet指向的是css文件
导入式
-
语法：
<style type=""text/css> @import url("out.css"); 选择器{} </style> -
说明:
- 导入样式必须在style标记内的开头位置
- 可同时导入多个，每条语句之间要用**“;”**分隔
<style type="text/css">
@import url('./index.css');
</style>
知识来源于网上
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
