css学习
中文学习网站
https://www.w3school.com.cn/
非语义化的标签
1.div
2.span
类型选择器
类型选择器有时也叫做“标签名选择器*”*或者是”元素选择器“，因为它在文档中选择了一个 HTML 标签/元素
类选择器
类选择器以一个句点（.）开头，会选择文档中应用了这个类的所有物件。也就是作为一组来处理。
.highlight {
background-color: yellow;
}
<h1 class="highlight">Class selectors</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
id选择器
ID 选择器开头为#而非句点，不过基本上和类选择器是同种用法。可是在一篇文档中，一个 ID 只会用到一次。它能选中设定了id的元素，你可以在 ID 前面加上类型选择器，只指向元素和 ID 都匹配的类。
#one {
background-color: red;
}
<p id="one">Veggies es bonus vobis</p>
注意：优先级 id选择器>类>元素;用!important修饰一个属性可设置为最高优先级
属性选择器
匹配了出现了某些字符的class
参看属性选择器
伪类和伪元素
伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
伪类就是开头为冒号的关键字,
:pseudo-class-name
伪类和伪元素参考的列表
后代选择器
后代选择器——典型用单个空格（" "）字符——组合两个选择器
ul li {
color: red;
}
子代关系选择器
子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。
邻接兄弟选择器
邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随p元素之后的img元素。
常见的使用场景是，改变紧跟着一个标题的段的某些表现方面，如寻找一个紧挨h1的段，然后样式化它。如果你往h1和p之间插入其他的某个元素，例如h2，你将会发现，段落不再与选择器匹配。(如下面的例子)
h1+p {
color: #fff;
}
<h1>A heading</h1>
<h2>
<p>Veggies es bonus vobis</p>
</h2>
<p>Gumbo beet greens corn soko endive gumbo gourd. </p>
通用兄弟关系选择器
如果想选中一个元素的兄弟元素，即使它们不直接相邻，可以使用通用兄弟关系选择器（~）。
h1~p {
color: red;
}
##行内样式
<!-- 行内样式，属性之间用分号隔开 -->
<p style="color:violet;background-color: black;">p1</p>
内部样式
head的style里面设置选择器
外部样式
用link引入css
<link rel="stylesheet" href="index.css">
字体
字体族
设置字体族时，可以写多个值，当浏览器不支持前面的字体时，会按顺序找之后的字体
<style>
p {
font-family: "华文宋体", "微软雅黑";
}
</style>
字体大小
属性名：font-size,默认大小：16px
属性值表
字体风格（倾斜）
#one {
font-style: italic;
}
字体粗细
属性名：font-weight，使用数值的范围100到900，400 等同于 normal，而 700 等同于 bold
normal|bold|bolder|lighter|number|initial|inherit;
简写属性font
font 简写属性在一个声明中设置所有字体属性，需要按照一定顺序,空格隔开。可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。
可以按顺序设置如下属性：
font-style、font-variant、font-weight、font-size/line-height、font-family
注意，如果没有使用这些关键词，至少要指定字体大小和字体系列/族 （最后两个）。
文本间距
letter-spacing 属性增加或减少字符间的空白（字符间距）。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。
注释：允许使用负值，这会让字母之间挤得更紧。
word-spacing 属性增加或减少单词间的空白（即字间隔）。
该属性定义元素中字之间插入多少空白符。针对这个属性，“字” 定义为由空白符包围的一个字符串,所以“我是谁”这个句子只能识别成一个字符串。
文本修饰（下划线）
text-decoration属性,line-through中间贯穿的线
#one {
font: bold large "楷体";
word-spacing: 20px;
text-decoration: underline;
}
缩进效果
text-indent 属性规定文本块中首行文本的缩进。
注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。
文本对齐
text-align 属性规定元素中的文本的水平对齐方式。
text-align: left|right|center|justify|initial|inherit;
行高/行间距
line-height 属性设置行间的距离（行高）。
注释：不允许使用负值。
列表属性
具体的表格
disc | circle | square | decimal | decimal-leading-zero |
lower-roman | upper-roman | lower-greek | lower-latin | upper-latin |
armenian | georgian | none | inherit
边框属性
使用border时，顺序不影响，但必须设置style
div {
/* border-width: 2px;
border-style: solid;
border-color: red; */
border: solid 2px red
}
盒子模型
标签可以看成一个容器，margin外边距，padding内边距，有上下左右四个方向
行内块级元素
有input和img，可以设置宽高。
元素类型转换（行内块级互相转化）
使用display属性，将行内元素设置为块级元素
#span1 {
display: block;
}
浮动
float 属性规定元素如何浮动（浮在容器上，推开原有的元素，不会覆盖）。用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：
left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值
img {
float: left;
}
定位
相对定位:可以看成一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。例如指定 top: 30px;一个力推动框的顶部，使它向下移动 30px。
position: relative;
top: 30px;
left: 30px;
绝对定位absolute：1.如果没有父容器或者父容器没有定位，以浏览器作为定位标准
2.如果父容器有定位，以父容器为定位标准
固定定位：固定定位固定元素则是相对于浏览器视口本身。滑动屏幕时不会跟着滚动。
background-color: aqua;
right: 0px;
bottom: 0px;
position: fixed;
