什么是CSS
Posted 轻狂书生han
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了什么是CSS相关的知识，希望对你有一定的参考价值。
1. 什么是CSS
如何学习
- CSS是什么
- CSS怎么用（快速入门）
- CSS选择器（重点 + 难点）
- 美化网页（文字，阴影，超链接，列表，渐变...）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效效果，w3c，菜鸟）
1.1 什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS： 表现 （美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动...
1.2 发展史
CSS1.0
CSS2.0 DIV（块）+ CSS ， html与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画......浏览器兼容性~
练习格式：
1.3 快速入门
style
基础入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范 <style> 可以编写css的代码,每一个声明最好适用;结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建议使用这种方式
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范 <style> 可以编写css的代码,每一个声明最好适用;结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<link rel="stylesheet" href="css\\style.css">
</head>
h1{
color: red;
}
效果图
CSS的优势：
-
内容和表现分离
-
网页结构表现统一，可以实现复用
-
样式十分的丰富
-
建议使用独立于html的css文件
-
利于SEO，容易被搜索引擎收录！
1.4 CSS的三种导入方式
<!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">我是标题</h1>
</body>
</html>
拓展：外部样式两种写法
-
链接式：
html
<!--外部样式--> <link rel="stylesheet" href="css/style.css"> -
导入式：
@import 是CSS 2.1 特有的！
<!-- 导入式--> <style> @import url("css/style.css"); </style>
以上是关于什么是CSS的主要内容，如果未能解决你的问题，请参考以下文章