常用的css样式收录

雅伊
66 阅读3分钟

样式选择器

  • 后代选择器（空格）.A .B，选择.A元素后的所有.B元素，
  • 子元素选择器（大于号）.A>.B，选择.A元素的直接后代中的.B元素
  • 相邻兄弟选择器（加号）.A+.B，选择.A元素后紧邻的第一个兄弟.B元素
  • 后续兄弟选择器（号）.A.B，选择.A元素后所有的兄弟.B元素
  • 交集选择器（连在一起）.A.B 选择自身同时拥有.A和.B两个属性的元素

css选择器的优先级

样式优先级： !important > 内联样式 > ID选择器 > 类选择器 > 标签选择器

  • !important

  • 内联样式（1000）

  • ID选择器（0100）

  • 类选择器/属性选择器/伪类选择器（0010）

  • 元素选择器/伪元素选择器（0001）

  • 关系选择器/通配符选择器（0000）

样式穿透

当我们的项目中是用来第三方的组件库之后，想要修改组建原本的样式，此时需要通过样式穿透来修改第三方的组件样式。

  • 原生css 样式穿透 （操作符 >>>）
  外层 >>> 第三方组件{ 样式 }
  • less 样式穿透（深度选择器 /deep/）
  /deep/ 第三方组件 {
    
  }
  • scss 样式穿透（深度选择器 ::v-deep）
  ::v-deep 第三方组件 {
    
  }

scoped ：为了确保每个组件之间不存在相互影响所以不能去除（去除scoped属性会变成全局样式对其他组件也造成影响）

css 基本样式

1.1文字溢出省略号:

文字单行溢出:

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

多行文字溢出:

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

封装


//字数过多点点点
@mixin ellipsis($rows){
  overflow: hidden;
  text-overflow: ellipsis;
  @if $rows > 1 {
    display: -webkit-box;
    -webkit-line-clamp: $rows;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: middle;
  } @else {
    display: block;
    vertical-align: middle;
    white-space: nowrap;
  }
}



/* 引入css样式文件 */
@import './index.scss';

/* 使用引用的方法*/
@include ellipsis(1);

1.2css变量：

CSS变量又称CSS自定义属性，通过在css中自定义属性--var与函数var()组成，var()用于引用自定义属性。谈到为何会在CSS中使用变量，以下使用一个示例讲述。

:root {
 --c-color: orange;
}
.title {
 background-color: var(--c-color);
}

1.3渐变：

渐变分为线性渐变、径向渐变，这里说下，在使用线性渐变的时候，使用角度以及百分比去控制渐变，会更加的灵活

使用方式:

//渐变(方向)
background: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));

