CSS第一课
- CSS简介
CSS和HTML一样，也是一种标识语言，代码也很简单，也需要通过浏览器解释执行，也可以用任何文本编辑器编写，其文件扩展名为“.CSS”。
- CSS主要功能
CSS的主要功能是美化页面，并且使得网页的内容和样似进行分离（类似于化妆，整容^^）。
使用方法
内联样式、行内样式
格式：
<标签名 style="CSS代码">
第一个代码!
</标签名>
例：
<p style="color: blue;">
第一个代码
</p>
结：
这样的话，p里面的文字“第一行代码”的颜色color就会变成蓝色blue。
内部样式
格式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
CSS代码
</style>
</head>
例：
<style>
p{
color: blue;
}
</style>
结：
这样的话，p里面的文字的颜色color就会变成蓝色blue。
外部样式
创建一个单独的CSS文件，在html的head标签中使用link标签引入，后两项是可选条件
格式：
<link href="CSS文件的路径" type="text/CSS" rel="stylesheet">
例：
<link rel="stylesheet" type="text/CSS" href="../CSS/第一课.CSS">
在这里需要在外面创建一个CSS文件
p{
color: blue;
}
结：
现在对css文件里面的条件进行添加，p标签的颜色也变成了蓝色。
导入的方式
和link方式一样，但是有的浏览器不能用，所以不常用，了解即可
格式
<style>
@import url("导入CSS文件的路径");
</style>
css文件不变
CSS的基本语法
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector{declaration1;declaration2…declarationN}
选择器通常是你需要改变的样式的html元素。选择器包括多种形式，所有的html标签都可以作为选择符，如body p table等
每条声明由一个属性和一个值组成
property表示要格式化的属性的名称，value表示要格式化的属性的取值，每个属性有每个值。
selector{property:value;property:value;…}
插入CSS样式表
格式：
CSS选择器{
属性名：属性值;
属性名；属性值;
...
}
例：
p{
color: blue;
}
CSS特性
继承性
- 层叠性是指同一个HTML文件引用了多个样式表文件时，浏览器会按照样式定义的先后层次来应用样式，如果不考虑样式的优先级，一般都遵守“最近优先原则”。
- CSS样式对内容控制能力的基础就在于HTML文档结构图中的家族继承关系。
- 子级元素会继承父级元素的样式，并且只继承本身没有定义的属性。
标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{属性1:属性值1; 属性2:属性值2; …属性n:属性值n; }
使用标签选择器的优缺点
- 优点：能够快速为页面中同类型的标签统一样式。
- 缺点：不能设计差异化样式，有时候会相互干扰
类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; …属性n:属性值n; }
该语法中，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式
方法
- 第一步：给需要设置样式的标签定义类名称，也就是给标签设置一个class属性，并给class属性赋值。赋的值就是类名称。
- 第二步：在CSS中使用类名称查找html文件中的对应标签。要在类名称前面添加黑色实点。
例：
<style>
.p1{
color:blue;
}
</style>
<p class="p1">
这是类选择器的使用
</p>
类名注意
- 类名第一个字符不能使用数字，它无法在Mozilla或Firefox中起作用。
- 类名严格区分大小写，一般采用小写的英文字符。
- 不建议使用"_"下划线来命名CSS选择器。
- 尽量不缩写，除非一看就明白的单词。
相同的标签可以定义相同的类名称，不同的标签也可以定义成相同的类名称。
ID选择器
ID选择器使用“#”进行标识，后面紧跟ID名，其基本语法格式如下：
#ID名{属性1:属性值1; 属性2:属性值2; …属性n:属性值n; }
该语法中，ID名即为HTML元素的ID属性值，大多数HTML元素都可以定义ID属性，元素的ID值是唯一的，只能对应于文档中某一个具体的元素。
方法：
- 第一步：在html文档中，给某个标签设置id属性，然后给该属性设置属性值，属性值就是id名称。
- 第二步：在CSS文件中使用id名称作为选择器，但是需要在id名称前面添加#。
例：
#np1{
background-color: cyan;
}
<div class="p1" id="np1">
你好，
<div>
世界！
</div>
</div>
注意：id名称在整个文档中是唯一的，不能重名。
* 在CSS是通配符，匹配任意标签。
例：
*{
margin: 0;/*外边距*/
padding: 0;/*内边距*/
}
此为消除内外边距，以后会详细说一下的，此处略过。
编程我也是初学者，难免有写错的地方，希望大家看完之后，发现错误可以评论出来，谢谢大家