<!DOCTYPE html>
<html>
<head>
<title> 字体文件引用</title>
<style type="text/css">
@font-face {
font-family: 'fontsTest';
src: url('PingFangSCRegular.ttf'); /*fonts file dirpath*/
}
html,body {
font-family: fontsTest, sans-serif;
font-weight: 700; /*100 400 700*/
font-style: normal; /*normal italic oblique*/
font-size: 24px; /*12px 22px 24px*/
}
</style>
</head>
<body>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<BR>
abcdefghijklmnopqrstuvwxyz<BR>
你在我心里永远是一个可爱的人.<BR>
</body>
</html>CSS
css 适配分辨率显示/隐藏内容
CSS
<style type="text/css">
@media(max-width:768px) {
.overflow-maxview {
display: none!important
}
}
@media(min-width:769px) {
.overflow-minview {
display: none!important
}
}
</style>HTML
<html>
<head></head>
<body>
<span class="overflow-maxview">content</span>
<span class="overflow-minview">content</span>
</body>
</html>CSS 转换文本大小写
<html>
<head>
<style type="text/css">
h1 {text-transform: uppercase} /*全部大写*/
p.uppercase {text-transform: uppercase} /*全部大写*/
p.lowercase {text-transform: lowercase} /*全部小写*/
div.capitalize {text-transform: capitalize} /*首字母大写*/
</style>
</head>
<body>
<h1>This Is An H1 Element</h1>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<div class="capitalize">This is some text in a paragraph.</div>
</body>
</html>text-transform: uppercase; /**单行范例**/| 值 | 描述 |
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
| inherit | 规定应该从父元素继承 text-transform 属性的值。 |
CSS 中 IE、Firefox、Chrome、Opera 各浏览器私有属性
-moz 代表 Firefox 浏览器私有属性
-ms 代表 IE 浏览器私有属性
-webkit 代表 Chrome、Safari 私有属性
-o 代表 Opera 浏览器私有属性
举例：
<style type="text/css">
.linear{
width:100%;
height:600px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red); /*IE 6 7 8*/
background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */
background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #fff, #0000ff); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #fff, #0000ff); /*Opera 11.10+*/
}
</style>