开发者学堂课程【前端开发CSS基础：CSS 基础】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4254
CSS 基础
内容介绍：
一、css 简介
二、css 代码语法
三、css 注释代码
四、css 引入方式及其优先级
一、css 简介
1、cSS = 层叠样式表( Cascading Style sheets )
2、它主要用于定义HTML内容在浏览器内的显示样式，如字体大小、颜色、字体加粗等。
3、优势:极大地提高了工作效率。
4、举例演示代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
P{
font-size:50px;
color :blue;
font- family: "微软雅黑";
}
<style>
< /head>
<body>
<p>哈哈</p>
</body>
< /html>
结果显示：
二、css 代码语法
selector{
property : value
}
例: h1{color：blue;font-size.20px;}
例子：添加一个 div 标签，给它一个内容，设置一个宽度 100 px，高度 100 px，颜色设置为粉色。
<！DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{ 用 div 标签
width: 100px; 属性对应属性值，属性跟属性值之间用分开，多个属性之间用分号跟开。
height :100px;
background-color: antiquewhite;
}
</style>
< /head>
< body>
<div>哈哈</div>
< /body>
< /html>
演示效果：
还可以为多个元素设置同一个样式，代码如下：
<！DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div，p，h1{
width: 100px;
height :100px;
background-color: antiquewhite;
}
</style>
< /head>
< body>
<div>哈哈</div>
<p>呵呵</p>
<h1>嘿嘿</h1>
< /body>
< /html>
三、css 注释代码
1、/*注释语句*/
2、快捷键: ctrl+?
3、例：利用注释的意思标记代码的功能
/*设置背景颜色*/
divi{
width: 100px;
/*宽度*/
height 100px；
/*高度*/
background-color.red;
/*背景颜色*/
}
四、css 引入方式及其优先级
1、内部样式
内部样式就是把 css 代码写进 style 标签中，再放在页面中 head 语句内。
2、行内样式
行内样式就是直接把 css 代码直接写到现有的 html 标签中。用行内的样式为 div 添加一些样式。宽度 100 px，高度 100 px，颜色设置为紫色。例：
<divrstyle="width:100px;height:100px;background-color:
blueviolet">哈哈</div>
注意：要写到元素的开始标签里 ccs 样式要写到 style 等于双引号之间，如果有多条 css 样式，中间要用分号分开。
3、外部样式
把 css 代码写在一个单独的外部文件中，放在 <head> 区内，使用 <link> 标签将 css 样式文件链接到 HTML 文件内。
例：首先在 cssbase 软件中创建一个 css 文件，名字 css，此时要为页面中的 p 标签添加一些样式。字体大小设置为 50 px，字体颜色设置为粉色。代码如下：
P{
font-size: 50px;
color:magenta ;
}
此时将 css 文件引入到 head 区域内使用 link 标签，href 为资源文件，rel 为当前文档与被连接文档之间的关系，rel=stylesheet 表示被连接的文档是个样式表，type=text/css 为类型是样式表，此时就已经成功引入了 css 文件，代码如下：
< ！DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="css.css" rel="stylesheet"
< /head>
<body>
<div style="width:100px ;height:100px; background-color: blueviolet">哈哈</div>
<p>呵呵</p>
<h1>嘿嘿</h1>
< /body>
< /html>
执行看一下效果：
（1）rel 属性规定当前文档与被链接文档之间的关系。rel="stylesheet" 为指示被链接的文档是一个样式表。
（2）type 属性规定被链接文档的 MIME 类型。MIME类型是“text/css”，该类型描述样式表。
（3）href 属性规定被链接文栏的位置( URL )。
4、导入样式
是指在内部样式表的 <style> 标签里导入一个外部样式表，导入时用 @import。
常用的样式就是内部样式，行内样式，外部样式，导入样式并不常用，推荐使用内部样式和外部样式，行内样式要尽量少用。
5、四种方式的优先级
对于同一个元素设置 css 样式，哪种方式最有效呢？
行内样式>内部样式>外部样式>导入样式
注：内部样式>外部式有一个前提：内部样式 css 样式的位置一定在外部样式的后面。
