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” 效果的速度
分享到 :

发表评论

登录... 后才能评论