字体的样式
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字体样式
接上马:
美丽的中国语
美丽的中国语
美丽的中国语
美丽的中国语
美丽的中国语
美丽的中国语
美丽的中国语