字体样式

属性名含义举例
font-family设置字体类型font-family:"隶书";
font-size设置字体大小font-size:12px;
font-style设置字体风格font-style:italic;
font-weight设置字体的粗细font-weight:bold;
font在一个声明中设置所有字体属性font:italic bold 36px "宋体";

font-family属性 字体类型

示列:

p{
    font-family:Verdana,"楷体";
}
body{
    font-family: Times,"Times New Roman", "楷体";
}

font-size属性 字体大小

单位

  • px(像素)
  • em、rem、cm、mm、pt、pc

示列:

h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}

font-style属性 字体风格

属性:

  • normal 默认值。浏览器显示一个标准的字体样式。
  • italic 浏览器会显示一个斜体的字体样式。
  • oblique 浏览器会显示一个倾斜的字体样式。
  • inherit 规定应该从父元素继承字体样式。

font-weight属性 字体的粗细

说明
normal默认值,定义标准的字体
bold粗体字体
bolder更粗的字体
lighter更细的字体
100、200、300、400、500、600、700、800、900定义由细到粗的字体 400等同于normal,700等同bold

font属性 字体属性

字体属性的顺序:字体风格→字体粗细→字体大小→字体类型

示列:

p span{
    font:oblique bold 12px "楷体";
}

文本属性

属性含义举例
color设置文本颜色color:#00C;
text-align设置元素水平对齐方式text-align:right;
text-indent设置首行文本的缩进text-indent:20px;
line-height设置文本的行高line-height:25px;
text-decoration设置文本的装饰text-decoration:underline;

color属性 文本颜色

RGB:

  • 十六进制方法表示颜色:前两位表示红色分量,中间两位表示绿色分量,最后两位表示蓝色分量
  • rgb(r,g,b) : 正整数的取值为0~255

RGBA:

  • 在RGB基础上增加了控制alpha透明度的参数,其中这个透明通道值为0~1

示列:

color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);

text-align属性 排版文本段落

说明
left把文本排列到左边。默认值:由浏览器决定
right把文本排列到右边
center把文本排列到中间
justify实现两端对齐文本效果

text-decoration属性 vertical-align属性 文本修饰和垂直对齐

文本装饰:

text-decoration属性

说明
none默认值,定义的标准文本
underline设置文本的下划线
overline设置文本的上划线
line-through设置文本的删除线

垂直对齐方式

vertical-align属性:

描述
baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom把元素的顶端与行中最低的元素的顶端对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
length
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit规定应该从父元素继承 vertical-align 属性的值。

text-shadow属性 文本阴影

text-shadow : color  x-offset  y-offset  blur-radius;

color: 阴影颜色

x-offset : X轴位移,用来指定阴影水平位移量

y-offset : Y轴位移,用来指定阴影垂直位移量

blur-radius:阴影模糊半径,代表阴影向外模糊的模糊范围

使用CSS设置超链接

伪类名称含义示例
a:link未单击访问时超链接样式a:link{color:#9ef5f9;}
a:visited单击访问后超链接样式a:visited {color:#333;}
a:hover鼠标悬浮其上的超链接样式a:hover{color:#ff7300;}
a:active鼠标单击未释放的超链接样式a:active {color:#999;}

设置伪类的顺序:a:link->a:visited->a:hover->a:active

示例:

/*初始颜色*/
a:link{
 color: #55acee;
}
/*访问后的颜色*/
a:visited{
    color: red;
}
/*鼠标放上去变的意思*/
a:hover{
    color: black;
}
/*鼠标单击未松开的颜色*/
a:active{
    color: #0D7114;
}

nlist-style-type 列表样式

说明语法示例
none无标记符号list-style-type:none;
disc实心圆,默认类型list-style-type:disc;
circle空心圆list-style-type:circle;
square实心正方形list-style-type:square;
decimal数字list-style-type:decimal

示例:

li {
  /*取消样式*/
  list-style:none;
}

background 背景样式

背景颜色:

background-color:背景颜色值:十六进制方法表示

背景图像:

background-image 属性

示列:

background-image:url(图片路径);

背景重复方式

background-repeat属性

  • repeat: 沿水平和垂直两个方向平铺
  • no-repeat: 不平铺,即只显示一次
  • repeat-x: 只沿水平方向平铺
  • repeat-y: 只沿垂直方向平铺

背景定位

background-position 属性

含义
Xpos Ypos单位px,Xpos表示水平位置,Ypos表示垂直位置
X% Y%使用百分比表示背景的位置
X、Y方向关键词水平方向的关键词: left、center、right 垂直方向的关键词: top、center、bottom

background 属性简写

示列:

p{
    /*         背景颜色     背景图像     背景定位 y向右 x向下 背景不重复显示取消默认平铺*/
    background: #81D4FA url("../img/2.jpg") 205px 10px no-repeat;
}

background-size 背景尺寸

属性值描述
auto默认值,使用背景图片保持原样
percentage当使用百分值时,不是相对于背景的尺寸大小来计算的,而是相对于元素宽度来计算的
cover整个背景图片放大填充了整个元素
contain让背景图片保持本身的宽高比例,将背景图片缩放到宽度或者高度正好适应所定义背景的区域

CSS3渐变

线性渐变:

  • 颜色沿着一条直线过渡:从左到右、从右到左、从上到下等

径向渐变:

  • 圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合

IE浏览器是Trident内核,加前缀:-ms-

Chrome浏览器是Webkit内核,加前缀:-webkit-

Safari浏览器是Webkit内核,加前缀:-webkit-

Opera浏览器是Blink内核,加前缀:-o-

Firefox浏览器是Mozilla内核,加前缀:-moz-

线性渐变语法

linear-gradient ( position,  color1,  color2,…)

position:渐变方向

color1: 第一种颜色值

color2: 第二种颜色

兼容语法

-webkit-linear-gradient ( position,  color1,  color2,…)

-webkit 要兼容的浏览器

总结

css3美化总结.png

最后修改:2021 年 12 月 22 日
如果觉得我的文章对你有用,请随意赞赏