文章目录
-
-
- CSS--引入方式
-
- css介绍
- css基本语法
- css简单实例
- css引入方式-- 行内式
- css引入方式-- 内嵌式（内部样式）
- css引入方式-- 外链式
- css引入方式的选择
-
CSS–引入方式
css介绍
css(Cascading Style Sheet)
层叠样式表，它是用来美化页面的一种语言。
- 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。
- 控制页面布局, 比如: 设置浮动、定位等样式。
css基本语法
选择器:是用来选择标签的，选出来以后给标签加样式。
选择器{
样式规则
}
样式规则：
属性名1：属性值1;
属性名2：属性值2;
属性名3：属性值3;
...
css简单实例
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<!-- 所有css样式最外层需要使用style标签 -->
<style>
/* div标签选择器 */
div {
/* 设置标签宽度 */
width: 100px;
/* 设置标签的高度 */
height: 100px;
/* 设置标签的背景 */
background: gold;
}
</style>
</head>
<body>
<!-- 显示内容的内容 -->
<div>内容</div>
</body>
</html>
css引入方式-- 行内式
直接在标签的
style
属性中添加
css
样式
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div style="width:100px; height:100px; background:red ">hello</div>
</body>
</html>
css引入方式-- 内嵌式（内部样式）
在
<head>
标签内加入
<style>
标签，在
<style>
标签中编写
css
代码。
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
div {
/* 宽度 */
width: 100px;
/* 高度 */
height: 200px;
/* 背景色 */
background: red;
}
</style>
</head>
<body>
<div>hello</div>
</body>
</html>
css引入方式-- 外链式
将
css
代码写在一个单独的
.css
文件中，在
<head>
标签中使用
<link>
标签直接引入该文件到页面中。
css文件的代码
div {
/* 宽度 */
width: 100px;
/* 高度 */
height: 200px;
/* 背景色 */
background: red;
}
html文件的代码
<!-- href中指定css文件导入路径 -->
<link rel="stylesheet" type="text/css" href="css/main.css" target="_blank" rel="external nofollow" >
- 优点：
- 使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。
- 缺点：
- css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。
css引入方式的选择
- 行内式几乎不用
- 内嵌式在学习css样式的阶段使用
- 外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。