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 tomatillomelon 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;