CSS样式(二)

2022-05-12 20:08:42 浏览数 (1)

text-decoration:

none 去掉下划线

underline 文本的下划线

overline 设置文本的上划线

常用于设置a链接样式。

垂直对齐方式:

vertical-align:

top 居上

moddie 居中

常用于图片的垂直居中。

文本阴影:

text-shadow: 阴影颜色 x轴 y轴 模糊半径(模糊程度);

代码语言:javascript复制
text-shadow:black 5px 5px 5px; //css样式,四个值。

伪类样式:

语法:标签名:伪类名{声明一; 声明二;}

伪类名:

a:link 未单击访问时超链样式 a=a:link;

a:hover 鼠标悬于上方时的样式;

代码语言:javascript复制
a:hover{
  color:red; //鼠标悬于上方时字体变红;
}

a:active 单击未释放时的样式;

代码语言:javascript复制
a:active{
     color:red;  //鼠标点击后未释放时字体为红色;      
}

a:visited 单击访问后超链接的样式;

代码语言:javascript复制
a:active{
     color:red;  //鼠标点击访问后的a链接字体为红色;      
}

列表样式

list-style-type:none; 无前缀

list-style-image

代码语言:javascript复制
ul li{list-style-image:url(这里写图片路径);}

link-style-position:inside; 前缀独占一行;

list-style:前缀类型;可设置列表前缀类型;

背景图

background-image:url(图片的路径或地址);

代码语言:javascript复制
background-image:url(img/img1.png);

背景图重复方式

background-repeat:no-repeat; 不平铺

background-repeat:repeat-x;沿着x轴平铺

background-position:center; 背景图定位

background-size:100%;

linear-gradient:to top(渐变方向) ,color1,color2; 渐变色

代码语言:javascript复制
linear-gradient:to top,red,blue;  //从下到上从红到蓝渐变。

往期推荐:

CSS样式(一)

HTML表单

0 人点赞