常见文本样式及标签

  本文设计到常见对文档的处理样式,和块,行标签的特点。

  没用什么重要内容,只是自己的一些知识点的回忆,对以前知识的一个梳理过程,望某懒虫加油!!!

  

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本样式和块、行、内敛标签</title><style>div{color: red;/*这是颜色,对于颜色的几种表示方式,大家都懂不用多说*//*text-align: left;text-align: right;text-align: center;*//*text-align: justify;*//*这是文本排列对其方式,对于justify的意思就是,在一个容器里展开宽度的相等的。*//*text-decoration: overline;text-decoration:line-through;*/text-decoration: underline;/*这是对文本进行划线装饰,比如商场的大甩卖在价格中间划一道线*//*text-transform:uppercase;text-transform:lowercase;*/text-transform: capitalize;/*这是文本的转换,全部转换成大写,或者小写,对于capitalize,意思是将每一个单词的首字母转换成大写*//*text-indent:2em;*//*这是文本缩进,通常情况下,em承接父级字体px,2em就是刚好缩进2字符。有时候用text-indent:-9999px;来偏移掉字体,偏离可见区域。*//*letter-spacing:10px;*//*设置字母间的间距*//*line-height: 30px;*//*这是文本的行高,通常与height搭配,使文字垂直居中*/text-shadow: 5px 5px 10px yellow;/*这是文字的阴影,第一个5px是水平方向,第二个5px是垂直方向,注意10px是阴影的模糊范围。和box-shadow类似*/font-family: 微软雅黑;font-style: italic;word-spacing: 10px;vertical-align: center;white-space: nowrap;/*当然还有不经常用到的这些,知道意思就行,用到的时候能想到,W3CSchool,菜鸟教程必备的工具。对于文本样式还有很多简写的方式,font,background,border,padding,margin,*//*    写到了这么多文本样式,突然想到经常遇到的一个问题,就是要求你在一行文本中,文本超出宽度溢出显示省略号,css解决方案如下:*/width: 100px;/*给出你显示文本的范围,当然如果用em来代替效果会更好,不会出出现半截在外面的丑态*/overflow: hidden;/*让超出部分隐藏*//*white-space: nowrap;*//*前面刚提到,意思是强制不换行,这是对一行文本的操作,对于多行文本,一般用js来写效果更好*/text-overflow: ellipsis;/*文本隐藏后添加省略号,通过这几句话就可以实现文本溢出显示省略号了*/}</style>
</head>
<body><div>这是一行文字!</div><!-- 这两天写着写着写烦了,就纳闷,这么简单的东西花时间写干什么,写了8百遍的东西,写了也算是一种回顾,以后看到了,告诉自己学过这个啊(苦笑) --><!-- 接下来让我们闲扯一下常见标签有哪些,当然他们是有分类的比如,块标签,内敛属性的标签以及内敛块。下面我们一一讲解他们的特点和区别 --><!-- 对于块标签来说,他们独一无二1,独占一行2,支持所有的css样式3,宽度会继承父级100%(默认情况) --><div style="height:20px;padding:10px 10px;background-color: yellow;"><div style="background-color: red;">宽度继承</div></div><!-- 常见的块标签有标题标签,列表标签等 --><!-- 对于行标签1,内容撑开高度2,不支持宽高,不支持上下的margin,padding(对于设置相应的属性,没用效果)3,同属性的标签排在同一排4,代码换行被解析 --><!-- 行标签常见的有span,a,strong,em(斜体)等写网页的时候经常会设置宽高没用效果,可能就是行标签的作为,看情况转换成块或内敛快就行,有时候被定位或者浮动了就不需要设置。 --><!-- 通常用a标签可以设置锚点 --><a href="#tips">访问到id名为tip的位置</a><a id="tips" href="javascripts;">我的名字叫tips</a><!-- 标签a有target属性,_self默认在当前页打开_blank在新的窗口打开 --><!-- 对于内联块标签1,内容撑开宽度2,同属性的标签排在同一排3,支持所有的css样式4,代码换行被解析 --><!-- 常见的内联块标签有img标签,注意当页面加入img时,要指定它的宽高,这样当页面加载,或者维护人员加入图片,保证图片不变形 -->
</body>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369556.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

