【学习笔记之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脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

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

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

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

Dreamweaver CS6
视觉化网页开发工具

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

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

网页批注功能的Y轴位置自适应算法本文将探讨如何实现类似Word文档的批注功能,特别是如何处理批注之间的间�...

GiteePages静态网站部署失败:404错误排查与解决在使用Gitee...

实现图片点击后周围图片散开并放大效果许多网页设计中,需要实现一种交互效果:点击某张图片,使其周围的...

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。
