<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         .center{

             width: 200px;

             margin: auto;

         }

         /* 这里是加粗文字 */

         .p1 {

             font-weight: bold;

         }

         /* 这里是倾斜文字 */

         .p2 {

             font-style: italic;

         }

         /* 这里是文字间距 */

         .p3 {

             letter-spacing: 10px;

         }

         /* 这里 是词 间距 */

         .p4 {

             word-spacing: 10px;

         }

         /* 这里是首行缩进 */

         .p5 {

             text-indent: 10px;

         }

         /* 这里是上划线 */

         .p6 {

             text-decoration: overline;

         }

         /* 这里是下划线 */

         .p7 {

             text-decoration: underline;

         }

         /* 这里是删除线 */

         .p8 {

             text-decoration: line-through;

         }

         /* 这里是衬托文字 */

         .p9 {

             font-family: serif;

         }

         /* 这里是非衬托文字 */

         .p10 {

             font-family: sans-serif;

         }

         /* 这里是容器盒的阴影 */

         .box {

             width: 200px;

             height: 300px;

             background: red;

             box-shadow: 10px 10px 10px #ccc;

         }

         /* 这里是 文字的阴影 */

         h1 {

             text-shadow: 10px 10px 10px #ccc;

         }

         /* border边框属性 */

         .border{

             width: 200px;

             height: 200px;

             border-radius: % %;

             background: yellow;

             text-align: center;

             line-height: 200px;

         }

     </style>

 </head>

 <body>

     <div class="center">

         <p class="p2">这里是倾斜文字</p>

         <p class="p3">这里是文字间距</p>

         <p class="p4">这里 是词 间距</p>

         <p class="p5">这里是首行缩进</p>

         <p class="p6">这里是上划线</p>

         <p class="p7">这里是下划线</p>

         <p class="p8">这里是删除线</p>

         <p class="p9"> 这里是衬托文字</p>

         <p class="p10">这里是非衬托文字</p>

         <div class="box">这里是容器盒的阴影</div>

         <h1>这里是文字的阴影</h1>

         <div class="border">我是一个圆</div>

     </div>

 </body>

 </html>





												


											
文字属性和div容器盒的使用基础的更多相关文章
	

    
								
  1. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位
		
    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...
    
		
    2. 
						
  2. css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景
		
    什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种  ...
    
		
    3. 
						
  3. 伪元素选择器，选择器优先级，CSS修改文字属性，CSS修改字体属性，CSS修改其他属性
		
    伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...
    
		
    4. 
						
  4. 通过设置CSS属性让DIV水平居中
		
    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
    
		
    5. 
						
  5. DIV的Position属性和DIV嵌套DIV
		
    1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...
    
		
    6. 
						
  6. 转载网页博客：ie7bug:div容器下的img与div存在间隙
		
    1.代码及在浏览器上的显示 ie7: ie8+: Firefox: Chrome: 可以看出ie7上在div容器下添加img,div与img中有间隙,而在ie8+和其他浏览器上均显示正常 网页源代码如 ...
    
		
    7. 
						
  7. contenteditable属性让div也可以当做输入框
		
    你知道div也可以当做输入框么? H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调 ...
    
		
    8. 
						
  8. day67-CSS字体属性、文字属性、背景属性、css盒子模型
		
    1. 字体属性 1.1 文字字体:font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值. * {font-fa ...
    
		
    9. 
						
  9. html5文本框提示文字属性为placeholder
		
    html5文本框提示文字属性为placeholder 例子:  <textarea id="comment" class="commentCont"  n ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. html单元格导出excel图形环境问题
			
     现象:报表页面端展现正常,点击导出excel,选择完是否分页后页面没有反应,后台润乾日志中错误信息: runqianReportLogger : [ERROR]  - Error: at com ...
    
			
    2. 
						
  2. ShortcutBadger添加桌面角标（Badge）
			
    1.简介:角标原本是苹果的ios中的东西,android原生并不支持角标,因为google的意思是让大家用notification(提示栏)即可,不过无妨,厉害的android第三方厂商可以通过在自定 ...
    
			
    3. 
						
  3. OkHttp2.0有Bug，暂时不推荐在产品中使用
			
    版权声明: 欢迎转载,但请保留文章原始出处 作者:GavinCT 出处:http://www.cnblogs.com/ct2011/p/4078137.html 之前在博客里推荐使用OkHttp来替换 ...
    
			
    4. 
						
  4. 【Python】Java程序员学习Python（五）— 函数的定义和使用
			
    不想做一个待宰的羔羊!!!!要自己变得强大.... 函数的定义和使用放在最前边还是有原因的,现在语言趋于通用,基本类型基本都是那些,重点还是学习对象的使用方法,而最根本的还是方法的使用,因此优先介绍, ...
    
			
    5. 
						
  5. Automate the Sizing of your SGA in Oracle 10g
			
    How much memory does each of the individual components of the SGA need? Oracle now has methods to de ...
    
			
    6. 
						
  6. Oracle v$session/v$sql 表
			
    在本视图中,每一个连接到数据库实例中的 session都拥有一条记录.包括用户 session及后台进程如 DBWR, LGWR, arcchiver等等. V$SESSION中的常用列 V$SESS ...
    
			
    7. 
						
  7. Dos命令删除添加新服务
			
    安装服务sc create Svnservice binpath= "d:\subversion\bin\svnserve.exe --service -r E:\projectversio ...
    
			
    8. 
						
  8. Python基础第一篇-------python的介绍
			
    一.python的介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发时间,决心开发一个新的脚本 ...
    
			
    9. 
						
  9. Provisional headers are shown
			
    问题: Chrome请求出现"Provisional headers are shown": 原因: 这种一般是由于浏览器端的插件或客户端的软件对请求进行了拦截:我们出现的情况,是 ...
    
			
    10. 
						
  10. 铁乐学python_day03-作业
			
    1.有变量name = "aleX leNb" 完成如下操作: 移除name变量对应的值两边的空格,并输出处理结果 n1 = name.strip() print(n1) 结果:a ...
    
			
    11.