码迷,mamicode.com
首页 > Web开发 > 详细

css文字样式及盒模型

时间:2018-08-22 16:59:15      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:tab   宽度   weight   sim   ott   man   划线   12px   居中   

一、文字样式

3.1 color

文字颜色:

属性值:三种色值表示法都可以使用

 

1 color: #B30000;  //十六进制表示法

2 color: rgb(255,0,0); //rgb()

3 color: red;      //单词表示法

 

3.2 font-style

设置文字是否倾斜

默认值:normal(正常)

倾斜: oblique(普通倾斜)

倾斜: italic(使用,将有倾斜字体的英文进行替换)

1 .ob {

2  font-style: oblique;

3 }

4 .it {

5  font-style: italic;

6 }

 

 

 

3.3 font-weight

设置文字是否加粗

默认值: normal(正常) 500

加粗: bold   700

属性值:100-900(没有单位)

1 .f700 {

2  font-weight: 700;

3 }

 

3.4 font-size

字号:单位是px

工作中读取设计师标注

现在需要自己手动测量。

粗略的测量:直接测量文字高度。

 

 

 

浏览器有最小字号,超过最小字号,默认显示最小字号。(chrome最小字号12px

 

 

3.5 line-height

行高:一行文字实际占有的高度。

特点:文字在行高内垂直居中。

单位是px;

1 line-height: 200px;

 

 

 

 

单行文本垂直居中:盒子的高度和行高相同。

1 div.box1 {

2  width: 300px;

3  height: 100px;

4  font-size: 30px;

5  line-height: 100px;

7 }

 

 

百分数表示:%(表示和字号比值)

1 .box2 {

2  width: 400px;

3  height: 100px;

4  border: 1px solid #000;

5  font-size: 20px;

6  /*line-height: 100px;*/

7  /*line-height是相对字号比值: 20 * 500% = 100px*/

8  line-height: 500%;

9 }

 

3.6 font-family

字体。

一般我们使用字体,使用计算机默认自带字体,特殊的字体,计算上没有,那么不能正常渲染。

英文字体: Arial

中文: Microsoft Yahei,备用字体SimSun;

1 /*字体 先书写英文字体,在书写中文字体*/

2 font-family: "Arial","Microsoft Yahei","SimSun";

 

font:是一个复合属性,可以书写复合写法。每一个属性用空格隔开。

属性值可以省略,表示默认值,至少要书写字号,字体。

1 font: 是否倾斜 是否加粗 字号/行高 字体

2 font: italic bold 30px/100px "Arial","Microsoft Yahei";

 

文本控制属性:

3.7 text-indent

设置文本首行缩进。

单位是em2em表示首行缩进2汉字

1 text-indent: 2em;

 

 

单位:百分数(相对父盒子宽度的比值)

1 ext-indent: 20%;

 

单位: px

1 text-indent: 100px;

 

3.8 text-align

设置文本水平左右居中。

属性值:

默认值: left(靠左)

靠右(right

居中(center

1 text-align: center;

 

 

img:插入图片(文本)

text-align: center; 设置文本居中(单行,多行)

 

 

3.9 text-decoration

文本是否设置下划线

默认值(除了a标签):

没有下划线: none

下划线: underline

1 text-decoration: none;

2 text-decoration: underline;

 

 

二、盒模型

4.1 概述

width: 盒子内容宽度

height: 盒子内容高度

border: 边框

padding: 内边距

margin: 外边距

 

内容区域: 

内容宽 = width

内容高 = height

 

实际占有区域: 

实际占有宽度 = width + padding * 2 + border * 2

实际占有高度 = height + padding * 2 + border * 2

 

计算:

实际宽 = 500 + 50 * 2 + 10 * 2 = 620px

实际高 = 300 + 50 * 2 + 10 * 2 = 420px

 

一般经常给出的是盒子占有宽高,需要我们计算出盒子的内容宽和高。

盒子内容宽 width  = 盒子实际宽度 - Padding * 2 - border * 2

盒子内容高 height  = 盒子实际高度 - Padding * 2 - border * 2

 

盒子宽度是500px,盒子高度是 300px,内边距是50px,边框是20px,计算盒子内容宽和高度

width = 500 - 50 * 2 - 20 * 2 = 360px

height = 300- 50* 2 - 20 *2 = 160px

 

 

背景(背景色和背景图)渲染区域:边框以内(padding区域可以渲染背景)

 

1 background-image: url(images/star.gif);

 

 

4.2 padding

内边距: 内容到内边框之间的距离。

 

 

padding:也是复合属性,可以按照方向进行拆分

padding-left

padding-right

padding-top

padding-bottom

 

 

可以书写复合写法:

四值法:上 右 下 左;

1 padding: 30px 40px 50px 60px;

 

三值法: 上 右(左) 下;

1 padding: 30px 50px 60px;

 

二值法: 上(下) 右(左);

1 padding: 30px 50px;

 

单值法: 四个方向都相同;

1 padding: 30px;

 

一般在使用时我们习惯先书写单值法,特殊方向用单一属性层叠掉。

1 padding: 30px;

2 padding-left: 100px;

 

 

4.3 margin

外边距: 盒子之间的距离

用法和padding 一样

 

margin也是复合属性可以按照方向拆分

1 margin-left

2 margin-right

3 margin-top

4 margin-bottom

 

可以书写复合写法:

四值法: 上 右 下 左;(三值法,二值法,单值法)

1 margin: 20px 30px 40px 50px;css

css文字样式及盒模型

标签:tab   宽度   weight   sim   ott   man   划线   12px   居中   

原文地址:https://www.cnblogs.com/feiyang-dabao/p/9517495.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!