CSS总结

最新推荐文章于 2020-10-30 10:50:11 发布
最新推荐文章于 2020-10-30 10:50:11 发布
阅读量242 收藏
点赞数
分类专栏： 前端 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CHEN_lianlian/article/details/108828479
版权

CSS总结和实战

一、css的简介：

1、css的定义：层叠样式表。属性和属性值用冒号分隔开，以分号结尾。

2、css的引入方式：

二、选择器

基本选择器：

1、通用元素选择器：
  • 表示应用到所有的标签。
 *{margin: 0; padding: 0;}
2、标签选择器

匹配所有使用div 标签的元素（可以匹配所有标签）

div {color: yellow}
3、类选择器

匹配所有class属性中包含Info的元素。

语法：.类名{样式} （类名不能以数字开头，类名要区分大小写）

.yanse{color: yellow}

<div class="yanse" >我的div</div>
4、id选择器

使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。

语法：#ID名{样式} （ID名不能以数字开头）

#MyColor{color: yellow}

<span id="MyColor">H3</span>
5、组合选择器：

5.1、多元素组合选择器

同时匹配两个或多个标签，用逗号隔开

p, a, div{color: yellow;}

<p>段落</p>

<a>link</a>

<div>你好啊</div>

5.2、后代元素选择器

匹配所有div标签里嵌套的p标签，之间用空格分隔。

div p {color: yellow;}

<div>
	<p>ppppp</p>
	<div>
		<p>pppppp</p>
	</div>
</div>

5.3、子代元素选择器

匹配所有div标签里嵌套的子p标签，之间用>分割

div > p {color: yellow;}

<div>
	<p>div</p>
	<p>div</p>
</div>

5.4、毗邻元素选择器

匹配所有紧随div标签之后的同级标签，之间用+分隔（只能匹配一个）。

div + p {color:yellow;}

<div>div</div>
<p>ppp</p>
6、伪类选择器：

6.1、link, hover, active, visited

​ a: link （未访问的链接状态），用于定义常规的链接状态。

​ a: hover （鼠标放在链接上的状态），用于产生视觉效果。

​ a: active （在链接上按下鼠标时的状态）。

​ a: visited (已访问过的链接状态)，可以看出已经访问过的链接。

6.2、before, after

​ p:before 在每个

元素的内容之前插入内容；

​ p:after 在每个

元素的内容之后插入内容。

常用的属性：

7.1、颜色属性：

​ color:

​ HEX（十六进制色：color: #FFF000 --> 缩写：#FF0）

​ RGB （红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）

​ RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5))

​ HSL （CSS3有效，H表示饱和度，L表示亮度，使用方式：color:hsl(360,100%,50%))

​ HSLA （和HSL相似，A表示Alpha透明度，取值0~1之间)

取色器网址1：http://www.jiniannet.com/Page/allcolor

取色器网址2：https://c.runoob.com/front-end/5449

7.2 transpatent

​ 全透明，使用方式：color:transparent

7.3 opacity

​ 元素的透明度，语法：opacity:0.5;

​ 属性值在0.0到1.0范围内，0表示透明，1表示不透明。

​ filter滤镜属性（只适用于早期的IE浏览器，语法：filter:alpha(opacity:20)😉

三、页面布局：

1、边框

​ border-style: 边框样式

​ solid 默认，实线

​ double 双线

​ dotted 点状线条

​ dashed 虚线

​ border-color: 边框颜色

​ border-width: 边框宽度

​ border-radius: 圆角

​ 1个参数：四个角都应用

​ 2个参数：第一个参数应用于 左上、右下；第二个参数应用于 左下、右上

​ 3个参数：第一个参数应用于 左上；第二个参数应用于 左下、右上；第三个参数应用于右下

​ 4个参数：左上、右上、右下、左下（顺时针）

border:简写

​ border: 2px yellow solid;

box-shadow: 边框阴影

box-shadow: -1px -1px 0 1px #0C2E6D, 1px -1px 0 1px #0C2E6D, -2px -2px 0 1.5px white, 2px -2px 0 1.5px white ;

​ 第一个参数是左右位置

​ 第二个参数是上下位置

​ 第三个参数是虚化效果

​ 第四个参数是外边框扩展宽度

​ 第五个参数是颜色

盒子模型：

img

padding:用于控制内容与边框之间的距离；

