<html>

<head>

  <meta charset="utf-8">

  <title>单行文本框与多行文本框</title>

<style>

body{

    /*背景设置01*/　　　　　　　　　　

    background-color:pink;

    background-image:url(./美女2.jpg);

    background-repeat:repeat-x;

    /*图片放置在背景的位置。距离左上角的距离*/

    background-position:100px 100px;

    /**

    以上可以缩写为

    background: #eeeeee url(../images/bear.bmp) no-repeat 20px 120px;

    其中各个属性的顺序为：

    [background-color] [background-image] [background-repeat] [background-position]

    */

    /*字体设置*/

    font-family:arial, sans-serif;

    font-style:italic;

    font-size:10px;

}

#ta{

    margin-top:5%;

    margin-left:3%;

    width:40%;

    height:40%;

}

</style>  

</head>

<body>

<!--

字体设置02　　　　　　　　

1、

font-family属性

设置一组按优先级排序的字体列表。

浏览器会依次尝试列表中的字体，直到字体可用（已安装）。

字体名分两类：

字体名称（family-name）

就是我们通常所说的字体，包含”Arial”,”Times New Roman”,”黑体”等。

类名称（generic family）

一组具有统一外观的字体。

2、

font-style属性

显示样式

有三种取值，normal（正常）、italic（斜体）或oblique（倾斜）

3、

font-weight属性

字体的粗细：

normal（正常）或bold（加粗）

4、

font-size属性

字体大小

可以设置为固定大小，也可以设置为相对值。

5、

px像素

根据显示器分辨率确定的大小

pt点数

根据Window系统定义的字号大小来确定大小

磅 (1 pt 等于 1/72 英寸)

em字体尺寸

1em等于当前的字体尺寸。2em等于当前字体尺寸的两倍。

注意：（国内的设计师大都喜欢用px，而国外的网站大都喜欢用em，那么两者有什么区别，又各自有什么优劣呢？

1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位；3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) 

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

 

em有如下特点：

1. em的值并不是固定的；2. em会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意两点：1. body选择器中声明Font-size=62.5%；2. 将你的原来的px数值除以10，然后换上em作为单位；3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。

）

6、

简写为：

body {

    font: italic bold 30px arial, sans-serif;

}

font属性的值应按以下次序书写：

     [font-style] [font-weight] [font-size] [font-family]

-->

<!--

文本设置03　　　　　　　　

1、

text-indent属性

文本缩进

text-indent: 30px;

2、

text-align属性(文本对齐)

左对齐left

右对齐right

居中center

3、

text-decoration属性(文本装饰)

下划线（underline）

删除线（line-through）

上划线（overline）

4、单词之间的间距

letter-spacing属性

字符之间的距离

5、

text-transform属性（控制文本的大小写）

首字母大写（capitalize）

全部大写（uppercase）

全部小写（lowercase）

-->

<!--<textarea rows="6" cols="6" style="margin-left:20%"></textarea><br/>margin-left表示距离当前窗口左边的距离-->

<h1 align="center" style="margin-top:3%">CSS层叠样式表</h1>

<textarea rows="6" cols="6" id="ta" placeholder="CSS层叠样式表">

</textarea><!--align表示水平对齐的方式-->

</body>

</html>

