[前端基础]HTML+CSS入门(二)
目录
目录
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS写法种类：
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
内联样式(行内样式)：在标签内部使用style属性，style=" "。
内部样式表：在<head></head>内部使用<style></style>标签，里面是各种选择器
外部样式表：在<head></head>使用<link src=" " rel=" " type=" ">引入外部css文件
CSS注释：单行注释：// 多行注释：/* */
CSS最重要的就是各种选择器，选择器之间的优先级：
相同级别的选择器，后面的覆盖前面的
！important>行内样式>ID选择器>类选择器=伪类>标签选择器=伪元素>通配符选择器>继承选择器
常见的CSS选择器：
标签选择器
使用html标签命名，格式：标签名{ }。如div{ }，p{ }，input{ }等等
类选择器(class选择器)
在标签内设置class值，再使用类选择器。格式：.类名{ } 如 .test{ }，类名可重复
id选择器
在标签内设置id值，格式：#id名{ }，id值不可重复，常配合js使用
通配符选择器
*{ }，代表全局选择器，所有标签都使用，一般用于清除默认样式，设置内外边距为0
其他重要CSS选择器：
复合选择器：
后代选择器
格式：父选择器 子选择器 { }，中间空格隔开，选择所有后代选择器(包括子代、孙子代)
子代选择器
格式：父选择器>子选择器 { }，中间用>连接，只选择所有子代
并集选择器
格式：选择器1，选择器2 { }，中间用逗号隔开，设置选择器1和2的样式
交集选择器
格式：选择器1选择器2 { }，连着写中间不隔开，设置同时满足多个选择器的标签样式，标签选择器必须放在前面
伪类选择器
：表示伪类选择器，伪类表示元素状态，选中元素的某个状态设置属性
格式：选择器：hover{}
不只是a标签，任意选择器都可以设置
结构伪类选择器
根据元素的结构查找元素
格式：选择器：first-child 选择第一个选择器
使用公式 (an + b)。描述：a表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
nth-child与nth-of-type
区别：nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素， 而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是ele，则选择失败。例：div p：nth-child(2){ }，div p：nth-of-type(2){ }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div>div{
height: 20px;
background: #0f0;
}
p{
height: 20px;
background: #0f0;
}
div p:nth-child(2){
background-color: #f00;
height: 20px;
}
div p:nth-of-type(2){
background-color: #00f;
height: 20px;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<p></p>
<p></p>
</div>
</body>
</html>
div p:nth-child(2)不成功的原因就是div的第二个元素不是p标签
伪元素选择器
创建虚拟元素，用来摆放装饰性内容
格式：E：：before 在E元素的里面，最前面添加，after是最后面
常见的CSS属性：
文字颜色：color，高度：height，宽度：width，字体大小：font-size(单位:px)，font-weight(100~700，400为正常值)，字体：font-family(多个字体逗号隔开，从左到右依次查找，最后设置字体族名，分为无衬线和衬线字体)，文本对齐方式：text-align(center：居中)，文字装饰样式：text-decoration(underline：下划线、none：无)，背景颜色：background-color，列表样式：list-style-type/list-style(none:无)，显示模式：display(block:块级元素，inline：行内元素，inline-block：行内块元素)，外边距：margin，内边距：padding，边框线：border，行高：inline-height
其他：
边框：
内外边框都可以设置四个方向的值，可以分开设置:margin-top,margin-right，margin-bottom,margin-left，也可以两个一起设置：margin：10px 15px，代表上下边框为10px，左右边框15px，也可以四个一起：margin：5px 10px 15px 20px 代表上边框5px、右边框10px、下边框15px，左边框20px(逆时针)，padding同理
颜色：
颜色可以使用英文单词，十六进制，rgb值表示
英文：white，red，yellow，blue，black等等
十六进制：#000000~#ffffff，如果三组值一样可以简写，例：#f00 = #ff0000，#0f0 = #00ff00
rgb值：三组0~255的值表示，例：(0，255，255)，还有一种rgba值，a代表透明度，取值（0，1）越低越透明
盒子模型：
html的标签都可以看做是一个盒子分为外边距margin，边框border，内边距padding，内容。设置宽高是设置内容的宽高，整体宽高还要加上内外边距和边框线的大小。
例：
