【学习笔记之CSS+DIV】CSS文字_html/css_WEB-ITnose
CSS设计彻底研究5.1节笔记
属性 | 含义 | 备注 |
font-family | 字体 | 可以同时声明多种字体,字体之间用逗号分隔。例:font-family: Arial, ”Times New Roman”; |
font-size | 文字大小 | 长度单位 |
相对单位 | (1)px:相对于1个像素的比例,1px相当于1像素; (2)em:1em表示的长度是其父元素中字母m的标准宽度; (3)ex:1ex表示字母x的标准高度; (4)% | |
绝对单位 | (1)pt:point,印刷的点数,在一般的显示器中1pt相对于1/72inch; (2)in:inch,英寸; (3)cm:centimeter,厘米; (4)mm:millimeter,毫米; (5)pc:pica,1pc=12pt。 | |
line-height | 行高 | 表示的是两行文字之间的基线(下划线的位置就是文字的基线)的距离。 |
注:三个属性的混写:font:大小/行高 字体; | ||
color | 文字颜色 |
|
background-color | 背景颜色 |
|
font-weight | 文字加粗 | normal|bold |
font-style | 文字倾斜 | normal|oblique(倾斜)|italic(意大利体) |
text-decoration | 文字效果 | none|underline(下划线)|overline(上划线)|line-through(删除线)|blink(闪烁,IE不支持) 注:同时应用多个效果时,中间用空格隔开。 |
text-align | 水平对齐 | left|right|center|justify(两端对齐) |
vertical-align | 垂直对齐 | 只能用于表格单元格中的对象竖直方向的对齐 |
text-indent | 段首缩进 | 如:text-indent:2em;(缩进2个字符) |
技巧:
1.设置首字下沉
.firstLetter{
font-size:3em;
line-height:3em;
float:left;
}
2.段落的垂直居中
(1)方法一:将行高(line-height)设置为与高度(height)相同的值
缺点:对于超过一行的文本,增加文本长度,或者是浏览器窗口变窄,于是文本需要折行显示,这种方法就无效了。
(2)方法二:改进方法:multi-vertical.htm
HTML代码
<p class="sycode"> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < title > Universal vertical center with CSS </ title > < style > #outer { height : 100px ; overflow : hidden ; position : relative ; } #outer[id] { display : table ; position : static ; } #middle { position : absolute ; top : 50% ; } /* for explorer only */ #middle[id] { display : table-cell ; vertical-align : middle ; position : static ; } #inner { position : relative ; top : -50% } /* for explorer only */ /* optional: #inner[id] {position: static;} */ .withBorder { border : 1px green solid ; } </ style > </ head > < body > < div id ="outer" class ="withBorder" > < div id ="middle" > < div id ="inner" > any text any height any content, everything is vertically centered. </ div > </ div > </ div ></ body > </ html > </p>

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前
