001---css样式规则及css字体样式

原创 2018年04月17日 21:41:36

一、css产生的原因

为了解决混乱的样式结构。

二、css的样式规则


例如:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		h1 {
			color: red;
		}			
	</style>
</head>
<body>
	<h1>我变成红色</h1>
</body>
</html>

效果:


详细规则:


三、css字体样式font

1. font-size:字号大小

可以使用相对长度,也可以使用绝对长度。推荐使用px(像素)


实例:

<p>字号大小</p>
<style>
	p {
		font-size: 40px;
	}			
</style>

效果图前后对比:


2.  字体

①font-family :字体

设置字体,如宋体、微软雅黑、arial等字体,不用刻意背会。

注意事项:


部分代码(其他代码与上相同):

font-family: "宋体";

效果图前后对比(前图默认字体)

         

如果是字体有多个,可以如此:

font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB";

这种情况下,不会一下子用所有的字体,有相当于查询的效果,如果可以用微软雅黑,其他就不执行,如果没有,则接着看其他的字体有没有,如果都没有,则用默认的字体。

②CSS Unicode字体(不用记忆)


3. 字体粗细font-weight

语法:


font-weight: normal 或 bold 或 bolder 或 lighter 或 <integer>(100/200/300/.../900);

②与上面对应相等

font-weight: 400 或 700 或 比bold更重 或 比bold较轻 或 用数字表示粗细(100/200/300/.../900)

更习惯于用数字表示。

4.  font-style:斜体

语法:

font-style:normal|italic|oblique;

normal:默认值,不倾斜

italic:斜体

oblique:倾斜(不常用)

5. 字体综合设定

语法:

font: font-style font-weight font-size/line-height font-family;
注意:使用font属性的时候,必须按照上面的顺序,中间用空格隔开。其中不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则font不起作用。


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunshine_0880/article/details/79979754

7款漂亮的纯css字体样式

简单粗暴,直接上马: 美丽的中国语 美丽的中国语...
  • a419419
  • a419419
  • 2018-01-03 15:58:46
  • 1365

二十款漂亮的CSS字体样式

样式一:   body { margin: 0; padding: 0; line-height: 1.5em; font-family: "Times New Roman", Tim...
  • Truong
  • Truong
  • 2014-01-29 15:15:56
  • 115262

漂亮的网站字体css样式

  • 2012年10月11日 09:37
  • 47KB
  • 下载

【html】css字体样式

HTML里面FONT元素可以设置字体的大年夜小,字体,色彩等样式.B元素和Strong元素都可以设置文字为粗体;I元素和EM元素都可以设置为斜体. 最根基样式: 一字体 在HTML中可利用font f...
  • zhaoyazhi2129
  • zhaoyazhi2129
  • 2012-11-30 11:53:31
  • 6158

CSS笔记(字体样式,文本属性和颜色样式)

CSS-字体样式与颜色
  • qq_38801354
  • qq_38801354
  • 2017-07-07 20:40:05
  • 1053

CSS:设置文本与字体样式

应用基本的文本样式文本对齐方式:text-align该属性用于控制“行内块元素”或“块元素”内“行内元素”(文本元素)的居中方式的,包含三个值: left:居左对齐; center:居中对齐; rig...
  • Hierarch_Lee
  • Hierarch_Lee
  • 2016-09-21 18:14:06
  • 2008

html网页什么样的字体最好看,css设置各种中文字体样式代码

css代码如下: { font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 加上中文名“微...
  • sinat_39430615
  • sinat_39430615
  • 2017-08-13 14:30:58
  • 10958

CSS中设置字体样式

CSS设置字体样式:    1.字体大小设置        字体大小设置,常见的有四种不同的方法: body{ font-size:14px; } h1{ font-size:150%; } h...
  • MoonLight_dR
  • MoonLight_dR
  • 2018-02-01 15:35:32
  • 112

CSS3-字体样式

CSS3的其他属性 /*@font-face :声明使用服务器端字体*/ /*服务器端字体:用户客户端(浏览器)无需安装网页中所需要的...
  • u014404513
  • u014404513
  • 2016-05-12 14:02:59
  • 453

css 字体颜色 样式大全

CSS 颜色大全 css 字体颜色,将颜色代码代替css里面的颜色,就可以。 div中控制某段字体 颜色 html代码 divid=sidebar spanCSS 颜色大全 css 字体颜色/span...
  • chu1025631
  • chu1025631
  • 2015-05-14 21:56:26
  • 3272
收藏助手
不良信息举报
您举报文章:001---css样式规则及css字体样式
举报原因:
原因补充:

(最多只允许输入30个字)