文章目录
为什么学习CSS
CSS是在HTML语言基础上发展而来的,是为了克服HTML网页布局所带来的弊端。在HTML语言中,各种功能的实现都是通过标签元素来实现的,然后通过标签的各种属性来定义标签的个性化显示。
这也造成了各大浏览器厂商为了实现不同的显示效果而创建各种自定义标签。同时为了设计出不同的效果,经常会把各种标签互相嵌套,造成了网页代码的臃肿杂乱。CSS是在HTML语言基础上发展而来的,是为了克服HTML网页布局所带来的弊端。
在HTML语言中,各种功能的实现都是通过标签元素来实现的,然后通过标签的各种属性来定义标签的个性化显示。
这也造成了各大浏览器厂商为了实现不同的显示效果而创建各种自定义标签。同时为了设计出不同的效果,经常会把各种标签互相嵌套,造成了网页代码的臃肿杂乱。
css常用属性
css三种设计方式
第一种: 在标签的 style 属性上设置”key:value value;”,修改标签样式
<html *lang*="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求 1:分别定义两个 div、span 标签,分别修改每个 div 标签的样式为:边框 1 个像素,实线,红色。-->
<div style="border: 1px solid red;">div 标签 1</div>
<div style="border: 1px solid red;">div 标签 2</div>
<span *style*="border: 1px solid red;">span 标签 1</span>
<span *style*="border: 1px solid red;">span 标签 2</span>
</body>
</html>
这种方式的缺点如下
1.如果标签多了。样式多了。代码量非常庞大。
2.可读性非常差。
3.Css 代码没什么复用性可方言。
第二种方法:在 head 标签中,使用 style 标签来定义各种自己需要的 css 样式。
格式如下:
xxx {
Key : value value;
}
示例:需求 1个 :分别定义两个 div 、span 个 标签,分别修改每个 div 标签的样式为:边框 1 个像素,实线,红色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style 标签专门用来定义 css 样式代码-->
<style type="text/css">
/* 需求 1:分别定义两个 div、span 标签,分别修改每个 div 标签的样式为:边框 1 个像素,实线,红色。*/
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>
缺点。
1.只能在同一页面内复用代码,不能在多个页面中复用 css 代码。
2.维护起来不方便,实际的项目中会有成千上万的页面,要到每个页面中去修改。工作量太大了
第三种方法:把 css 样式写成一个单独的 css 文件,再通过 link 标签引入即可复用。
使用 html 的
<link rel="stylesheet" type="text/css" href="./styles.css" />
标签 导入 css 样式文件。
1、css 文件内容:
html 文件代码:
div{
border: 1px solid yellow;
}
span{
border: 1px solid red;
}
html 文件代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link 标签专门用来引入 css 样式代码-->
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>