margin:用于控制元素与元素之间的距离；

padding、margin表示上右下左都应用
padding-top、margin-top上
padding-right、margin-right右
padding-bottom、margin-bottom下
padding-left、margin-left左

一个参数，应用于四边。

两个参数，第一个用于上、下，第二个用于左、右

三个参数，第一个用于上，第二个用于左、右，第三个用于下。

四个参数，分别应用于上、右、下、左。

渐变色填充：

background: linear-gradient(0deg, #00FF80, yellow, red);

多边阴影：

box-shadow: -1px -1px 0 1px #0C2E6D, 1px -1px 0 1px #0C2E6D, -2px -2px 0 1.5px white, 2px -2px 0 1.5px white ;

CSS3实现32种基本图形：https://blog.csdn.net/laokdidiao/article/details/51189476

四、实战：

设计图
在这里插入图片描述

css效果图
在这里插入图片描述
在这里插入图片描述

代码如下：

手机信号

<div>
  <div class="signal-strengh"  >
    <span class="signalProgress1" [style.background]="signal > 0 ? 'white' : ''"></span>
    <span class="signalProgress2" [style.background]="signal >= 6 ? 'white' : ''"></span>
    <span class="signalProgress3" [style.background]="signal >= 12 ? 'white' : ''"></span>
    <span class="signalProgress4" [style.background]="signal >= 18 ? 'white' : ''"></span>
    <span class="signalProgress5" [style.background]="signal >= 24 ? 'white' : ''"></span>
    <span class="signalProgress6" [style.background]="signal >= 30 ? 'white' : ''"></span>
  </div>
  <div class="inf-text-signal">{{signal}}</div>
  <div class="inf-text-signal">信号强度</div>
</div>

//信号强度显示
.signal-strengh{
  position: relative;
  width: 80px;
  height: 80px;
  //border: 2px solid midnightblue;
  background: black;
  border-radius: 80px;
  .signalProgress1{
    position: absolute;
    margin-left: 18px;
    margin-top: 48px;
    display: block;
    width: 3px;
    height: 5px;
    background: gray;
    border-radius: 2px;
  }
  .signalProgress2{
    position: absolute;
    margin-left: 26px;
    margin-top: 43px;
    display: block;
    width: 3px;
    height: 10px;
    background: gray;
    border-radius: 2px;
  }
  .signalProgress3{
    position: absolute;
    margin-left: 34px;
    margin-top: 38px;
    display: block;
    width: 3px;
    height: 15px;
    background: gray;
    border-radius: 2px;
  }
  .signalProgress4{
    position: absolute;
    margin-left: 42px;
    margin-top: 33px;
    display: block;
    width: 3px;
    height: 20px;
    background: gray;
    border-radius: 2px;
  }
  .signalProgress5{
    position: absolute;
    margin-left: 50px;
    margin-top: 28px;
    display: block;
    width: 3px;
    height: 25px;
    background: gray;
    border-radius: 2px;
  }
  .signalProgress6{
    position: absolute;
    margin-left: 58px;
    margin-top: 23px;
    display: block;
    width: 3px;
    height: 30px;
    background: gray;
    border-radius: 2px;
  }
}
.left-style{
  float: left;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  //text-align: center;
  align-items: center;
}
.inf-text-signal{
  width: 80px;
  text-align: center;
  font-size: 18px;
}

北斗信号

<div>
  <div class="signal-strengh">
    <div class="signal-1">
      <app-separate-signal [signalNumber]="signalGroupNumber.length > 0 ? signalGroupNumber[0] : 0"></app-separate-signal>
    </div>
    <div class="signal-2">
      <app-separate-signal [signalNumber]="signalGroupNumber.length > 0 ? signalGroupNumber[1] : 0"></app-separate-signal>
    </div>
    <div class="signal-3">
      <app-separate-signal [signalNumber]="signalGroupNumber.length > 0 ? signalGroupNumber[2] : 0"></app-separate-signal>
    </div>
    <div class="signal-4">
      <app-separate-signal [signalNumber]="signalGroupNumber.length > 0 ? signalGroupNumber[3] : 0"></app-separate-signal>
    </div>
    <div class="signal-5">
      <app-separate-signal [signalNumber]="signalGroupNumber.length > 0 ? signalGroupNumber[4] : 0"></app-separate-signal>
    </div>
    <div class="signal-6">
      <app-separate-signal [signalNumber]="signalGroupNumber.length > 0 ? signalGroupNumber[5] : 0"></app-separate-signal>
    </div>
  </div>
  <div class="inf-text-signal">5</div>
  <div class="inf-text-signal">北斗信号</div>
</div>

app-signal-group{
  .signal-strengh {
    position: relative;
    width: 80px;
    height: 80px;
    background: black;
    border-radius: 80px;
  }
  .signal-1{
    position: absolute;
    margin-top: 30px;
    margin-left: 15px;
    width: 4px;
  }
  .signal-2{
    position: absolute;
    margin-top: 30px;
    margin-left: 24px;
    width: 4px;
  }
  .signal-3{
    position: absolute;
    margin-top: 30px;
    margin-left: 33px;
    width: 4px;
  }
  .signal-4{
    position: absolute;
    margin-top: 30px;
    margin-left: 42px;
    width: 4px;
  }
  .signal-5{
    position: absolute;
    margin-top: 30px;
    margin-left: 51px;
    width: 4px;
  }
  .signal-6{
    position: absolute;
    margin-top: 30px;
    margin-left: 60px;
    width: 4px;
  }

  .text-signal{
    width: 80px;
    text-align: center;
    font-size: 10px;
  }
  .inf-text-signal{
    width: 80px;
    text-align: center;
    font-size: 18px;
  }
}

<div id="f_1" [style.background]="signalNumber >= 24  ? 'ghostwhite' : ''"></div>
<div id="f_2" [style.background]="signalNumber >= 16  ? 'ghostwhite' : ''"></div>
<div id="f_3" [style.background]="signalNumber >= 8  ? 'ghostwhite' : ''"></div>
<div id="f_4" [style.background]="signalNumber > 0 ? 'ghostwhite' : ''"></div>

app-separate-signal{
  #f_1{
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, .4);;
  }
  #f_2{
    margin-top: 3px;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, .4);;
  }
  #f_3{
    margin-top: 3px;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, .4);;
  }
  #f_4{
    margin-top: 3px;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, .4);;
  }
}

