CSS3-文本样式、字体样式

3、美化网页元素

3、1为什么要美化网页?

有效的传递页面信息
美化网页，页面漂亮，才能吸引用户
凸显页面的主题
提高用户的体验

span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*id选择器：#   */#title1{font-size: 50px;}</style></head>
<body>
欢迎学习<span id="title1">java</span></body>
</html>

3.2 字体样式
font属性

    <!--font-family:字体font-size  :字体大小font-weight:字体粗细color  :字体颜色--><style>body{font-family: "Hiragino Maru Gothic ProN",楷体;font-size:20px;color:#267fc4;}h1{font-size: 30px;}.p1{font-weight: bolder;}</style>

3.3 文本样式

颜色
文本对齐的方式
首行缩进
行高
装饰

    <!--颜色：单词RGB 0~FRGBA  A：0~1  透明度text-align:center  居中text-indent: 2em;    首行缩进：em为两个字height: 300px;   块高line-height: 100px;   行高，行和块的高度一致时就可以上下居中--><style>h1{color: rgba(0,255,255,0.8);text-align: center;}.p1{text-indent: 2em;  }.p3{background: antiquewhite;height: 300px;line-height: 100px;}.l1{text-decoration: line-through;  /*中划线*/}.l2{text-decoration: underline;  /*下划线*/}.l3{text-decoration: overline;  /*上划线*/}/*超链接去下划线*/a{text-decoration: none;}/*文本图片水平对齐*/img,span{vertical-align: middle;}</style>

CSS3-文本样式、字体样式相关推荐

微信小程序自学笔记-----文本和字体样式设置
微信小程序自学笔记-----文本和字体样式设置用于自己自学微信小程序知识点总结,新手小白一枚,请大佬勿喷知识要点 · 各种字体样式属性命名及含义 · 利用style和class设置字体样式的方法 ...
CSS总结（基本文本和字体样式）
基本文本和字体样式: 颜色: p{color:red;} 字体种类: p{font-family:arial;} arial 字体,这个字体可在任何电脑上找到. 通常认为最佳做法还是添加 Helvet ...
html页面设置平滑字体,HTML5之CSS-网页文本美化-字体样式
做了挺长时间的程序员,逐渐的让我意识到,其实技术是给自己打开了一扇窗户,让自己更好的去了解这个世界. 今天,来了解文字在网页在中,是如何去设置的. 中间来一个小插曲,我想大家应该都用过办公软件,那么办 ...
html5控制字体样式,HTML5之CSS-网页文本美化-字体样式
做了挺长时间的程序员,逐渐的让我意识到,其实技术是给自己打开了一扇窗户,让自己更好的去了解这个世界. 今天,来了解文字在网页在中,是如何去设置的. 中间来一个小插曲,我想大家应该都用过办公软件,那么办 ...
CSS从入门到精通——文本与字体样式1.0
1.字体颜色.类型与大小任务描述相关知识字体颜色color 字体类型font-family 字体系列字体栈字体大小font-size 设置方式常用单位像素 em 百分比结合 em 任务描 ...
css文本与字体样式（基础知识整理）
本文重要内容 CSS的单位字体属性文本属性定位属性:position.float.overflow等 CSS的单位 html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中 ...
CSS 文本及字体样式（复习自用）
1.文本属性文本属性-概览 color 为字体指定颜色 font-style 用于打开和关闭斜体文本 font-weight 为字体设置粗细程度 font-size 为文字指定大小 font-fam ...
RTF富文本中字体样式设置为-apple-system-font导致IOS客户端显示字体异常
发现该段内容的font-famliy中有一些其他字体,如-apple-system-font -apple-system.BlinkMacSystemFont 是什么东东?根据 Webkit 博客,- ...
文本与字体样式3.0
文本装饰与文本布局任务描述相关知识文本装饰text-decoration 文本布局文本对齐text-align 行高 line-height 字符间距和字间距letter-spacing和wo ...
文本与字体样式2.0
字体粗细与风格任务描述相关知识字体粗细font-weight 字体风格font-style 任务描述上一篇中,我们学习了使用color,font-family和font-size来设置字体的属 ...

CSS3-文本样式、字体样式

3、美化网页元素

CSS3-文本样式、字体样式相关推荐

最新文章

热门文章