//渐变(角度)
background: linear-gradient(88deg, #4DF7BF 0%, rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191, 0) 100%);

边框渐变:

border有个border-image的属性，类似background也有个background-image一样,通过为其设置渐变颜色后，实现的渐变，后面的数字4为x方向偏移量

使用方式:

.border-grident{
  margin-top: 20px;
  width: 200px;
  height: 200px;
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}

css filter 滤镜：

filter效果
blur(px)高斯模糊
brightness(%)调整图像的亮度， 100% 为正常效果，> 100%  更亮， < 100%  则变暗，若没有设置值，默认是1
contrast( % )调整图像的对比度，100% 为正常效果，> 100%  更亮， < 100%  则变暗，若没有设置值，默认是1
drop-shadow(h-shadow v-shadow blur spread color)设置阴影效果，与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，浏览器为了更好的性能会提供硬件加速
grayscale( % )将图像转换为灰度图像，值为100%则完全转为灰度图像，值为0%图像无变化
hue-rotate(deg)给图像应用色相旋转，"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。
invert( % )反转输入图像。100%的价值是完全反转。值为0%则图像无变化。
opacity( % )转化图像的透明程度，与 opacity 属性很相似，不同之处在于通过 filter，浏览器为了提升性能会提供硬件加速。
saturate( % )转换图像饱和度
sepia( % )将图像转换为深褐色
url()URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如： filter: url(svg-url#element-id)

设置渐变色：

linear-gradient  线性渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

  • 开始的方向 （角度 deg）
    方向值：常用的是to top，to bottom，to left，to right,to right top等等
    角度值：常用的是0deg、180deg等等

当为90deg时，渐变线的方向相当于to right，从左指向右

当为135deg时，渐变线的方向相当于to right bottom，从左上指向右下，相反为-135时，就从右上指向左下

  • 颜色的起始 及颜色的位置
    color
    使用关键字red、rgba等颜色值（透明也可以设置）
    stop
    色块终止位置，换句话说就是这块颜色占的区域

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

当第一个stop 的值大于第二个值时得到一条清晰的分割线，不会产生渐变的过度效果

background: linear-gradient(180deg,#02a0ff 60%,red 20%);

否则会有产生渐变的过度效果

 background-image:  linear-gradient(180deg,#02a0ff 20%,red 60%);

radial-gradient  径向渐变

radial-gradient(shape size at position, start-color, ..., last-color);

值描述
shape确定圆的类型:ellipse (默认): 指定椭圆形的径向渐变。circle ：指定圆形的径向渐变
size定义渐变的大小，可能值：farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position定义渐变的位置。可能值：center（默认）：设置中间为径向渐变圆心的纵坐标值。top：设置顶部为径向渐变圆心的纵坐标值。bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, ..., last-color用于指定渐变的起止颜色。
  background-image: radial-gradient(red, yellow, green)
  
   background-image: radial-gradient(circle, red, yellow, green);

1.4 background-size：cover和contain以及100%

contain: 图片放大至满足背景区域的最小边即止，当背景区域与背景图片的宽高比不一致的情况下，背景区域可能会长边下有空白覆盖不全。

cover: 图片放大至能满足最大边为止，当背景区域与背景图片的宽高比不一致时，背景图片会在短边下有裁切，显示不全。

百分比: 可以设置两个值

  • 第一个设置宽度，第二个设置高度
  • 如果只设置了一个值，那么第二个值默认会被设置为auto

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .bg{
      width: 100%;
      height: 300px;
      background: url('./img/mtk.png');
      /* background-size: contain; */ 
      /* background-size: cover; */
      background-size: 100%;
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div class="bg"></div>
</body>
</html>

结果依次为下图展示:

contain：

cover:

百分比（这里是100%）：

1.5 设置 background 哪些属性区域颜色会改变

background 默认填充 content、padding、border

当设置 background-clip 属性时对 background 的填充区域有影响，

设置该属性时默认为 border-box

1.6 css伪类三角形:

首先来看下示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css-三角形</title>
  <style>
    .triangle {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orangered skyblue gold yellowgreen;
}
  </style>
</head>
<body>
  <div class="triangle">
  </div>
</body>
</html>

如果想要一个下的三角形，可以让border的上边框可见，其他边框颜色都设置为透明

.down-triangle {
    width: 0;
    height: 0;
    border-top: 50px solid skyblue;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

1.7媒体查询

页面头部必须有meta关于viewport的声明

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

通常在做响应式布局的时候，以及大屏的时候很常用的，从而实现在不通分辨率下，实现不同的展示效果

/* 超过1920分辨率后显示多列 */
@media screen and (min-width:1920px) {
  .car_box.el-card {
    min-width: 450px !important;
    width: 450px !important;
  }
}

1.8 elementui样式修改的几种方式:

在修改elementui的样式真的是苦不堪言，style使用css的预处理器(less, sass, scss)通过样式穿透去修改组件样式，写法如下：

在一个有时候会遇到修改elementui中table的全部样式，下面就来一一对应的去修改下的：

① 修改表格头部背景:

::v-deep .el-table th{
  background: orange;
}

② 修改表格行背景:

::v-deep .el-table tr{
   background: #eee;
}

③ 修改斑马线表格的背景：

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #ccc;
  }

④ 修改行内线的颜色：

::v-deep .el-table td,.building-top .el-table th.is-leaf {
    border-bottom:  2px solid #eee;
  }

⑤ 修改表格最底部边框颜色和高度：

::v-deep .el-table::before{
   border-bottom:  1px solid #ccc;
    height: 3px
  }

⑥ 修改表头字体颜色：

::v-deep .el-table thead {
    color: #ccc;
    font-weight: 700;
  }

⑦ 修改表格内容字体颜色和字体大小：

::v-deep .el-table{
    color: #6B91CE;
    font-size: 14px;
  }

⑧ 修改表格无数据的时候背景，字体颜色

::v-deep .el-table__empty-block{
    background: #ccc;
  }
::v-deep .el-table__empty-text{
  color: #fff
}

⑨ 修改表格鼠标悬浮hover背景色

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: pink;
}

1.9 FOUC 无样式闪烁(文档样式短暂失效)

如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:

以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。
产生原因：

  • 使用 @import 引入样式表
  • 将css样式放在页面底部
  • 有几个样式表在页面中的位置不同

原理：

样式表晚于html结构加载，加载到样式表时会停止也免得渲染，当样式表被下载解析后，页面将重新渲染，因此出现了短暂的花屏现象。

解决方案:

使用css样式以 link 标签的方式放在 head 中加载

css 预处理器

scss、sass、stylus、less 是css的预处理器，是对 CSS 的扩展， 在保证兼容性的基础上， 允许使用变量、 嵌套、 混合、 样式导入等特性，这些拓展令 CSS 更加强大与优雅。 使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

css的预处理器使css更加简洁、方便修改、可读性强、适应新强并且更易于代码的维护，scss同时提供了特殊的父选择器标识符 & ，通过它可以构造出更高效的嵌套。

  • sass、stylus 的层级通过缩进区分
  • scaa、less 的层级通过 {} 区分

scss 是 sass 的语言版本,scss 是 sass 3 引入新的语法，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。 而scss则和css的规范是一致的。

变量

$ 符号来标识变量；把反复使用的css属性值定义成变量；

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color; // 变量中可存在变量

$link-color: blue;
a {
  color: $link_color; // 中划线和下划线等价，包括对混合器和Sass函数的命名
}

$side : left;
.rounded {
  border-#{$side}-radius: 5px; // 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
}

$nav-color: #F90;// 在全局定义时在当前样式表都可以使用



nav {
  $width: 100px; // 只有nav{}里面才可以使用，当前样式表其他地方可以重复定义和使用
  width: $width;
  color: $nav-color;
}

//编译后
nav {
  width: 100px;
  color: #F90;
}

计算功能

所有数据类型均支持相等运算 == 或 !=

且每种数据类型也有其各自支持的数字运算，支持数字的 (+, -, *, /, %)

$var: 20px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;}

字符串运算： + 可用于连接字符串
注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，
相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号
p {cursor: e + -resize;} //编译后 p {cursor: e-resize; }
p:before { 
  content: "Foo " + Bar;  
  font-family: sans- + "serif";}
// 编译为
p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

继承

继承是基于类class的（有时是基于其他类型的选择器） 允许一个选择器，继承另一个选择器

.class1 {
border: 1px solid #ddd;}

// class2要继承class1，可以使用 @extend 命令：

.class2 {
     @extend .class1;
     font-size:120%;
 }

混合器 Mixin

通过混合可以避免不停地重复一段样式

// 使用@mixin命令，定义一个代码块，而mixin的强大之处，在于可以指定参数和缺省值。
@mixin ellipsis($rows){
  overflow: hidden;
  text-overflow: ellipsis;
  @if $rows > 1 {
    display: -webkit-box;
    -webkit-line-clamp: $rows;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    white-space: normal;
  } @else {
    white-space: nowrap;
  }
}



/*  对混合的使用  
    使用@include命令，调用这个mixin。
    使用时根据需要传入参数
*/
div {
  @include ellipsis(1);
}

模块引入

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，避免了项目中有大量的css文件通过原生的css @import带来的性能问题。

同时被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

@import "foo.scss";  // 都会导入文件 foo.scss
@import "foo";  // 都会导入文件 foo.scss
@import "http://foo.com/bar";   //  插入外部文件
@import "foo.css";  // 等同于css的import命令。
avatar
文章
阅读
粉丝