前端-CSS样式的简单介绍

CSS

---

CSS的作用是调整HTML标签的样式，美化网页的界面

CSS的结构

每个CSS都由两个部分组成，分别是选择器与属性

选择器用于选择要修改样式的标签

属性是标签内要具体修改的内容

p {
    color: black;
}

在没有规定选择器范围时，默认为整个HTML文件，上述代码是把所有的p标签中的文字颜色更改为黑色

CSS的添加方式

CSS有三种添加方式

1.导入CSS文件

将所有的CSS样式集中在CSS文件中，方便集中管理

使用时在网页的head标签中使用link导入CSS文件即可

2.style标签

在head中添加style标签，把所有的CSS样式放置在标签中，方便查看

<style>
    p {
        color: black;
    }
</style>

3.直接写在标签内部

使用最快捷，但是查找时比较繁琐

选择器的范围

选择器有多种方式来规定适用范围

1.布局标签

直接选择指定标签，还可以选择布局标签body、div等，来规定该布局空间内的所有标签的属性

div {  
        color: green;
}

2.id/class

通过指定的id/class来指名道姓查找标签

目标是id时需要在前面添加#

目标是class时需要在前面添加.

#d1 {
    color : red;
}
.c1 {
    color : red;
}

3.属性选择器

通过筛选属性来查找标签，属性需要添加括号

[name] {
    background-color: red;
}

4.*

*代指所有的标签，一次性修改所有标签的属性

选择器的优先度

同一标签可以同时被多个选择器修改标签，但会根据优先级只生效一个

选择器相同，位置不同时

                就近原则，优先生效距离最近的一个

选择器不同时

                行内 > id选择器 > 类选择器 > 标签选择器

组合选择器

当多个不同的选择器修改的属性样式相同时，可以用逗号将它们合并成一个

div {
    color: red;
}

p {
    color: red;
}

span {
    color: red;
}
-----------------------------
div,p,span {
    color: red;
}

weight与height

        weight与height分别用来控制标签宽度与高度

        如果没有设置宽度的话，默认宽度由标签内的内容长度来自动分配

字体相关属性

font-family

        修改字体样式，默认字体为黑体

        可以输入多个字体选择，使用优先级为从左到右

font-size

        修改字体大小，可以选择预设的大小，也可以手动设置

font-weight

        修改字体粗细

text-align

        调整字体的对齐样式，默认为左侧(left)，可以选择居中(center)，右侧(right)

color

        调整字体颜色，可以使用颜色对应的英文单词或者rgb来确认颜色

        如果输入rgba，则最后一个数字用来调整不透明度(0-1)

decoration

        调整字体样式，可以选择添加下划线、删除线等

        也可以用来清除a标签中默认拥有的删除线

背景属性相关

大多数标签中都存在背景属性，例如表单、布局标签等，背景位于标签内部最底层

background-color

        调整背景色，方式与调整字体颜色相同

background-image

        将背景更改为图片，如果背景大小大于图片大小默认将图片平铺

background-repeat

        当背景大小大于图片大小时，图片的填充方式，默认为平铺

边框相关

边框是所有标签都拥有的属性，相当于标签的边界

边框有四个方向，如果不选择方向默认为全选

border-color

        调整边框颜色，方式与调整字体、背景相同

border-size

        调整边框厚度，单位为px

border-style

        调整边框样式，默认为无边框