CSS网页美化-美化常见样式详解-美化不求人

首页 » CSS » CSS网页美化-美化常见样式详解-美化不求人

很多的站长都对原始的主题不太满意,都会花费很多的时间去美化主题,让它看起来更好看,更吸引人一点,那么不懂一点CSS样式,可就很难办了,所以今天整理了一些修改常见的css样式。

CSS设置字体样式

  • font-family:设置字体类型,可以同时声明多种字体,字体之间用英文逗号分隔开;
  • font-size:设置字体大小,常用单位为px,还有其他如incmmmptpc等单位;
  • font-style:设置字体风格,有三个属性值,分别是normal(标准字体样式)、italic(斜体字体样式)、oblique(倾斜字体样式);
  • font-weight:设置字体粗细,属性值有normal(默认)、bold(粗体)bolder(更粗)、lighter(更细),还可以用100到900定义由细到粗的字体,400等同于normal,700等同于bold
  • font:设置字体多种属性,可以同时设置;按照 风格 粗细 大小 类型;顺序。

效果演示所示:

字体大小.in

字体大小4px

标准字体

斜体字体

倾斜字体

字体粗细为normal

字体粗细为bold

字体粗细为bolder

字体粗细lighter

字体粗细700

CSS排版网页文本

  • color:设置文本颜色,统一采用RGB格式,也就是“红绿蓝”三原色模式;
  • text-align:设置元素水平对齐方式,属性值有left(左对齐,默认)、right(右对齐)、center(中间对齐)、justify(两端对齐);
  • line-height:设置文本行高,单位也是px,也可以不加单位,按倍数表示;
  • text-indent:设置文本的首行缩进,单位是em或者pxem是相对单位,表示长度相当于文本中字符的倍数,可以根据字体大小自适应改变;
  • text-decoration:设置文本的装饰,属性值有none(默认值)、underline(下划线)、overline(上划线)、line-through(删除线);
  • vertical-align:垂直对齐,属性值有topmiddlebottom
  • text-shadow 设置文字阴影 text-shadow: 颜色 x轴偏移位置 y轴偏移位置 模糊半径

演示效果:

字体颜色pink

元素left对齐

元素center对齐

文本行高3px

文本缩进.3em

文本underline装饰

文本overline装饰

文本through装饰

CSS设置背景样式

  • background-color:背景颜色;
  • background-image:背景图像;
  • background-repeat:背景平铺,属性值有repeat(沿水平和垂直方向平铺)、no-repeat(不平铺)、repeat-x(沿水平方向平铺)、repeat-y(沿水质方向平铺);
  • background-position:设置图像在背景中的位置;
  • background: 背景颜色 背景图像 x轴偏移位置 y轴偏移位置 平铺;

CSS设置列表样式

  • list-style-type:设置列表项标记的类型,属性值有none(无标记符号)、disc(实心圆,默认类型)、circle(空心圆)、square(实心正方形)、decimal(数字);
  • list-style-image:使用图片替换列表的标记项;url(../image/QQ图片20181101095555.png);
  • list-style-position:设置在何处防止列表标记项,属性值有inside(放在文本以内)、outside(放在文本左侧);
  • list-style:简写属性,可以设置所有列表属性;

演示效果:

  • 列表实心圆标记
  • 列表空心圆标记
  • 列表实心正方形标记
  • 列表数字标记
  • 列表数字标记,放在文本左侧
  • 列表空心圆标记,放在文本以内

CSS设置鼠标形状

cursor属性可以用来设置鼠标指针样式,通常有一下几种属性值:

  • default:默认光标,箭头;
  • pointer:超链接的指针,手型;
  • wait:指示程序正在忙;
  • help:指示可用的帮助;
  • text:指示文本;
  • crosshair:鼠标呈现十字状;

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

单击访问前

.class01:link{
color: green;
text-decoration: none;
}

单击访问后

.class02:visited{
color: pink;
text-decoration: none;
}

鼠标悬浮

.class03:hover{
color: aqua;
text-decoration: none;
}

单击未释放

.class04:active{
color: red;
text-decoration: none;
}

CSS设置渐变

  • IE浏览器是Trident内核,加前缀:-ms-
  • Chrome浏览器是Webkit内核,加前缀:-webkit-
  • Safari浏览器是Webkit内核,加前缀:-webkit-
  • Opera浏览器是Blink内核,加前缀:-o-
  • Firefox浏览器是Mozilla内核,加前缀:-moz-
background: -webkit-gradient(linear,left bottom,right top,from(red),to(blue));
background: linear-gradient(to bottom left,red,black);

线性渐变
颜色沿着一条直线过渡:从左到右、从右到左、从上到下等
linear-gradient ( position, color1, color2,…)
-webkit-linear-gradient ( position, color1, color2,…)

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

比较优先级:每一个声明都有一个优先级

当发生冲突时,优先级高的会保留,优先级低的会被淘汰

一个声明的优先级,与它的来源和重要性有关

1.浏览器默认样式表中的声明

2.用户样式表中的普通声明

3.作者样式表中的普通声明

4.作者样式表中的重要声明

5.用户样式表中的重要声明

修饰首字母【伪元素选择器 ::first-letter】

【::first-letter】可选中元素中的第一个文字

修饰首行【伪元素选择器 ::first-line】

【::first-line】可选中元素中的第一行文字

修饰选中文字【伪元素选择器 ::selection】

【::selection】可选中被用户框选的文字

背景渐变

线性渐变:【background-image:linear-gradient(…)】

径向渐变(圆形渐变):【background-image:radial-gradient(…)】

透明度和鼠标样式

透明度【opacity】和alpha通道

鼠标样式

阴影

文字阴影【text-shadow】

盒子阴影【box-shadow】

示列:

继承发生的场景:

该属性是可继承的属性,该属性在样式表中没有声明

1.2 伪类说明

Anchor(锚)伪类

例如:a:link {color:#FF0000;} 说明:将未访问的链接设置为红色

例如:a:visited {color:#00FF00;} 说明:已访问的链接设置为绿色

例如:a:hover {color:#FF00FF;} 说明:当鼠标划过链接设置为紫色

例如:a:active {color:#0000FF;} 说明:已选中的链接设置为蓝色

注意:a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的;a:active 必须被置于 a:hover 之后,才是有效的;且伪类的名称不区分大小写。

first – child伪类

first-child 伪类来选择元素的第一个子元素

例如:p:first-child 说明:选择器匹配作为p元素的第一个子元素的

例如:p > i:first-child 说明: 选择相匹配的所有

元素的第一个 元素:

例如:p:first-child i 说明:选择器匹配所有作为元素的第一个子元素的

元素中的所有 元素
1.3 层次级别

优先级

1) 相同权值

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)

2) 权值不同

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。

例如:

注意:在网站设置样式是有一些特殊情况可以用importal来解决 如:

P{color:red !important;} important是一个优先级样式权值最高

例如:background-origin 说明:属性指定了背景图像的位置区域

注意:content-box, padding-box,和 border-box区域内可以放置背景图像。

样例:background-origin:content-box;

鼠标悬停

注意:transition-duration 属性可以设置 “hover” 效果的速度

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS网页美化-美化常见样式详解-美化不求人》 发布于2020-02-20

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

5 + 9 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册