温度计

<div>
  <div class="temperature">
    <div class="lefts-style">
      <div class="background-box1">
        <div class="background-box2">
          <div *ngIf="temperature >= 70">
            <div class="background-box3" [style.height]="temperature * 24 / 100 + 'px'"></div >
          </div>
          <div *ngIf="temperature >= 40 && temperature < 70">
            <div class="background-box3" [style.height]="temperature * 24 / 100 + 'px'" [style.background]="'linear-gradient(0deg, #00FF80, yellow)'"></div >
          </div>
          <div *ngIf="temperature < 40 && temperature >= 0">
            <div class="background-box3" [style.height]="temperature * 24 / 100 + 'px'" [style.background]="'#00FF80'"></div >
          </div>
        </div>
      </div>
      <div class="circle"></div>
    </div>
  </div>
  <div class="temperature-style">{{temperature}}℃</div>
  <div class="temperature-style">温度</div>
</div>

.temperature{
  position: relative;
  width: 80px;
  height: 80px;
  background: black;
  border-radius: 80px;
  .lefts-style{
    position: absolute;
    margin-top: 20px;
    margin-left: 34px;
  }
}
.temperature-style{
  width: 80px;
  text-align: center;
  font-size: 18px;
}
.background-box1{
  width: 11px;
  height: 27px;
  margin-left: 0.5px;
  background: gainsboro;
  position: relative;
  border-radius: 6px 6px 0 0;
  z-index: 1;
}
.background-box2{
  width: 8px;
  height: 26px;
  left: 1.5px;
  bottom: 0;
  background: #0C2E6D;
  position: absolute;
  border-radius: 6px 6px 0 0;
}

