CSS(a链接、图片、文本、背景、伪类样式)

December 09, 2023
测试
测试
测试
测试
1 分钟阅读

前端代码需要记忆的比较多,需要多写,加深记忆。

目录

设置a链接样式 图片的垂直居中 设置文本阴影 伪类样式 列表样式 背景图 背景图重复方式

设置a链接样式

属性:

text-decoration

属性值:

none 去掉下划线

underline 文本的下划线

overline 设置文本的上划线

语法:

text-decoration:none;

图片的垂直居中

属性:

vertical-align

属性值:

top 居上

moddie 居中

语法:

vertical-align:top;

设置文本阴影

语法:

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

代码:(参考语法含义理解)

text-shadow:black 5px 5px 5px;

伪类样式

语法:

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

常用伪类:

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

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

a:hover{
  color:red; //鼠标悬于上方时字体变红;
}

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

a:active{
     color:red;  //鼠标点击后未释放时字体为红色;
}

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

a:visited{
     color:red;  //鼠标点击访问后的a链接字体为红色;
}

列表样式

无前缀列表:

list-style-type:none;

自定义列表图形:

ul li{list-style-image:url(这里写图片路径);}

前缀独占一行:

link-style-position:inside;

设置列表前缀类型:

list-style:前缀类型;

背景图

设置背景图:

background-image:url(img/img1.png);

背景图重复方式

不平铺

background-repeat:no-repeat;

沿着x轴平铺

background-repeat:repeat-x;

背景图定位

background-position:center;

背景尺寸

background-size:100%;

渐变色背景

语法:

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

代码:

linear-gradient:to top,red,blue;  //从下到上从红到蓝渐变。

继续阅读

更多来自我们博客的帖子

如何安装 BuddyPress
由 测试 December 17, 2023
经过差不多一年的开发,BuddyPress 这个基于 WordPress Mu 的 SNS 插件正式版终于发布了。BuddyPress...
阅读更多
Filter如何工作
由 测试 December 17, 2023
在 web.xml...
阅读更多
如何理解CGAffineTransform
由 测试 December 17, 2023
CGAffineTransform A structure for holding an affine transformation matrix. ...
阅读更多