字体的样式
CSS 属性： 字体样式(Font Style)
1 字体样式 {font:font-style font-variant font-weight font-size font-family}
2 字体类型 {font-family:"字体1","字体2","字体3",...}
3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字体风格 {font-style:inherit|italic|normal|oblique}
5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
6 字体颜色 {color:数值;}
7 阴影颜色 {text-shadow:16位色值}
8 字体行高 {line-height:数值|inherit|normal;}
9 字 间 距 {letter-spacing:数值|inherit|normal}
10 单词间距 {word-spacing:数值|inherit|normal}
11 字体变形 {font-variant:inherit|normal|small-cps }
12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字体变形 {font-size-adjust:inherit|none}
14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本样式(Text Style)
1 行 间 距 {line-height:数值|inherit|normal;}
2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:数值|inherit}
4 水平对齐 {text-align:left|right|center|justify}
5.垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 书写方式 {writing-mode:lr-tb|tb-rl}
颜色的单位
Css中颜色和单位的使用
颜色
用颜色的名字表示颜色,比如:red
用16进制表示演示 比如:#FF0000
用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间
一般都用16进制表示颜色
单位
px:像素,与分辨率设置相关.
%相对于浏览器的百分之多少,可以对宽度width做设置,不可以对height做设置
文本样式(text)
color:设置文本颜色
text-align:设置文本对齐方式
center
left
right
letter-spacing:字间距/字母间距
word-spacing:单词间距,有空格就设置,中文看空格.
line-height:行高(第二行的行高=第一行底部到第三行顶部)
text-indent:一般30px就2个
text-decoration:文本装饰
underline:下划线
overline:上划线
line-through:删除线
blink 闪烁(不会用)
text-transform:大小写转换
uppercase:全部大写
lowercase:全部小写
capitalize:每个单词以大写开头
text-shadow:创建文本阴影(水平偏移量px,垂直偏移量px,模糊程度px,阴影颜色),模糊程度px值高越模糊.
设置字体:
font-style:字体样式italic,oblique斜体
font-size:设置字体的大小
font-weight:设置字体的粗细,bolder最粗
font-family:设置文字字体,楷体,隶书等等
font简写属性: style weight size family(空格)顺序必须按这个格式,一般用了简写属性之后把行间距letter-spacing放font属性后边,不然会覆盖.
css框模型描述
盒子模型
IE盒子模型
标准盒子模型
padding是内容和其边框线之间的空间， margin是一个元素与另一个元素之间的空白。
width和height默认指内容的宽度和高度。
box-sizing: border-box |padding-box|content-box(默认); //(Firefox: -moz-box-sizing Safari或
chrome或android:-webkit-box-sizing ) -ms- IE
background-color 用颜色填充边框内部的空间，包括padding部分和虚线边框。
在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度
标准盒子模型的盒子宽度：左右margin+左右border+左右padding+width
IE盒子模型的盒子宽度：左右margin+width
选择标准盒子模型方法：在html模板中加doctype声明。
提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
术语翻译
element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。
在 w3school，我们把 padding 和 margin 统一地称为内边距和外边距。边框内的空白是内边距，边框外的空白是外边距，很容易记吧：）
DIV+CSS怎么样改字体样式
line-height:15px;（控制行间距）
font-weight: bold;（控制字体加粗）
font-size: 14px;（控制字体大小）
color:#000000;（控制字体颜色）
font-family:宋体;（注明是什么字体）
用CSS样式怎样在同一个Div中设置两种不同的字体属性
那是做不出来的，必须设置不同的DIV，比如标题title .title{color:red;} 内容content .content{color:#080;}
7款漂亮的纯css字体样式
接上马：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 class="vintage1">美丽的中国语</h1>
<h1 class="vintage2">美丽的中国语</h1>
<h1 class="vintage3">美丽的中国语</h1>
<h1 class="vintage4">美丽的中国语</h1>
<h1 class="vintage5">美丽的中国语</h1>
<h1 class='text-reflect-base'>美丽的中国语</h1>
<div class="text">
<p>美丽的中国语</p>
</div>
<style>
body{
text-align: center;
}
.vintage1{
background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;
text-shadow: 5px -5px black, 4px -4px white;
font-weight: bold;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text }
.vintage2{
color: transparent;
-webkit-text-stroke: 1px red;
letter-spacing: 0.04em;}
.vintage3 {
color: transparent;
background-color : blue;
text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
-webkit-background-clip : text;
}
.vintage4{
color: gold;
letter-spacing: 0;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 }
.vintage5{
font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink
}
.text-reflect-base{
color: palegreen;
-webkit-box-reflect:below 10px;
}
.text{
width: 300px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -150px;
background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
-webkit-text-fill-color: transparent;/* 将字体设置成透明色 /
-webkit-background-clip: text;/ 裁剪背景图，使文字作为裁剪区域向外裁剪 */
-webkit-background-size: 200% 100%;
-webkit-animation: masked-animation 4s linear infinite;
font-size: 35px;
}
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
</style>
</body>
</html>
