[学习笔记] 静态网页开发基础之CSS3美化网页元素

# 学习 # · 2020-04-15

编辑网页文本

1、文本在网页中的意义:

(1)有效地传递页面信息。

(2)使用CSS样式美化过的页面文本,使页面漂亮,美观,吸引客户。

(3)可以很好地突出页面的主题内容,使用户第一眼可以看到页面的主要内容。

(4)具有良好的用户体验。

2、<span>标签:它没有固定的格式表示,只有它应用CSS样式时,才会产生视觉上的变化。

3、字体样式:

(1)font-family:设置字体类型(先英文后中文,宋体是计算机中默认的字体)。

(2)font-size:设置字体大小(常以px为单位)。

(3)font-style:设置字体风格(normal标准、italic斜体、oblique倾斜)。

(4)font-weight:设置字体粗细(normal默认值、bold粗体、bolder更粗的字体、lighter更细的字体)。

(5)font:在一个声明中设置所有字体属性。(顺序:风格->粗细->大小->类型) 。

4、文本颜色

(1)RGB:在这十六进制的表示方法中,前两位表示红色分量,中间两位表示绿色分量,最后两位表示蓝色分量。

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

5、水平对齐方式:

(1)left:把文本排列在左边,默认值,由浏览器决定。

(2)right:把文本排列到右边。

(3)center:把文本排列到中间。

(4)justify:实现两端对齐文本效果。

6、首行缩进和行高

(1)line-height:行高

(2)text-indent:首行缩进。

(3)除了使用像素表示行高外,也可以不加任何单位,按倍数表示,这时行高是字体大小的倍数。

(4)对于中文网页,em用得较多,通常设置为2em,表示缩进两个字符。

7、文本装饰(text-decoration):

(1)none:默认值。

(2)underline:下划线。

(3)overline:上划线。

(4)line-through删除线。

8、垂直对齐方式:

(1)在目前的浏览器中,只能对表格单元格中的对象使用垂直对齐方式属性。

(2)常用来设置图片与文本的对齐方式:

img,span{
    vertical-align:middle/top/bottom;
}

9、文本阴影:为正时,分别在右和下;模糊半径为0,表示不具有模糊效果。

text-shadow:color x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius);

设置超链接和列表样式

1、超链接伪类:伪类就是不根据名称,属性,内容而根据标签处于某种行为或状态时的特征来修饰样式,也就是说,超链接将根据用户单击访问前(a:link),鼠标悬浮在超链接上(a:hover),单击未释放(a:active),单击访问后(a:visited)的四个状态显示不同的超链接样式

2、超链接伪类的语法:

标签名:伪类名{声明}

3、设置伪类的顺序:a:link>a:visted>a:hover>a:active

4、列表样式:
(1)list-style-type:设置列表项标记的类型

none:无标记符号
disc:实心圆,默认类型
circle:空心圆
square:实心正方形
decimal:数字

(2)list-style:在一个类型中设置所有列表的属性。设置顺序:list-style-type-->list-style-position-->list-style-image。


背景样式

1、认识<div>标签:可以把HTML文档分割成独立的,不同的部分,因此

标签用来进行网页布局。在使用<div>标签布局页面时,可以嵌套<div>,同时也可以嵌套列表,段落等各种网页元素。

<div>网页内容</div>

2、背景属性
(1)背景颜色:background-color。transparents是透明的,为默认值

background-color:transparents;    /*是透明的,为默认值*/

(2)背景图像:

background-image:url(图片路径)

(3)背景重复方式:

background-repeat:repeat;    /*沿水平和垂直两个方向平铺*/
background-repeat:no-repeat;    /*不平铺,即背景图像只显示一次*/
background-repeat:repeat-x;    /*只沿水平方向平铺*/
background-repeat:repeat-y;    /*只沿垂直方向平铺*/

(3)背景定位:

background-position:x y;

(4)背景属性:

background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;

3、背景尺寸:

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

4、CSS3渐变:

(1)CSS3线性渐变:颜色沿着一条直线过渡:从左到右、从右到左、从上到下等。

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

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

5、CSS3渐变兼容:

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

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

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

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

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

如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/262/

评论