寻找内存泄漏:一个案例研究

一周前&#xff0c;我被要求修复一个有内存泄漏问题的webapp。 考虑到过去两年左右的时间里我已经看到并修复了数百个泄漏&#xff0c;我想这有多难。 但是事实证明这是一个挑战。 12小时后&#xff0c;我发现该应用程序中不少于5个漏洞&#xff0c;并设法修复了其中4个漏洞。…

matlab中求积函数,MATLAB软件及高斯勒让德求积公式MATLAB软件及高斯勒让德求积公式.doc...

MATLAB软件及高斯勒让德求积公式MATLAB软件及高斯勒让德求积公式数 值 分 析 课 程 实 验 报 告2012—2013学年度 第二学期系别&#xff1a;数学与计算机科学学院实验课程数值分析班 级10级数学与应用数学2班学 号05姓 名杜宁峰指导教师陈耀庚实验题目学习编写高斯-勒让德计算程…

[HNOI2015] 落忆枫音

题目描述 「恒逸&#xff0c;你相信灵魂的存在吗&#xff1f;」 郭恒逸和姚枫茜漫步在枫音乡的街道上。望着漫天飞舞的红枫&#xff0c;枫茜突然问出这样一个问题。 「相信吧。不然我们是什么&#xff0c;一团肉吗&#xff1f;要不是有灵魂......我们也不可能再见到你姐姐吧。」…

border,padding,margin盒模型理解

安静的敲着键盘&#xff0c;已势不可挡的姿势逼近php&#xff0c;我想我是一个幸福的人&#xff0c;未来不可期&#xff0c;做好现在&#xff0c;偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识。 本文盒模型理解。 <!DOCTYPE html> <html lang"en&qu…

我的Java自定义线程池执行器

ThreadPoolExecutor是Java并发api添加的一项功能&#xff0c;可以有效地维护和重用线程&#xff0c;因此我们的程序不必担心创建和销毁线程&#xff0c;而将精力放在核心功能上。 我创建了一个自定义线程池执行程序&#xff0c;以更好地了解线程池执行程序的工作方式。 功能性…

php中mysqlstat函数,PHP函数mysql_stat介绍

&#xfeff;定义和用法mysql_stat() 函数返回 MySQL 服务器的当前系统状态。如果成功&#xff0c;则该函数返回状态。如果失败&#xff0c;则返回 false。语法mysql_stat(connection)提示和注释注释&#xff1a;mysql_stat() 目前只返回 uptime、threads、queries、open table…

全选、全部选、反选、提交

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title> </head> <body><form><input type"checkbox" name"items" value"足球"&…

Java中的模板方法设计模式

模板方法模式是一种行为设计模式&#xff0c;它为算法提供了基础方法&#xff0c;称为模板方法&#xff0c;该方法将其某些步骤推迟到子类中&#xff0c;因此算法结构相同&#xff0c;但某些步骤可以由子类根据上下文重新定义。 模板是指预设格式&#xff0c;例如HTML模板&…

android adb源码分析(1)

ADB是Android debug bridge的缩写&#xff0c;它使用PC机可以通过USB或网络与android设备通讯。 adb的源码位于system/core/adb目录下&#xff0c;先来看下编译脚本Android.mk&#xff1a; [plain] view plaincopy# Copyright 2005 The Android Open Source Project # # Andr…

matlab二次二阶距,用Matlab改进一次二阶矩法程序.doc

用Matlab编的计算结构可靠指标的改进一次二阶矩法程序(验算点法)题目&#xff1a;编制改进一次二阶矩法计算可靠指标的程序&#xff0c;并给出算例&#xff0c;要求提供源程序选取的算例为&#xff1a;zg(x,y)x*y-1140&#xff0c;其中x,y服从正态分布&#xff0c;μx38,Vx0.1,…

