<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. SOJ 3531_Number Pyramids

    [题意]给定一个数top及最底层元素个数n,构成一个以给top为塔尖,层数为n的如杨辉三角的金字塔,求有多少种 [分析]最终种数其实只与最底层的n个数的组合数有关,上层的每个都数是由最底层数相加得来 ...

  2. cogs——555. 网络探测

    555. 网络探测 ★☆   输入文件:ping.in   输出文件:ping.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述]    当出现网络故障时,我们经常使用“p ...

  3. 04-js的运算符

    <html> <head> <title>js的运算符学习</title> <meta charset="UTF-8"/> ...

  4. JavaScript为字符串添加样式

    <script type="text/javascript"> var txt="Hello World!" document.write(&quo ...

  5. 我的arcgis培训照片12

    来自:http://www.cioiot.com/successview-381-1.html

  6. paramiko错误信息：Paramiko error: size mismatch in put

    在使用paramiko的put往远处服务器上传资源的时候,出现类似下面的错误信息 The code in paramiko's sftp_client.py:putfo() reads at the ...

  7. 【结果发布】第六届SeedCoder编程大赛初赛结果发布

    微软俱乐部科技文化月seedcoder2014编程大赛已经初审完成. 评审小组选出最棒的作品进入决赛(现场答辩+陈述环节,由评委现场打分).终于排名由"初赛分数+现场答辩分"决定. ...

  8. [无线路由] “免费”斐讯K2路由器刷OpenWRT（实战MWAN多宽带网速叠加）

    (阿财首发于什么值得买)斐讯K2可以算是一个非常另类的跨界数码产品,其产品完全的醉翁之意不在酒.最多值99元的 MT7260硬件架构和用料,售价399元,金额激活K码后自动转入合作理财P2P平台,等待 ...

  9. 华为OJ2051-最小的K个数（Top K问题）

    一.题目描述 描述: 输入n个整数,输出其中最小的k个. 输入: 输入 n 和 k 输入一个整数数组 输出: 输出一个整数数组 样例输入: 5 2 1 3 5 7 2 样例输出: 1 2 二.Top ...

  10. 【C/C++多线程编程之五】pthread线程深入理解

    多线程编程之pthread线程深入理解       Pthread是 POSIX threads 的简称,是POSIX的线程标准.           前几篇博客已经能给你初步的多线程概念.在进一步学 ...