<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. Linux下汇编语言学习笔记6 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  2. cogs 48. [NOIP2007] 字符串的展开

    48. [NOIP2007] 字符串的展开 ★☆   输入文件:expand.in   输出文件:expand.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] 在初赛普 ...

  3. 使用spark 计算netflow数据初探

    spark是一个高性能的并发的计算平台,而netflow是一种一般来说数量级很大的数据.本文记录初步使用spark 计算netflow数据的大致过程. 本文包括以下过程: 1. spark环境的搭建 ...

  4. php文件上传判断类型

    上传文件对象在$_FILES['Filedata']对象中,临时路径是tmp_name,判断是上传文件是否为真实图片方法很多,我用的是这个: if( !@getimagesize( $_FILES[' ...

  5. iOS8使用TouchID

    iOS8新增了LocalAuthentication框架,用于TouchID的授权使用.亲測,眼下须要用户的设备支持指纹识别并已设置锁屏,并且实际測试过程中反馈比較慢.不能直接跟第三方账号passwo ...

  6. .a 文件解析

    首先先准备一个静态库.a文件,比如叫staticLibrary.a,放在桌面的test目录里. 分离arch 首先先file一下staticLibrary.a,看一下该文件包含几种arch. ~ cd ...

  7. io口的作用

    I/O接口的作用     主机与外界交换信息称为输入/输出(I/O).主机与外界的信息交换是通过输入/输出设备进行的.一般的输入/输出设备都是机械的或机电相结合的产物,比方常规的外设有键盘.显示器.打 ...

  8. solr入门之solr的拼写检查功能的应用级别尝试

    今天主要是收集了些拼写检查方面的资料和 尝试使用一下拼写检查的功能--=遇到了不少问题 拼写检查的四种配置眼下我仅仅算是成功了半个吧 --------------------------------- ...

  9. 稀疏表示 Sparse Representation

    稀疏表示_百度百科 https://baike.baidu.com/item/%E7%A8%80%E7%96%8F%E8%A1%A8%E7%A4%BA/16530498 信号稀疏表示是过去近20年来信 ...

  10. Linux 系统内核空间与用户空间通信的实现与分析

    本文转载自:https://www.ibm.com/developerworks/cn/linux/l-netlink/index.html 多数的 Linux 内核态程序都需要和用户空间的进程交换数 ...