当前位置:网站首页 > HTML与CSS基础 > 正文

字体图标库css(字符图标css)



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来实现控制图像的大小

 
  
 
  
  1. 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.使用长度进行背景定位
    长度参数可以对背景图像的位置进行更精确的控制,实际上定位的是图像左上角相对于元素左上角的位置

     

    背景图像和元素的左上角为对齐基点。


  2. 6.4 使用CSS设置表单样式


    6.4.1.1.修饰文本域
    表单中的元素很多,包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。下面通过一个实例讲解怎样使用CSS修饰常用的表单元素。

     
    6.4.1.2.修饰按钮

    按钮主要用手控制网页中的表单。通过CSS样式可以对按钮的字体、色、边框以及青景图像加以控制。下面以示例的形式介绍如何使用CSS修饰按钮。

     
  3. 按钮主要用手控制网页中的表单。通过CSS样式可以对按钮的字体、色、边框以及青景图像加以控制。下面以示例的形式介绍如何使用CSS修饰按钮。
    6.4.1.2.修饰按钮
     

    6.4.1.3.制作登录表单

     

    6.5 综合案例——商城的注册页面

     

到此这篇字体图标库css(字符图标css)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • Css4规范(css样式规范)2025-07-08 18:54:07
  • 字体图标怎么设置大小css(css图标和字体水平对齐)2025-07-08 18:54:07
  • css3伪类选择器有哪些(css伪类选择器实例)2025-07-08 18:54:07
  • css2导弹(s-2导弹)2025-07-08 18:54:07
  • bs4解析html代码(html解析流程)2025-07-08 18:54:07
  • 制作网页的代码DW(制作网页的代码html)2025-07-08 18:54:07
  • css grid布局和flex布局(css grid flex)2025-07-08 18:54:07
  • 颜色代码怎么用?(html网页颜色代码怎么用)2025-07-08 18:54:07
  • bs4解析html(bs4解析器有哪些)2025-07-08 18:54:07
  • css grid布局宽度自动无限拉伸(css3 grid布局)2025-07-08 18:54:07
  • 全屏图片