2018-06-04

字体的样式

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框模型描述

2018-06-04_第1张图片
CSS 框模型.gif

盒子模型

IE盒子模型


2018-06-04_第2张图片
这里写图片描述 (3).jpg

标准盒子模型


2018-06-04_第3张图片
这里写图片描述 (2).jpg

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字体样式

2018-06-04_第4张图片
这里写图片描述 (4).jpg

接上马:







美丽的中国语


美丽的中国语


美丽的中国语


美丽的中国语


美丽的中国语


美丽的中国语



美丽的中国语





你可能感兴趣的:(2018-06-04)