目录
前言
前端是一项宏大的工作，在开发过程中难免会碰到只靠单方面的知识不容易解决的问题，现在，在html的基础上，学习css这一门与html相辅相成的这类知识，相信一定能达到一加一大于二的效果。
一、什么是css，css有什么用？
1、什么是css
CSS：全称是Cascading Style Sheet（ 层叠样式表），它是一组样式设置的规则，用于控制页面的外观样式
2、css有什么作用
css可以实现内容与样式的分离，更有利于处理布局和定位这类问题，便于团队开发，其次它可以实现样式复用，便于网站的后期维护，同时它对于页面的控制更加的精确，可以让你的页面更加精美。
二、css基础
1、css与html的联系与基础格式
css的基础语法：
<head>
<style>
选择器{
属性名：属性值;
属性名：属性值;
}
</style>
</head>
这里涉及三个方面：
- 选择器：要修饰的对象（东西）
- 属性名：修饰对象的哪一个属性（样式）
- 属性值：样式的取值
而其中选择器分为基础选择器和复合选择器两个大类：
- 基础选择器是由单个选择器组成的；
- 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器
- 标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定 统一的 CSS 样式
- 类选择器：如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择
- 我们可以给一个标签指定多个类名，从而达到更多的选择目的。
- id 选择器：CSS 中 id 选择器以“#" 来定义
- 通配符选择器：在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）
2.css的应用方式
也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式
2.1 内部样式
也称为内嵌样式，在页面头部通过style标签定义
对当前页面中所有符合样式选择器的标签都起作用
2.2 行内样式
也称为嵌入样式，使用HTML标签的style属性定义
只对设置style属性的标签起作用
2.3 外部样式
使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入
三、基础的文字样式修改
这里我以外部样式为例：
首先创建好hello.css和html文件（最好把css文件和html文件分开放）
然后！+Tab设置好html基本格式，head标签中用link标签引入hello.css，在body中新增一个p标签 并打印Hello World!，最后在hello.css中设置p标签的样式。
css字体这是css中可以字体的一些属性，详情点击： css字体。这里就不做过多介绍了。
下面我们看代码以及最后的显示效果：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../css/hello.css">
</head>
<body>
<div>
<p>Hello World!</p>
</div>
</body>
</html>
hello.css：
p{
font-size: larger;
color: red;
}最后效果为：
总结
css与html相结合可以帮助我们更好的规划自己的页面，对于各个标签或者按钮的样式掌握也能更加随心应手，其中更是可以用父类，子类来更加精确的对部分样式进行定义，相信熟练使用后，一定会有所收获。
880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
