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