<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. spring 邮件服务

    https://www.cnblogs.com/ityouknow/p/6823356.html https://www.cnblogs.com/nfcm/p/7843935.html

  2. codevs——1006 等差数列

    1006 等差数列  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 给定n(1<=n< ...

  3. Oracle表空间 ORA-01653:

    --1.查看表空间USERS使用情况SELECT T.TABLESPACE_NAME,D.FILE_NAME, D.AUTOEXTENSIBLE,D.BYTES,D.MAXBYTES,D.STATUS ...

  4. Core Data 的简单使用

    认识cocoa Data在ios开发中的环境情况. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/f ...

  5. Websphere优化 （四个方面）举例

    Websphere优化 一.简单介绍 环境 名称 版本号 server操作系统 Centos 5.6 应用server操作系统 Windows 7 Websphere版本号 WAS 7.0 数据库 O ...

  6. EC2的维护更新-总结篇及有效经验分享

    2014年10月11日 号,我们对不到10%的EC2实例的完毕了重新启动.来预防不论什么与Xen安全通报(XSA-108)相关的安全风险. 日之前都有义务遵守相关问题的保密要求.直到它被向公众公布. ...

  7. hdu4057 Rescue the Rabbit（AC自己主动机+DP）

    Rescue the Rabbit Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...

  8. android几个高速打包命令

    在MTK  android4.4 上,有几条命令能够高速打包system uaserdata bootimage,可提高效率. snod:这个命令是能够高速打包system.是不会运行android各 ...

  9. lua-5.2.3编译问题记录&quot;libreadline.so: undefined reference to `PC&#39;&quot;

    作者:zhanhailiang 日期:2014-10-21 [root@~/software]# cd lua-5.2.3 [root@~/software/lua-5.2.3]# make linu ...

  10. 【跟我一步一步学Struts2】——登陆样例

    本篇博客通过一个简单的登陆小样例来入门,简单了解一下struts2是怎样工作的: 第一步引入Jar包: commons-fileupload-1.2.1.jar,文件上传 commons-loggin ...