<!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. Postman Postman接口测试工具使用简介
			
    Postman接口测试工具使用简介 by:授客 QQ:1033553122 本文主要是对Postman这个接口测试工具的使用做个简单的介绍,仅供参考. 插件安装 1)下载并安装chrome浏览器 2) ...
    
			
    2. 
						
  2. BlockingQueue介绍及使用
			
    1.BlockingQueue队列和平常队列一样都可以用来作为存储数据的容器,但有时候在线程当中 涉及到数据存储的时候就会出现问题,而BlockingQueue是空的话,如果一个线程要从Blockin ...
    
			
    3. 
						
  3. maven 超级pom位置、maven命令、构件、下载位置、手动打包位置、中央仓库ip
			
    1.超级pom位置 ----> 解压M2_HOME/lib/maven-model-builder-3.5.4.jar 2.运行maven 命令实际上是运行了 java 命令,因为maven插件 ...
    
			
    4. 
						
  4. ssm单项目整合
			
    目录 前言 创建maven项目 添加依赖 配置文件 总览 jdbc配置 mybatis配置 dao层配置 service层配置 事务配置 controller配置 web.xml 使用 前言 spri ...
    
			
    5. 
						
  5. JAVA学习笔记及知识积累
			
    为什么说Java具有跨平台特性? 我们知道计算机只认识1,0两种电平的信号,所有信息或者计算指令最终都编码成16进制的机器码,这些机器码作为程序保存于计算机的内存中,由CPU去单个取指令执行直到程序执 ...
    
			
    6. 
						
  6. Javascript---add to favorite | Set Homepage
			
    <!-- 设为首页 --> <li><a href="javascript:setHome(this,window.location)"> &l ...
    
			
    7. 
						
  7. 数据库复制 Nacicate  Premium
			
    之前都是“备份-还原”,抑或“导出-导入”.今天在将SqlServer中的数据导入到MySql中时发现了一个非常方便的方法,无需任何繁琐的配置和操作.废话少说,进入正题: 工具:Navicat Pre ...
    
			
    8. 
						
  8. 名词解释：Linux内存管理之RSS和VSZ
			
    Linux内存管理中不管是top命令还是pmap命令,都会有RSS和VSZ这两个名词,这里解释一下: RSS( Resident Set Size )常驻内存集合大小,表示相应进程在RAM中占用了多少 ...
    
			
    9. 
						
  9. iOS设计模式 - 组合
			
    iOS设计模式 - 组合 原理图 说明 将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性.掌握组合模式的重点是要理解清楚 “部分/整体” 还有  ...
    
			
    10. 
						
  10. [翻译] M13BadgeView
			
    M13BadgeView M13BadgeView is a customizable badge view for iOS applications. The badge is built to b ...
    
			
    11.