6.1 使用CSS设置字体样式
参数;字体名称按优先顺序排列,以逗号隔开。如果字体名称包含空格,则应用引号括起。
说明:用font-family属性可控制显示字体。不同的操作系统,其字体名是不同的。对于
Windows 系统,其字体名就如Word中的“字体”列表中所列出的字体名称。
6.1.2.字体大小
语法:font-size:你想设置的大小;
6.1.3.字体粗细
CSS样式中使用font-weight 属性设置字体的粗细,它包含 normal、bold、bolder、lighter、100、200、300、400、500、600、700、800 和 900 多个属性值。语法:font-weight :boldlnumberl normall lighterl 100-900;
参数:normal表示默认字体,bold 表示粗体,bolder 表示粗体再加粗,lghter 表示比默认字体还细,100~900共分为9个层次(100、200、…、900,数字越小字体越细、数字越大字体越粗,数字值 400 相当于关键字 normal,700 等价于 bold)。说明:设置文本字体的粗细
6.1.4.字体倾斜
CSS 中的font-style 属性用来设置字体的倾斜。
说明:设置文本字体的倾斜。
6.2 使用CSS设置文本样式
语法:text-align :leftl right l center l justify;
参数:left 为左对齐,right为右对齐,center为居中,justify为两端对齐说明:设置对象中文本的对齐方式。
说明:设置对象的行高。
语法:text-decoration :underlinel blink| overline l line-through l none ;
参数:underline为下划线,blink为闪烁,overline为上划线,line-through为贯穿线none 为无装饰。
说明:设置对象中文本的修饰。对象a、u、ins的文本修饰默认值为underline。对象stike、s、del的默认值是 line-through。如果应用的对象不是文本,则此属性不起作用。
6.2.4.段落首行缩进
语法:text-indent:length ;
参数:length为百分比数字或由浮点数字、单位标识符组成的长度值,允许为负值。
说明:设置对象中的文本段落的缩进。本属应用于整块的内容。
6.2.5.首字下沉
在CSS样式中伪对象“:first-letter”可以实现对象内第一个字符的样式控制。
语法:letter-spacing:length lnormal ;
参数:normal为默认值,定义字符间的标准间距。length表示由浮点数字和单位标识符组成的长度值,允许为负值。
说明:该属性定义元素中字符之间插入多少空白符。如果指定为长度值,会调整字符之间的标准间距,允许指定负长度值,这会让字符之间变得更拥挤。
6.2.7.文本的截断
在 CSS 样式中 text-overflow 属性可以实现文本的截断效果,该属性包含 clip 和 ellipsis 两个属性值。前者表示简单的裁切,不显示省略标记(…);后者表示当文本溢出时显示省略标记(…)。语法:
text-overflow:clip | ellipsis ;
参数:clip定义简单的裁切,不显示省略标记。ellipsis 定义当文本溢出时显示省略
标记。说明:设置文本的截断。要实现溢出文本显示省略号的效果,除了使用text-overtlow属性以外,还必须配合 white-space:nowrap(强制文本在一行内显示)和overtlow:hidden(溢出内容为隐藏)同时使用才能实现。
6.2.8.文本的颜色
在CSS样式中,对文本增加颜色修饰十分简单,只需添加color属性即可。color 属性的语法:
color:颜色值;
这里颜色值可以使用多种书写方式
color : red ; /*规定颜色值为颜色名称的颜色*/
color:#000000; /*规定颜色值为十六进制值的颜色*/
color:rgb(0,0,255); /*规定颜色值为 rgb 代码的颜色*/
color:rgb(0% ,0% ,80%); /*规定颜色值为rgb 百分数的颜色*/
6.2.9.文本的背景颜色
在HTML中,可以使用标签的bgcolor属性设置网页的背景颜色。而在CSS里,不仅可以用 background-color 属性来设置网页背景颜色,还可以设置文本的背景颜色。语法:background-color :color | transparent
参数:color用于指定颜色。transparent表示透明的意思,也是浏览器的默认值。说明:background-color不能继承,默认值是transparent。如果一个元素没有指定背景色,那么背景就是透明的,这样其父元素的背景才能看见。
6.3 使用CSS设置图像样式
6.3.1.设置图像边框
使用border来设置图像边框
6.3.2.图像缩放
使用width和height来实现控制图像的大小
- 6.3.3.设置背景图像
在网页设计中,无论是单一的纯色背景,还是加载的背景图片,都能够给整个页面带来丰富的视觉效果。CSS 除了可以设置背景颜色,还可以用background-image 来设置背景图像。语法:
background-image : url( url )| none ;
参数:u 表示要插人背景图像的路径。nome表示不加载图像。
说明:设置对象的背景图像。若把图像添加到整个浏览器窗口,可以将其添加到<body>标签中。6.3.4设置背景重复
景重复(background-repeat)属性的主要作用是设置背景图片以何种方式在网页中示。通过背景重复,设计人员使用很小的图片就可以填充整个页面,有效地减少图片字节的大小。
在默认情况下,图像会自动向水平和竖直两个方向平铺。如果不希望平铺,或者只希望沿着一个方向平铺,可以使用background-repeat属性来控制。语法:
background-repeat :repeat | no-repeat | repeat-x | repeat-y;参数:repeat表示背景图像在水平和垂直方向平铺,是默认值;repeat-x表示背景图像在水平方向平铺;repeat-y表示背景图像在垂直方向平铺;no-repeat表示背景图像不平铺。说明:设置对象的背景图像是否平铺及如何平铺,必须先指定对象的背景图像。background-position :length l length ;
background-position : positional l position ;
参数:length为百分比或者由数字和单位标识符组成的长度值,position可取top、center、bottom、left、right之一。
说明:利用百分比和长度来设置图像位置时,都要指定两个值,并且这两个值都要用空格隔开,一个代表水平位置,一个代表垂直位置。水平位置的参考点是网页页面的左边,垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有let、center、right,关键字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。
6.3.5.1.使用关键字进行背景定位
1.使用关键字进行背景定位
关键字参数的取值及含义如下:
top:将背景图像同元素的顶部对齐。
bottom:将背景图像同元素的底部对齐。
lef:将背景图像同元素的左边对齐。
right;将背景图像同元素的右边对齐。
center:将背景图像相对于元素水平居中或重直居中。
6.3.5.2.使用长度进行背景定位
长度参数可以对背景图像的位置进行更精确的控制,实际上定位的是图像左上角相对于元素左上角的位置背景图像和元素的左上角为对齐基点。
6.4 使用CSS设置表单样式
6.4.1.1.修饰文本域
表单中的元素很多,包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。下面通过一个实例讲解怎样使用CSS修饰常用的表单元素。6.4.1.2.修饰按钮
按钮主要用手控制网页中的表单。通过CSS样式可以对按钮的字体、色、边框以及青景图像加以控制。下面以示例的形式介绍如何使用CSS修饰按钮。
- 按钮主要用手控制网页中的表单。通过CSS样式可以对按钮的字体、色、边框以及青景图像加以控制。下面以示例的形式介绍如何使用CSS修饰按钮。
6.4.1.2.修饰按钮
6.4.1.3.制作登录表单
6.5 综合案例——商城的注册页面
版权声明:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符,请将相关资料发送至xkadmin@xkablog.com进行投诉反馈,一经查实,立即处理!
转载请注明出处,原文链接:https://www.xkablog.com/qdhtml/53217.html