• 欢迎光临~
> > CSS知识回顾

CSS知识回顾

开发技术 开发技术 2022-07-20 次浏览

什么是CSS

CSS为层叠样式表，主要功能是美化网页。

 

CSS的书写样式

选择器>大括号>修饰内容

p {

    color: red;

}

 

 

CSS的引入方式

CSS有三种引入方式分别为，外部样式，内部样式与行内样式。

外部样式通过link导入样式表，较长的CSS使用外部样式。

<link rel="stylesheet" href="样式位置">

 

内部样式 为在style标签内编写样式，较短的CSS使用内部样式。

  <style>

        样式内容

  </style>

 

行内样式为在网页标签内如a标签，h标签内直接写入样式，一般不适用这种CSS导入方式。

 <p style="color: red;"> 红色</p>

 

样式优先级为越靠近修饰内容优先级越高

行内样式>内部样式>外部样式

 

常用选择器

标签选择器为以HTML标签名为选择器，选中网页内所有同标签的内容进行修饰。

    <style>

        p {

            color: red;

        }

    </style>

 

    <p>设置为红色</p>

 

 

类选择器 class 通过（.类名 进行声明）可以为一个或多个元素设置同样的样式

        .lan {

            color: blue;

        }

 

    <p class="lan">设置为蓝色</p>

    <p class="lan">设置为蓝色</p>

    <p class="lan">设置为蓝色</p>

 

 

ID选择器 ID选择器 （#id名 进行声明）在一个网页中只能出现一次 ID的值为唯一的

        #lv {

            color: green;

        }

 

    <p id="lv">设置为绿色</p>

 

 

高级选择器

后代选择器：将p标签中的所有span标签设置为红色

        p span {

            color: red;

        }

 

    <p>设置为 <span>红色</span><span>红色</span> </p>

 

 

子代选择器：只将div one中的子级p元素进行变色

        .one>p {

            color: red;

        }

 

    <div class="one">

        <div>

            <p>不变</p>

        </div>

        <p>设置为红色</p>

    </div>

    <p>不变</p>

    <p>不变</p>

 

并集选择器：可以设置多个有同样的样式的选择器

   h1,h2,h3{

            color: red;

        }

 

    <h1>红色</h1>

    <h2>红色</h2>

    <h3>红色</h3>

 

常用字体样式

font-family设置字体，可同时设置多个浏览器按照从前到后的顺序选择第一个在本机中存在的字体使用，若无本机字体则用默认字体显示。

 

font-size 设置字体大小，一般单位为px像素

 

font-weight 设置字体粗细 不设置为默认 有两个选项bold(粗) bolder（更粗）

 

color 设置文本颜色 可使用颜色的英语，十六进制码，RGB，RGBA

 

font-style 主要用来设置斜体

 

常用文本样式

text-align 设置文本水平对齐方式，可选左对齐（left），右对齐（right）与居中（center）

 

text-height 设置行高即行与行之间的高度，也可用于设置垂直对齐。

 

text-indent 设置首行缩进一般缩进两个格即为2em

 

text-decoration 设置文本修饰，用于设置下划线（underline）上划线（overline）或取消下划线（none）（最常用）主要用于清除a标签的下划线

 

text-transform 文字变形可以设置全部大写（uppercase），全部小写（lowercase）或所有单词首字母大写（capitalize）

 

控制文本溢出

overflow: hidden;超出指定宽度自动隐藏内容

white-space: nowrap；禁止换行

text-overflow: ellipsis;当文本超出范围用…替代

 

继承与层叠性

CSS中父子关系只继承字体样式，text-开头的 font- line- list- color的样式都会被继承，只要对body标签设置字体相关样式就能成为网页的默认样式。

样式冲突依旧遵循就近原则，选择器相同样式不同不会完全覆盖前一个样式。

 

伪类与伪元素

伪类

a:hover{

    color: red;

}

 

鼠标选择后显示红色

a:visited{

    color: black;

}

 

点击后显示为黑色

 

伪元素

span::before {

    content: "在之前";

}

 

span::after {

    content: "在之后";

}

 

即在span标签前添加 在之前，在span标签后添加在之后

 

背景

background-color：颜色

 

背景颜色可用英语颜色，十六进制色，RGB，RGBA设置

 

background-image：url(路径)

 

背景图片：可设置图片平铺类型

no-repeat：不平铺，即只显示一次

background-position 背景的定位

top 最上bottom 最下 left左 right右

设置背景渐变

background-image：linear-gradient(to 方向，颜色A，颜色B)

 

可设置多个颜色

可在to 方向位置设置为角度deg改变线性方向

 

background-size

cover保持高度一致进行缩放，contain保持宽度一致进行缩放

background样式可复合简写

 background: fixed,red,url(../0719/book.jpg) no-repeat cover;

 

即为固定，红色，背景图，不重复 缩放保持高度与背景一致

盒子模型

 CSS知识回顾

外边距+边框+内边距+内容宽高

margin+border+padding+内容宽高由外到内

border内为标签实际显示大小

可通过设置box-sizing: border-box; 自动扣去padding与border的宽度保持盒子大小

可通设置margin: 0; padding: 0; 去除默认边距

程序员灯塔
转载请注明原文链接：CSS知识回顾
喜欢 (0)