winform中的数据绑定

1. 简单的数据绑定 例1 using (SqlConnection conn new SqlConnection(ConfigurationManager.ConnectionStrings["connStr"].ToString())) { SqlDataAdapter sda new SqlDataAdapter("Select * From T_Class Where F_TypeProduct order by F_RootID,F_Order…

jQuery数据表和Java集成

jQuery DataTables是一个开放源代码插件&#xff0c;用于在浏览器中创建表。 它具有许多功能&#xff0c;例如排序&#xff0c;服务器端处理&#xff0c; JQUERY UI主题滚动。 该插件的下载链接&#xff1a; http://www.datatables.net/download/ 在本演示中&#xff0c;我…

CSS 属性 - 伪类和伪元素的区别

伪元素和伪类之所以这么容易混淆&#xff0c;是因为他们的效果类似而且写法相仿&#xff0c;但实际上 css3 为了区分两者&#xff0c;已经明确规定了伪类用一个冒号来表示&#xff0c;而伪元素则用两个冒号来表示。 :Pseudo-classes ::Pseudo-elements 但因为兼容性的问题&…

class-感知机Perception

1 感知机模型1.1 模型定义2 感知机学习策略2.1 数据的线性可分性2.2 学习策略3 学习算法3.1 算法原始形式3.2 收敛性3 学习算法的对偶形式1 感知机模型 感知机perceptron是二类分类问题的线性分类模型&#xff0c;输入为实例的特征向量&#xff0c;输出为实例的类别&#xff08…

图片资源 php,php URL图片资源传参生成对应尺寸图片

最近项目中需要上传大图&#xff0c;然后不同设备请求不同大小的图片&#xff0c;之前有用过一个通过URL参数来获取不同大小的图片的接口感觉设计方式请不错&#xff0c;于是就百度看看类似是如何实现的&#xff0c;找了几天找个两个功能类似的记录下。1、图片服务器 imagemagi…

Java中的方法调用有多昂贵

我们都去过那儿。 在查看设计不良的代码的同时&#xff0c;听听作者对人们永远不应该牺牲性能而不是设计的解释。 而且&#xff0c;您不能说服作者摆脱其500行方法&#xff0c;因为链接方法调用会破坏性能。 好吧&#xff0c;这可能在1996年左右是正确的。 但是自那时以来&…

UVa-116 Unidirectional TSP 单向旅行商

题目 https://vjudge.net/problem/uva-116 分析 设d[i][j]为从(i,j)到最后一列的最小开销&#xff0c;则d[i][j]a[i][j]max(d[i1][j1],d[i-1][j1]) 参考数字三角形,用逆推的方法,先确定最后一列d[i][n-1]a[i][n-1],再确定n-2列,此时d[i][n-2] a[i][n-2]min(d[i][n-1],d[i-1][n…

1.HTML

HTML简介 hyper text markup language 即超文本标记语言。 超文本: 就是指页面内可以包含图片、链接&#xff0c;甚至音乐、程序等非文字元素。 标准模板 <!DOCTYPE html> <html lang"en"><head> <meta charset"U…

error connection reset by peer 104

connection reset by peer的常见原因 1.服务器的并发连接数超过了其承载量&#xff0c;服务器会将其中一些连接关闭&#xff1b;2. errno 104错误表明你在对一个对端socket已经关闭的的连接调用write或send方法&#xff0c;在这种情况下&#xff0c;调用write或send方法后&…

php记住表单数据cookie,【PHP基础】cookies和session

1.Cookiescookie 常用于识别用户。cookie 是服务器留在用户计算机中的小文件。每当相同的计算机通过浏览器请求页面时&#xff0c;它同时会发送 cookie。通过 PHP&#xff0c;您能够创建并取回 cookie 的值。1.1、如何创建 cookie&#xff1f;setcookie() 函数用于设置 cookie。…