CSS之背景设置、字体设置、文本设置的更多相关文章

  1. CSS那个背景图片的坐标怎么设置？怎么计算的？

    background:url(images/hh.gif) no-repeat -10px 0;},作用是移动背景的位置. 背影图片的左上角相对当前元素左上角的坐标. 右为X轴正半轴, 下为Y轴正半轴 ...

  2. CSS（四）：字体和文本属性

    一.字体属性 属性 描述 font-style 设置字体风格 font-weight 设置字体粗细 font-size 设置字体的尺寸(一般用px表示) font-family 设置字体系列 font ...

  3. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  4. 【Web】CSS实现抖音风格字体效果（设置文本阴影）

    简单记录 -慕课网- 步骤一:抖音风格字体效果 案例:抖音风格的字体特效. 实现这个 需要设置 网页背景颜色 字体颜色 字体大小 文本阴影 重点介绍如何设置文本阴影 CSS的文本阴影text-shad ...

  5. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  6. 【MFC系列】MFC快速设置控件文本字体、大小、颜色、背景

    以静态文本为例,分享一下怎么修改文本字体.大小.颜色.背景等参数.其他文本.控件等可参照修改. 1.修改字体.大小 这个很简单,首先在Dlg类中声明一个CFont类型的成员变量: 然后在类的初始化函数 ...

  7. MFC设置静态文本框，编辑框等控件背景和字体颜色

    在MFC类库提供了CWnd::OnCtlColor函数,在工作框架的子窗口被重画时将调用该成员函数.因此可以重载WM_CTLCOLOR消息的响应函数.此函数的原型:afx_msg HBRUSH OnC ...

  8. linux BASH shell设置字体与背景颜色

    linux BASH shell下设置字体及背景颜色的方法. BASH shell下设置字体及背景颜色  echo -e "\e[31mtest\e[41m"  \e[30m 将字 ...

  9. VC编程中如何设置对话框的背景颜色和静态文本颜色

    晚上编一个小程序,涉及到如何设置对话框的背景颜色和静态文本颜色.这在VC6.0中本来是一句话就搞定的事.在应用程序类中的InitInstance()函数添加: //设置对话框背景和文本颜色 SetDi ...

随机推荐

  1. msp430入门学习11

    msp430的定时器--看门狗 msp430入门学习

  2. Servlet实现国际化

    以下内容引用自http://wiki.jikexueyuan.com/project/servlet/internationalization.html: 三个重要术语: 国际化(i18n):这意味着 ...

  3. java代码判断文件类型（判断文件后缀名）

    1.两点需要注意 1.string.spilt("\\.")分割字符串成子字符串数组,以“.”分割,必须写成string.spilt("\\.")的方式,不能写 ...

  4. Centos系统备份

    使用root用户切换到根目录 然后,使用下面的命令备份完整的系统: tar cvpzf backup.tgz / --exclude=/proc --exclude=/lost+found --exc ...

  5. Maven+Mybatis+Spring+SpringMVC实现分页查询（附源代码）

    以下小宝鸽将分享一篇Mybatis分页功能的博文,以下将给出具体的步骤.跟着博主的节奏肯定能实现.另外最后还会附上整个project的源代码.假设是没有使用过maven的猿友可自行下载相关的jar包就 ...

  6. javascript遍历数组的两种方法

    var array=new Array(); array [0]="北京"; array [1]="天津"; ...//solution 1 for(var i ...

  7. S5P4418裸机开发系列教程－－源代码下载

    S5P4418裸机系列教程之stdio S5P4418裸机系列教程之shell命令行 S5P4418裸机系列教程之串口回显 S5P4418裸机系列教程之复位測试 S5P4418裸机系列教程之led跑马 ...

  8. 算法基础：正整数指定规则排序问题（Golang实现）

    给定字符串内有非常多正整数,要求对这些正整数进行排序.然后返回排序后指定位置的正整数 排序要求:依照每一个正整数的后三位数字组成的整数进行从小到大排序 1)假设不足三位,则依照实际位数组成的整数进行比 ...

  9. 【手势交互】8. Nimble Sense

    早在2012.2013年度,手势识别领域就发生了几起重要的行业并购.比方英特尔对Omek的收购,谷歌对Flutter的收购.而苹果公司更是以3.45亿美金得高价收购了之前为微软Kinect提供技术支持 ...

  10. webpy学习笔记之中的一个

    这几天在学习webpy框架,之前学过一段时间,后来各种转移框架,导致没有学透彻,都是皮毛,各种打印hello world! 汗! 如今将webpy的学习过程和思路写下来,便于复习和总结. 资料主要是w ...