标签：href   linear   line   cloud   css   红色   ali   and   back   

CSS3学习记录二

 

字体样式

 

字体

 h1{
     font-family:楷体;
 }

字体颜色

 h1{
     color:red;
 }

字体尺寸

 h1{
     font-size:50xp;
 }

字体粗细

 h1{
     font-weight:bolder;
 }

备注

 span>span>

无特殊功能,但通常用于注重标出.

 

文本样式

 

颜色

通常

 h1{
     color: blue;
 }

设定字体颜色

rgb

 h1{
     color: rgb(0,255,255);
 }

通过rgb设定字体颜色比例,从前往后依次是红,绿,蓝.

rgba

 h1{
     color: rgba(255,0,255,0.2);
 }

相对于rgb增加了a透明度.

字体居中

 h1{
     text-align: center;
 }

段落缩进

 h1{
     text-indent: 2em;
 }

行高

 p{
     line-height: 50px;
 }

line-height=hight即可达到行高居中的效果.

划线

下划线

 p{
     text-decoration: underline;
 }

中划线

 p{
     text-decoration: line-through;
 }

上划线

 h1{
     text-decoration: overline;
 }

去超链接下划线

 a{
     text-decoration: none;
 }

文字相对图片居中

 img,span{
     vertical-align: middle;
 }

 

超链接伪类

 

悬停时产生效果

 a:hover{
     color: blueviolet;
 }

点击时产生效果

 a:active{
     color: azure;
 }

点击后产生效果

 a:visited{
     color: red;
 }

 

列表样式

 

列表序号样式

去掉园或序列号

 ul li{
     list-style: none;
 }

改变序列样式

 ul li{
     list-style: circle;
 }

改实心圆为空心圆,还可以改其他样式.

 

背景

 

背景插入图片

 background: url("../resources/image/Q (1).bmp");

背景图片平铺方式

默认平铺

 background-repeat: repeat;

取消平铺(显示一张图片)

 background-repeat: no-repeat;

沿x轴平铺

 background-repeat: repeat-x;

沿y轴平铺

 background-repeat: repeat-y;

设置背景图片位置

 background-position: 150px 2px;

渐变

 background-image: linear-gradient(to bottom right red yellow);

从左上角到右下角的线性渐变.

背景边框

 border: 1px solid red;

边框宽度1px,实线,边框颜色为红色.

 

盒子模型

 

margin:外边距 border:边框 padding:内边距

内外边距

margin(padding):上宽度 右宽度 下宽度 左宽度;(顺时针)

margin(padding): 0(上下为0) 0(左右为0,auto为居中);

 margin: 1px 10px 20px 30px;

 margin: 0 auto;

边框

border:粗细 样式 颜色;

 border: 1px solid aquamarine;

solid:实线 dashed:虚线

圆角边框

border-radius:左上 右上 左下 右下;(顺时针)

border-radius: 10px(左上右下) 20px(右上左下);(10px相当于圆角半径10px)

盒子阴影

box-shadow: 向下偏移值 向右偏移值 模糊半径 颜色;

 box-shadow: 10px 20px 5px yellow;

 

 

以上内容学习自【狂神说Java】CSS3最新教程快速入门通俗易懂

2020-5-17

CSS3学习记录二

标签：href   linear   line   cloud   css   红色   ali   and   back   

原文地址：https://www.cnblogs.com/ln-a-sh/p/12904437.html