@font-face {
font-family: 'OpenSans-ExtraBold' ;
src: url('font/OpenSans-ExtraBold.eot'); /* IE9 Compat Modes */
src: url('font/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/OpenSans-ExtraBold.woff') format('woff'), /* Modern Browsers */
url('font/OpenSans-ExtraBold.ttf') format('truetype'), /* Safari, Android, iOS */
url('font/OpenSans-ExtraBold.svg#OpenSans-ExtraBold') format('svg'); /* Legacy iOS */
} p {
font-size: 16px;
font-family: Arial, sans-serif;
font-weight: bold;
color: blue;
text-decoration: underline;
}.divcss5{color:#00F}
/* 设置对象divcss5内文字为蓝色 */
HTML代码：
复制代码{ font: font-style font-weight font-size font-family; }
（字体风格） （字体粗细） （字体大小）（字体类型）1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .my-font-size{
8 font-size: 28px;
9 }
10 </style>
11 </head>
12 <body>
13 <div>码海无际</div>
14 <div class="my-font-size">码海无际</div>
15 </body>
16 </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.typeface {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}
</style>
</head>
<body>
<h1 class="typeface">这设置了font-family属性</h1>
</body>
$("#myElement").css("font-family", "Arial, sans-serif");
$("#myElement").css("font-size", "16px");
$("#myElement").css("font-weight", "bold");
$("#myElement").css("color", "red");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
font-family:'STXingka','NSimSun','SimSun'，serif;/*注：字体为华文行楷，新宋体，宋体，serif告诉浏览器如果实在找不到前面的几种字体就随便找一个有衬线字体*/
}
#div2{
font-family:'Microsoft JhengHei','Microsoft YaHei','SimHei',sans-serif;/*注：字体为微软正黑体，微软雅黑，黑体，sans-serif告诉浏览器如果实在找不到前面的几种字体就随便找一个无衬线字体*/*/
}
</style>
</head>
<body>
<div id="div1">床前明月光，疑似地上霜。<br />举头望明月，我是郭德纲。</div>
<div id="div2">床前明月光，疑似地上霜。<br />举头望明月，我是郭德纲。</div>
</body>
</html> <resources>
<style name="CustomFontStyle">
<item name="android:fontFamily">@font/your_font_file_name</item>
</style>
</resources>
1 transform属性
在CSS3中，能够利用transform性能实现文字或图像的旋转、缩放、歪斜、挪动这4中类型的变形解决。
(1)浏览器反对
到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器反对该属性。
2 旋转
应用rotate办法，在参数中退出角度值，角度值前面跟示意角度单位的“deg”文字即可，旋转方向为顺时针方向。
transform：rotate(45deg)；
3 缩放
应用scale办法来实现文字或图像的缩放解决，在参数中指定缩放倍率。
transform：scale(0.5)；//放大一半
(1)能够别离指定元素的程度方向的放大倍率与垂直方向的放大倍率
transform：scale(0.5，2)；//程度方向放大一半，垂直方向放大一倍。
4 歪斜
应用skew办法实现文字或图像的歪斜解决，在参数中别离指定程度方向上的歪斜角度与垂直方向上的歪斜角度。
transform：skew(30deg，30deg)；//程度方向上歪斜30度，垂直方向上歪斜30度。
(1)只应用一个参数，省略另一个参数
这种状况下视为只在程度方向上进行歪斜，垂直方向上不歪斜。
transform：skew(30deg)；
5 挪动
应用translate办法来挪动文字或图像，在参数中别离指定程度方向上的挪动间隔与垂直方向上的挪动间隔。
transform：translate(50px，50px)；// 程度方向上挪动50px，垂直方向上挪动50px
(1)只应用一个参数，省略另一个参数
这种状况下视为只在程度方向上挪动，垂直方向上不挪动。
transform：translate(50px)；
6 对一个元素应用多种变形的办法
transform：translate(150px，200px) rotate(45deg) scale(1.5)；
7 指定变形的基准点
在应用transform办法进行文字或图像变形的时候，是以元素的中心点为基准点进行变形的。
transform-origin属性
应用该属性，能够扭转变形的基准点。
transform：rotate(45deg)；
transform-origin：left bottom；//把基准点批改为元素的左下角
(1)指定属性值
基准点在元素程度方向上的地位：left、center、right
基准点在元素垂直方向上的地位：top、center、bottom
8 3D变形性能
(1)旋转
别离应用rotateX办法、rotateY办法、rotateZ办法使元素围绕X轴、Y轴、Z轴旋转，在参数中退出角度值，角度值前面跟示意角度单位的deg文字即可，旋转方向为顺时针旋转。
transform：rotateX(45deg)；
transform：rotateY(45deg)；
transform：rotateZ(45deg)；
transform：rotateX(45deg) rotateY(45deg) rotateZ(45deg)；
transform：scale(0.5) rotateY(45deg) rotateZ(45deg)；
(2)缩放
别离应用scaleX办法、scaleY办法、scaleZ办法使元素按X轴、Y轴、Z轴进行缩放，在参数中指定缩放倍率。
transform：scaleX(0.5)；
transform：scaleY(1)；
transform：scaleZ(2)；
transform：scaleX(0.5)scaleY(1)；
transform：scale(0.5) rotateY(45deg)；
(3)歪斜
别离应用skewX办法、skewY办法使元素在X轴、Y轴上进行顺时针方向歪斜(无skewZ办法)，在参数中指定歪斜的角度
transform：skewX(45deg)；
transform：skewY(45deg)；
(4)挪动
别离应用translateX办法、translateY办法、translateZ办法、使元素在X轴、Y轴、Z轴方向上进行挪动，在参数中退出挪动间隔。
transform：translateX(50px);
transform：translateY(50px);
transform：translateZ(50px);
9 变形矩阵
每种变形办法的背地都存在着一个对应的矩阵。
(1)计算2D变形(3 X 3矩阵)
能够将这个2D变形矩阵书写为matrim(a,b,c,d,e,f),a~f均代表一个数字，用于决定怎么执行变形解决。
(2)平移的2D矩阵
//成果统一：右移150px，下移150px
transform：matrix(1，0,0,1，150，150)；
transform：translate(150px，150px)；
(3)计算3D变形
3D缩放变形应用的4X4矩阵
transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
//成果统一：X轴方向上放大五分之一，Y轴方向上放大一半。
transform:scale3d(0.8,0.5,1);
transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);
(4)可通过矩阵执行多重变形解决
将须要的变形矩阵相乘失去一个新的变形矩阵可实现该解决。text-align语法：text-align : left | right | center | justify
text-align参数值与说明：left : 左对齐
right : 右对齐
center : 居中*justify : 两端对齐(不推荐使用，通常大部分浏览器不使用)
color设置字体颜色,也可以设置其他颜色font-sizefont-size 设置字体的大小 单位 px,em remfont-family可以指定文字的字体@font-face自定义字体font-family:name;
font-family:ncursive|fantasy|monospace|serif|sans-serif//onload相当于本网页的构造函数，onunload相当于本网页的析取函数
function load() {
alert("你好！");
}
function unload() {
alert("再见！");
}
function Changecolor(bcolor, fcolor) {
//相当于对于字体这样，改变字体的颜色
document.getElementById("body").style.background = bcolor;
document.getElementById("ziti").style.color = fcolor;
}
js
value="赤" />
value="橙" />
value="黄" />
……
value="返回" /><html>
<head>
<link rel="stylesheet" type="text/css" href="css文件.css" />
<title></title>
</head>
<body>
<b>1、css文本设置:</b><br>
<p>dhsfbhegfbeyhwdfgghrt</p>
<h1>样式一</h1><br>
<h2>hello word</h2><br>
<h3>样式三 hello word</h3><br>
<h4>hello wordepwgrjsegjjdklgndsoglnuiotjreiolsfmdsl</h4><br>
<a href="http://www.baidu.com">hello word</a><br><br>
<br><b>2、css字体设置:</b><br>
<p>dhsfbhegfbeyhwdfgghrt</p>
<ul >
<li>qweersgtresrtgeswreswrf</li>
<li>asresfrserfesfresrfsefsfd</li>
</ul>
<h1>样式一</h1><br>
<h2>hello word</h2><br>
<h3>样式三 hello word</h3><br>
<h4>hello wordepwgrjsegjjdklgndsoglnuiotjreiolsfmdsl</h4><br>
<a href="http://www.baidu.com">hello word</a><br>
</body>
<html>
<html> <head> <meta charset="utf-8"> <title>单行文本框与多行文本框</title> <style> body{ /*背景设置01*/ background-color:pink; background-image:url(./美女2.jpg); background-repeat:repeat-x; /*图片放置在背景的位置。距离左上角的距离*/ background-position:100px 100px; /** 以上可以缩写为 background: #eeeeee url(../images/bear.bmp) no-repeat 20px 120px; 其中各个属性的顺序为： [background-color] [background-image] [background-repeat] [background-position] */ /*字体设置*/ font-family:arial, sans-serif; font-style:italic; font-size:10px; } #ta{ margin-top:5%; margin-left:3%; width:40%; height:40%; } </style> </head> <body> <!-- 字体设置02 1、 font-family属性 设置一组按优先级排序的字体列表。 浏览器会依次尝试列表中的字体，直到字体可用（已安装）。 字体名分两类： 字体名称（family-name） 就是我们通常所说的字体，包含”Arial”,”Times New Roman”,”黑体”等。 类名称（generic family） 一组具有统一外观的字体。 2、 font-style属性 显示样式 有三种取值，normal（正常）、italic（斜体）或oblique（倾斜） 3、 font-weight属性 字体的粗细： normal（正常）或bold（加粗） 4、 font-size属性 字体大小 可以设置为固定大小，也可以设置为相对值。 5、 px像素 根据显示器分辨率确定的大小 pt点数 根据Window系统定义的字号大小来确定大小 磅 (1 pt 等于 1/72 英寸) em字体尺寸 1em等于当前的字体尺寸。2em等于当前字体尺寸的两倍。 注意：（国内的设计师大都喜欢用px，而国外的网站大都喜欢用em，那么两者有什么区别，又各自有什么优劣呢？ 1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位；3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。 px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 em有如下特点： 1. em的值并不是固定的；2. em会继承父级元素的字体大小。 所以我们在写CSS的时候，需要注意两点：1. body选择器中声明Font-size=62.5%；2. 将你的原来的px数值除以10，然后换上em作为单位；3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。 但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。 ） 6、 简写为： body { font: italic bold 30px arial, sans-serif; } font属性的值应按以下次序书写： [font-style] [font-weight] [font-size] [font-family] --> <!-- 文本设置03 1、 text-indent属性 文本缩进 text-indent: 30px; 2、 text-align属性(文本对齐) 左对齐left 右对齐right 居中center 3、 text-decoration属性(文本装饰) 下划线（underline） 删除线（line-through） 上划线（overline） 4、单词之间的间距 letter-spacing属性 字符之间的距离 5、 text-transform属性（控制文本的大小写） 首字母大写（capitalize） 全部大写（uppercase） 全部小写（lowercase） --> <!--<textarea rows="6" cols="6" ></textarea><br/>margin-left表示距离当前窗口左边的距离--> <h1 align="center" style="margin-top:3%">CSS层叠样式表</h1> <textarea rows="6" cols="6" id="ta" placeholder="CSS层叠样式表"> </textarea><!--align表示水平对齐的方式--> </body> </html>
