CSS入门:元素的浮动属性float

在前端编程中,美工负责网页的设计,,美工设计网页时注重艺术性、美观性和易用性,基本不考虑HTML元素自身的排版特性(HTML元素分为块元素和行元素,块元素在网页中的效果是该元素的内容对于其前后元素的内容都另起一行,行元素在网页中的效果是该元素的内容对于其前后元素的内容都在一行显示)。前端工程师需要通过CSS和HTML元素来实现美工设计的网页,要实现美工设计的网页布局,就需要前端工程师借助CSS的布

CSS入门:元素背景径向渐变填充

渐变填充分为线性渐变和径向渐变两种方式。前面介绍了线性渐变填充,这节介绍径向渐变填充。径向渐变填充是从起点颜色到终点颜色,从内到外进行椭圆或圆形渐变。 径向渐变填充使用radial-gradient()函数,需要定义起始颜色、中间过度颜色和终止颜色,中间过度颜色可以有多种颜色,也可以省略过度颜色。例如下面的radial-gradient()函数定义了起始颜色为红色、过度颜色为黄色、终止颜色为蓝色的

CSS入门:元素背景线性渐变填充

在CSS3之前实现元素背景的渐变填充需要用图像来实现,用图像实现元素的渐变填充存在显示模糊、占用流量和网页下载时间过长的问题。CSS3增加了对元素背景渐变填充的支持,当前主流浏览器的版本一般都支持CSS3。渐变填充分为线性渐变和径向渐变,线性渐变使用CSS3函数linear-gradient()。 使用linear-gradient()函数实现元素背景的渐变填充,需要定义起始颜色、中间过度颜色和终

CSS入门:神奇的background样式

说background样式神奇,在于它能把多个背景样式组合起来使用,简单易用。使用background样式可以一次性指定元素背景图片、图片的宽度和高度、图片的平铺模式、起始位置和元素的背景颜色,免去书写多个样式标签的麻烦。 例1:使用background样式设置元素的背景图片和颜色 <html> <head> <title>background-image样式&

CSS入门:使用图片填充元素背景

在网页设计中,使用图片来填充元素背景,可以让元素背景呈现丰富多彩的外观。使用图片填充元素背景的常用样式标签有background-image、background-repeat、background-position和background-size,下面分别予以介绍。 background-image用于设置元素的背景填充图片,background-image的属性值是url函数,url函数要求传

CSS入门:元素背景纯色填充

在网页设计中,有时需要对元素的背景进行填充。元素的背景包括元素的内容区域,内边距和四边边框,但不包括元素的外部边距。填充背景可以使用纯色、渐变色和图片。 使用纯色填充元素背景的样式标签是background-color。background-color的属性值为关键字、十六进制颜色值、rgb()函数、rgba()函数。 CSS定义了一组颜色关键字用于描述常用颜色,下图给出了CSS定义的16个基本颜

CSS入门:文字对齐样式

文字对齐分为横向对齐和纵向对齐,横向对齐是指水平方向上,文字在给定的区域宽度(设置宽度的HTML元素,如div、table等元素)内采用的对齐方式,纵向对齐是指竖直方向上,文字在给定的区域高度(设置高度的HTML元素,如td、textarea等元素,不支持div元素)内采用的对齐方式。横向对齐的样式标签是text-align,纵向对齐的样式标签是vertical-align。 text-align

CSS入门:文字粗细、风格及修饰样式

文字粗细、风格和修饰样式的标签分别是font-weight(粗细)、font-style(字体风格)和text-decoration(文字装饰)。 font-weight样式用于设置文字的粗细,文字通过粗细之分,可以起到对部分文字强调的作用。font-weight样式值的设置有三种方式:一种是关键字设置法,关键字有normal和bold,normal是正常,bold是加粗;一种是相对粗细值法,相对

CSS入门:文字的尺寸、字体、行距及颜色

文字的尺寸、字体、行距及颜色样式标签为font-size(尺寸)、font-family(字体)、line-height(行距)、color(颜色)。 font-size样式用于设置文字大小,单位有px(像素)、 em(相对值,以父元素的大小为基准单位)、rem(相对值,以根元素的大小为基准单位)。 px的英文全称是Pixels,中文名称为像素,手机屏幕的分辨率就是以像素为单位的,因此它是一个物理

CSS入门:CSS样式如何应用到HTML元素

CSS样式只有应用到HTML元素中,样式才会产生效果。有三种方式可以把CSS样式应用到HTML元素。一种方式是利用HTML元素的style属性,样式表作为style属性的值,该方式也称为行内样式;一种方式是将样式表放置在HTML网页文档head标签内,每个样式表赋予一个名称,然后在HTML元素中通过class属性引入样式表,该方式也称为内部样式;再一种方式是单独将样式表写入到一个文件,文件的扩展名