CSS快速入门
发布于2021-03-13 19:05 阅读(1561) 评论(0) 点赞(19) 收藏(2)
1、什么是CSS
如何学习
1. css是什么
2. css怎么用 （快速入门）
3. css选择器 （重点 + 难点）
4. 美化网页 （文字，阴影，超链接，渐变.....）
5. 盒子模型
6. 浮动
7. 定位
8. 网页动画 （特效动画）
1.1 什么是CSS
CSS：表现(美化网页) 包括内容如下：
颜色、字体、边距、高度，宽度、背景图片、网页定位、网页浮动…
1.2 CSS发展史
CSS1.0
CSS2.0 DIV(块级元素) + CSS，HTML和CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动和定位
CSS3.0 圆角边框，阴影，动画… 浏览器兼容性
CSS3.0继承CSS2.0所有
1.3 快速入门
1.基本入门
这种是内部CSS样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
规范，style 可以编写css代码，每一个声明最后都使用分号结尾
语法：
选择器{
声明1：
声明2：
声明3：
}
-->
<style>
h1{
color: rosybrown;
}
</style>
</head>
<body>
<h1>Holle world！</h1>
</body>
</html>
建议使用这种方式，外部引入CSS
2.CSS的优势
1. 内容和表现分离
2. 网页结构表现统一，可以实现复用性
3. 样式十分的丰富
4. 建议使用独立于html的css文件，也就是上方的外部引入css
5. 利用SEO，容易被搜索引擎收录！
1.4 CSS的3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式 -->
<style>
h1{
color: green;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 优先级：就近原则 -->
<!-- 行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color: red">Holle world！</h1>
</body>
</html>
拓展： 外部样式两种写法
-
导入式：@import 是CSS2.1特有的
-
<style> @import url("css/style.css"); </style> -
链接式：
<!-- 外部样式 --> <link rel="stylesheet" href="css/style.css">
本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。
原文链接:https://blog.csdn.net/HongLingya/article/details/114655178
所属网站分类: 技术文章 > 博客
作者：92wwhehjw
链接：http://www.qianduanheidong.com/blog/article/35811/a9a1d767f051c1eac80e/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力