css常用属性和三种设计方式

最新推荐文章于 2024-05-09 10:12:04 发布

星痕落雪

最新推荐文章于 2024-05-09 10:12:04 发布

阅读量341

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_43761222/article/details/105272075

版权

文章目录

为什么学习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>

星痕落雪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css常用属性和三种设计方式

文章目录**为什么学习CSS****css常用属性**css三种设计方式第一种： **在标签的 style 属性上设置”key:value value;”，修改标签样式****第二种方法:在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。****第三种方法：把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。**为什么学习CSSCS...
复制链接

扫一扫