引用
慕课网HTML+CSS基础课程
概要
实践中用到的内容
内容
1.使用CSS样式的一个好处是通过定义某个样式，
可以让不同网页位置的文字有着统一的字体、字号或者颜色等
CSS全称为“层叠样式表 (Cascading Style Sheets)”，
它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等
2.CSS代码语法
css 样式由选择符和声明组成，而声明又由属性和值组成:
选择符：又称选择器，指明网页中要应用样式规则的元素
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。
当有多条声明时，中间可以英文分号“;”分隔
1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号
2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内
3.CSS注释代码
就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明
（Html中使用<!--注释语句-->)
4.CSS样式可以写在哪些地方呢
从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种
内联式css样式表就是把css代码直接写在现有的HTML标签中
外部式css样式，写在单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，
这个css样式文件以“.css”为扩展名，
在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内
1.rel="stylesheet" type="text/css" 是固定写法不可修改。
2.<link>标签位置一般写在<head>标签之内。
三种方法的优先级:
内联式 > 嵌入式 > 外部式
就近原则（离被设置元素越近优先级别越高）
5.类选择器
类选择器在css样式编码中是最常用到的
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）
ID选择器
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
类和ID选择器的区别:
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。
与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。
而类选择器可以使用多次。
2.可以使用类选择器词列表方法为一个元素同时设置多个样式。
我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，
ID选择器是不可以的（不能使用 ID 词列表）
子选择器:大于符号(>),用于选择指定标签元素的第一代子元素
包含(后代)选择器:包含选择器，即加入空格,用于选择指定标签元素下的后辈元素
请注意这个选择器与子选择器的区别，
子选择器（child selector）仅是指它的直接后代，
或者你可以理解为作用于子元素的第一代后代。
而后代选择器是作用于所有子后代元素。
后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器:通用选择器是功能最强大的选择器，它使用一个（*）号指定，
它的作用是匹配html中所有标签元素
伪类选择符:允许给html不存在的标签（标签的某种状态）设置样式，
比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
现在比较常用的还是 a:hover 的组合。
分组选择符:为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）
6.继承
CSS的某些样式是具有继承性的，
那么什么是继承呢？
继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代
但注意有一些css样式是不具有继承性的
7.特殊性, 重要性
有的时候我们为同一个元素设置了不同的CSS样式代码，
那么元素会启用哪一个CSS样式呢?
因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
注意：还有一个权值比较特殊--继承也有权值但很低，
有的文献提出它只有0.1，所以可以理解为继承的权值最低。
如果在html文件中对于同一个元素可以有多个css样式存在
并且这多个css样式具有相同权重值怎么办？
层叠:就是在html文件中对于同一个元素可以有多个css样式存在，
当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，
处于最后面的css样式会被应用
有些特殊的情况需要为某些样式设置具有最高权值，怎么办？
这时候我们可以使用!important来解决, 例如:
p{color:red!important;}
注意：!important要写在分号的前面
浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，
但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
8.段落排版--缩进
中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：
p{text-indent:2em;}
段落排版--行间距（行高）:p{line-height:1.5em;}
段落排版--中文字间距、字母间距:
可以使用 word-spacing 来实现
9.元素分类
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
设置display:block就是将元素显示为块级元素,
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
块状元素也可以通过代码display:inline将元素设置为内联元素。
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
代码display:inline-block就是将元素设置为内联块状元素
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