.background-box3{
  width: 4px;
  height: 10.3px;
  position: absolute;
  left: 2px;
  bottom: 0;
  background: linear-gradient(0deg, #00FF80, yellow, red);
}

.circle{
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #00FF80;
  box-shadow: 0 0 0 2px #0C2E6D, 0 0 0 3.5px gainsboro;
  z-index: 0;
}

湿度计

<div>
  <div class="water">
    <div class="waterBody">
      <div *ngIf="i > 0 && i <= 25">
        <div class="container1"></div>
      </div>
      <div *ngIf="i > 25 && i <= 50">
        <div class="container2"></div>
      </div>
      <div *ngIf="i > 50 && i <= 75">
        <div class="container3"></div>
      </div>
      <div *ngIf="i > 75 && i <= 100">
        <div class="container4"></div>
      </div>
      <div class="littleWater"></div>
    </div>
  </div>
  <div class="inf-text-water">{{i}}%</div>
  <div class="inf-text-water">相对湿度</div>
</div>

//水滴
.water{
  position: relative;
  width: 80px;
  height: 80px;
  //border: 2px solid midnightblue;
  background: black;
  border-radius: 80px;
}
.waterBody{
  position: absolute;
  margin-top: 27px;
  margin-left: 23px;
  width: 30px;
  height: 30px;
  border:2px solid gainsboro;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  background-color: transparent;
  transform: rotate(-45deg);
}
.littleWater{
  margin-top: 5px;
  margin-left: 30px;
  width: 10px;
  height: 10px;
  border:2px solid gainsboro;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  background-color: transparent;
}

.inf-text-water{
  width: 80px;
  text-align: center;
  font-size: 18px;
}

.container4 {
  width: 20px;
  height: 18px;
  background: red;
  border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;
  transform: rotate(45deg);

  position: fixed;
  bottom: 2px;
  left: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container4:after {
  content: '';
  width: 18px;
  height: 8px;
  background: black;
  border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;

  position: fixed;
  bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container3 {
  width: 18px;
  height: 16px;
  background: #00FF80;
  border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;
  transform: rotate(45deg);

  position: fixed;
  bottom: 3px;
  left: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container3:after {
  content: '';
  width: 16px;
  height: 10px;
  background: black;
  border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;

  position: fixed;
  bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container2 {
  width: 18px;
  height: 14px;
  background: #00FF80;
  border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;
  transform: rotate(45deg);

  position: fixed;
  bottom: 3px;
  left: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container2:after {
  content: '';
  width: 16px;
  height: 9px;
  background: black;
  border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;

  position: fixed;
  bottom: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container1 {
  width: 16px;
  height: 12px;
  background: #00FF80;
  border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;
  transform: rotate(45deg);

  position: fixed;
  bottom: 3px;
  left: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container1:after {
  content: '';
  width: 16px;
  height: 10px;
  background: black;
  border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;

  position: fixed;
  bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

电池电量

<div>
  <div class="battery-icon"  >
    <div class="battery-icon-body"></div>
    <div class="batteryIconHead"></div>
    <div class="batteryIconProgress" [style.width]=" battery * 32 / 100 + 'px'" [style.background]=" battery<= 10 ? 'red': ''"></div>
    <div class="batteryIconProgress" [style.width]=" battery * 32 / 100 + 'px'" [style.background]=" battery> 10 && battery < 20 ? '#ffd800': ''"></div>
    <div class="batteryIconProgress" [style.width]=" battery * 32 / 100 + 'px'" [style.background]=" battery> 20 ? '#00FF80': ''"></div>
  </div>
  <div class="battery-style">{{battery}}%</div>
  <div class="battery-style">电池电量</div>
</div>

//电池电量显示
.battery-icon{
  position: relative;
  width: 80px;
  height: 80px;
  //border: 2px solid gray;
  background: black;
  border-radius: 80px;
}
.battery-icon-body{
  position: absolute;
  left: 20px;
  top: 32px;
  display: block;
  width: 40px;
  height: 18px;
  border: 2px solid gainsboro;
  border-radius: 5px;
}
.batteryIconHead{
  float: right;
  position: absolute;
  height: 10px;
  width: 4px;
  //border: 2px solid gainsboro;
  background: gainsboro;
  border-radius: 2px;
  top: 36px;
  left: 61px;
}
.batteryIconProgress{
  position: absolute;
  display: block;
  background: transparent;
  height: 10px;
  top: 36px;
  left: 24px;
}

.left-style{
  float: left;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  //text-align: center;
  align-items: center;
}
.battery-style{
  width: 80px;
  text-align: center;
  font-size: 18px;
}

连接次数

<div>
  <div class="icon-body">
    <div *ngIf="count > 0" class="icon-style">
      <embed src="assets/images/share/connect.svg"/>
    </div>
    <div *ngIf="count <= 0" class="icon-style">
      <embed src="assets/images/share/noconnect.svg"/>
    </div>
  </div>
  <div class="label-style">{{count}}</div>
  <div class="label-style">日连接数</div>
</div>

app-link-icon{
  .icon-body{
    width: 80px;
    height: 80px;
    //border: 2px solid midnightblue;
    background: black;
    border-radius: 80px;
  }
}
.icon-style{
  float: left;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label-style{
  width: 80px;
  text-align: center;
  font-size: 18px;
}

连接次数

<div>
  <div class="icon-body">
    <div *ngIf="count > 0" class="icon-style">
      <embed src="assets/images/share/connect.svg"/>
    </div>
    <div *ngIf="count <= 0" class="icon-style">
      <embed src="assets/images/share/noconnect.svg"/>
    </div>
  </div>
  <div class="label-style">{{count}}</div>
  <div class="label-style">日连接数</div>
</div>

app-link-icon{
  .icon-body{
    width: 80px;
    height: 80px;
    //border: 2px solid midnightblue;
    background: black;
    border-radius: 80px;
  }
}
.icon-style{
  float: left;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label-style{
  width: 80px;
  text-align: center;
  font-size: 18px;
}
陈不丢
关注
专栏目录
css总结
weixin_34124651的博客
06-14 100
一、概括、 1.1、CSS(Cascading Style Sheets)层叠样式表，起到描述web文档格式的作用，有了CSS就可以把web文档的内容和样式分开，有利于web内容的检索等处理。 1.2、CSS有可能存在于web文档的内部和外部，优先级如下： 内联CSS > 内部CSS > 外部CSS > 浏览器缺省设置 1.3、CSS的语法规则如下： selector...
css整理笔记
ll31523837790的博客
01-28 206
css 层叠样式表 英文(Cascading Style Sheets） 作用：主要用于修饰 html xhtml html5 xml 让网页有种千变万化的形式。 语法：选择符{属性：值} 一，css的4种引入方式 1.内嵌式引入 把style标签嵌套在head标签中 2，行内样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&lt
HTML+CSS总结.doc
11-17
"HTML+CSS总结" HTML（HyperText Mark-up Language）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、...
css总结1
08-03
在“css总结1”中，我们探讨了几种引入CSS样式的方法以及一些基本的CSS属性。 首先，让我们来看一下CSS样式的组成。一个CSS规则通常由两部分构成：选择器和声明。选择器指向你想要应用样式的HTML元素，如`h3`或`p`...
css-common:常用的css总结
03-22
常用的css总结 CSS整块文本溢出省略方案 < style > .wrap { width : 200 px ; white - space : normal ; overflow : hidden ; text - overflow : ellipsis ; display : - webkit - box ; - webkit - ...
关于图片显示问题的CSS总结
04-08
本文将基于“关于图片显示问题的CSS总结”这一主题，深入探讨CSS在处理图片显示时的关键知识点，以帮助开发者更好地理解和解决图片相关的问题。 首先，我们来看CSS中的`background-image`属性，它用于设置元素的...
CSS 总结
weixin_45970171的博客
10-30 178
CSS 总结 margin-left :左边距 margin-bottom：下边距 消除浏览器bug间距边框 *{ ​ margin:0; ​ padding:0; } background-image: url(“images/bg.png”); 背景图片 text-align: center; 文本居中 line-height：40px； 文字垂直居中(与高度同值则垂直居中) border边框 margin-border外边框 border-bottom：2px solid
104道 CSS 面试题，助你查漏补缺(一)
qq_36291960的博客
10-16 386
CSS 面试知识点总结 最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题，本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记，分享这份总结给大家，对大家对 CSS 的可以来一次全方位的检漏和排查，感谢原作者 CavsZhouyou 的付出，原文链接放在文章最下方，如果出现错误，希望大家共同指出！作者：CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/
CSS介绍
qiujiangbing的专栏
12-18 519
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的现实效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的现实效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。 那么CSS和Html是如何在网页代码中相结合的呢？ 通过四种方式 1. style属性方式： 利
HTML+CSS基础总结与特性解析
CSS则用于布局和美化，如设置元素的边距、浮动等，使网页具有更好的视觉效果。" HTML是一种标记语言，其主要功能是定义网页的结构和内容。HTML文本由一系列的HTML命令组成，这些命令描述了页面上的各种元素，例如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值