日度归档:2020年1月2日

CSS 如何设置字体样式呢?


摘要:
下文讲述使用css设置字体的相关样式的方法分享,如下所示:


css 字体的可进行以下样式设置:加粗、大小设置、字体样式

1.字体系列
字体设置我们可通过”font-family”属性进行相关设置。

font-family后,我们通常设置好几个字体信息,作为字体备用,当一种字体无法满足要求时,web浏览器会采用另一种字体,
各字体之间,使用逗号分隔

   body{font-family:"Times New Roman", Times, serif;}

2.字体显示样式
字体显示样式使用 “font-style”属性进行相关设置。
font-style拥有三个属性值:
normal:正常显示文本
italic:斜体形式显示文本
oblique:类似斜体

	   //div中className等于normal的元素中的文本按正常模式显示
	   div.normal {font-style:normal;}

	   //div中className等于italic的元素中的文本按斜体模式显示
       div.italic {font-style:italic;}

       //div中className等于oblique的元素中的文本按斜体模式显示
	   div.oblique {font-style:oblique;}
	

3.字体大小,需通过font-size 属性设置文本的大小。
设置字体大小可采用 px 或 em 单位
(16px = 1em)

   h1 {font-size:20px;} //设置h1标签字体大小20px
   h2 {font-size:60px;}//设置h2标签字体大小60px
   p {font-size:16px;}//设置p标签字体大小16px
 ---------------------------------------------------
   h1 {font-size:1.25em;} /* 20px/16=1.25em */
   h2 {font-size:3.75em;} /* 60px/16=3.75em */
   p {font-size:1em;} /* 16px/16=1em */


注意事项:
浏览器中默认字体大小为16px;
我们可以通过百分比和em设置字体大小,如下所示:
body {font-size:100%;}
h1 {font-size:1.25em;}
h2 {font-size:3.75em;}
p {font-size:1em;}

css中如何对文本进行样式设置呢?


摘要:
下文讲述css中对文本的样式设置方法,如下所示:

css 文本样式可通过以下属性进行设置:

属性

属性功能
color

设置文本显示颜色
direction

设置文本显示方向
letter-spacing

设置字符间距
line-height

设置文本占用高度(行高)
text-align

文本相对父级的对齐方向
text-decoration

向文本添加修饰
text-indent

缩进元素中文本的首行
text-shadow

设置文本阴影
text-transform

控制元素中的字母
unicode-bidi

设置或返回文本是否被重写
vertical-align

设置元素的垂直对齐
white-space

设置元素中空白的处理方式
word-spacing

设置字间距


css设置文本样式举例

1.文本颜色设置方法

  /*
    例:
	  设置body中所有文本颜色
	  设置h1类型的标签下的文本颜色
	  设置h2类型的标签下的文本颜色
  */
   body {color:yellow;} //颜色名称
   h1 {color:#ff0901;} //十六进制颜色信息
   h2 {color:rgb(255,0,0);}//RGB颜色信息

2.文本的对齐方式设置

文本对齐方式有:居中(center) 靠左(left) 靠右(right) 两端对齐(justify) 四种属性值可供选择
缺省设置为:“靠左”对齐

   h1 {text-align:center;} //h1标签居中
  p.date {text-align:right;} //p标签中className等于date的文本靠右
  p.main {text-align:justify;}//p标签中className等于main的文本两端对齐

3.文本修饰
文本修饰使用text-decoration属性,此属性用于设置文本的上划线 下划线 删除线
用来设置或删除文本的装饰。

    a {text-decoration:none;}  //删除a标签的所有修饰符信息
    h1 {text-decoration:overline;} //对h1标签中的文本上划线
    h2 {text-decoration:line-through;} //对h2标签中的文本 加上删除线
    h3 {text-decoration:underline;} //对h3标签中的文本 加上下划线
 

4.文本转换属性text-transform
此属性可将文本中的字母进行大写 小写转换或首字母大写,如下所示:

   p.uppercase {text-transform:uppercase;} //标签p中className等于uppercase中的字母全部设置为大写
p.lowercase {text-transform:lowercase;} //标签p中lowercase等于lowercase中的字母全部设置为小写
p.capitalize {text-transform:capitalize;} //标签p中capitalize等于capitalize中的首字母设置为大写

5.文本缩进
文本缩进使用 text-indent 属性,指文本的第一行缩进长度

  div {text-indent:80px;} //div标签中的首行文字缩进80个像素
 

如何使用css样式对html页面进行背景设置呢?


摘要:
下文讲述css样式对html页面的背景色、背景图片进行相关设置的方法分享,如下所示:

在html中,定义元素的背景信息,可以采用以下css属性,如下所示:

css属性

功能
background

在此属性中,我们将所有的背景设置都放入此属性值中
background-attachment

背景图像是否固定或者随着页面的其余部分滚动
background-color

背景颜色设置
background-image

背景图片设置
background-position

背景图片的开始位置
background-repeat

背景图片的重复方式


css 背景色设置举例

 ---1.设置Body背景颜色--红色 
    body {background-color:red;}
    div{background-color:#f90232;}
    p{background-color:RGB(230,1,1);}
 /*
   颜色值,可以采用以下方式:
    1.十六进制颜色信息 #f90232
	2.RGB方式 RGB(230,1,1)
	3.颜色名称 blue red yellow
 */
 
 


css 背景图像设置举例

  /*
   css 设置背景图片,需使用background-image属性进行相关设置,如下所示:
  */
  body
    {
       background-image:url('maomao365.jpg');
	}
  /*
   在背景图片设置中,我们需使用背景图片的重复方向或是否重复进行相关设置
  */
   body
    {
      background-image:url('maomao365.jpg');
      background-repeat:repeat-x; /*背景图横向重复*/
     }
	body
     {
       background-image:url('maomao365.jpg');
       background-repeat:no-repeat;/*背景图不重复*/
     }
     
	 /*
	 背景图 不重复,并且从右上开始
	 */
	 body
     {
      background-image:url('maomao365.jpg');
      background-repeat:no-repeat;
      background-position:right top;
      }
   
     /*
	 采用background对背景进行设置
	 */
     body {background:#0000000 url('maomao365.jpg') no-repeat right top;}

 


注意事项:
当使用background对背景进行设置时,需按照以下属性的顺序依次列出:
1.background-color
2.background-image
3.background-repeat
4.background-attachment
5.background-position