前端学习笔记|CSS基础

css学习

中文学习网站

https://www.w3school.com.cn/

非语义化的标签

1.div

2.span

类型选择器

类型选择器有时也叫做"标签名选择器*"*或者是"元素选择器"，因为它在文档中选择了一个 HTML 标签/元素

类选择器

类选择器以一个句点（.）开头，会选择文档中应用了这个类的所有物件。也就是作为一组来处理。

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 都匹配的类。

html 复制代码

#one {
            background-color: red;
        }

<p id="one">Veggies es bonus vobis</p>

注意：优先级 id选择器>类>元素;用!important修饰一个属性可设置为最高优先级

属性选择器

匹配了出现了某些字符的class

参看属性选择器

伪类和伪元素

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

伪类就是开头为冒号的关键字,

html 复制代码

:pseudo-class-name

伪类和伪元素参考的列表

后代选择器

后代选择器------典型用单个空格（" "）字符------组合两个选择器

html 复制代码

ul li {
            color: red;
        }

子代关系选择器

子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。

邻接兄弟选择器

邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随p元素之后的img元素。

常见的使用场景是，改变紧跟着一个标题的段的某些表现方面，如寻找一个紧挨h1的段，然后样式化它。如果你往h1和p之间插入其他的某个元素，例如h2，你将会发现，段落不再与选择器匹配。(如下面的例子)

html 复制代码

    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>

通用兄弟关系选择器

如果想选中一个元素的兄弟元素，即使它们不直接相邻，可以使用通用兄弟关系选择器（~）。

HTML 复制代码

h1~p {
            color: red;
        }

##行内样式

html 复制代码

 <!-- 行内样式，属性之间用分号隔开 -->
    <p style="color:violet;background-color: black;">p1</p>

内部样式

head的style里面设置选择器

外部样式

用link引入css

html 复制代码

<link rel="stylesheet" href="index.css">

字体

字体族

设置字体族时，可以写多个值，当浏览器不支持前面的字体时，会按顺序找之后的字体

html 复制代码

<style>
        p {
            font-family: "华文宋体", "微软雅黑";
        }
    </style>

字体风格（倾斜）

html 复制代码

#one {
            font-style: italic;
        }

字体粗细

属性名：font-weight，使用数值的范围100到900，400 等同于 normal，而 700 等同于 bold

html 复制代码

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中间贯穿的线

html 复制代码

#one {
            font: bold large "楷体";
            word-spacing: 20px;
            text-decoration: underline;
    }

缩进效果

text-indent 属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

文本对齐

text-align 属性规定元素中的文本的水平对齐方式。

html 复制代码

text-align: left|right|center|justify|initial|inherit;

行高/行间距

line-height 属性设置行间的距离（行高）。

注释：不允许使用负值。

列表属性

具体的表格

html 复制代码

disc | circle | square | decimal | decimal-leading-zero | 
lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | 
armenian | georgian | none | inherit

边框属性

使用border时，顺序不影响，但必须设置style

html 复制代码

div {
            /* border-width: 2px;
            border-style: solid;
            border-color: red; */

            border: solid 2px red
        }

盒子模型

标签可以看成一个容器，margin外边距，padding内边距，有上下左右四个方向

行内块级元素

有input和img，可以设置宽高。

元素类型转换（行内块级互相转化）

使用display属性，将行内元素设置为块级元素

html 复制代码

#span1 {
            display: block; 
        }

浮动

float 属性规定元素如何浮动（浮在容器上，推开原有的元素，不会覆盖）。用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧

right - 元素浮动在其容器的右侧

none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。

inherit - 元素继承其父级的 float 值

html 复制代码

img {
            float: left;
        }

定位

相对定位:可以看成一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。例如指定 top: 30px;一个力推动框的顶部，使它向下移动 30px。

html 复制代码

position: relative;
top: 30px;
left: 30px;

绝对定位absolute：1.如果没有父容器或者父容器没有定位，以浏览器作为定位标准

2.如果父容器有定位，以父容器为定位标准

固定定位：固定定位固定元素则是相对于浏览器视口本身。滑动屏幕时不会跟着滚动。

html 复制代码

background-color: aqua;
            right: 0px;
            bottom: 0px;
            position: fixed;