【网页前端】CSS样式表进阶文本样式

简介: 【网页前端】CSS样式表进阶文本样式

1. 文本对齐

text-align:用于设置文本内容的水平对齐方式,相当于 html 标签属性中的 align

准备代码:

<style> 
    .d1{
        width: 200px; 
        height: 100px; 
        background-color: lightblue; 
   } 
</style> 
    <body>
        <div class="d1">今天天气好晴朗</div> 
    </body>

常见属性值:(在以上代码基础上进行修改)

10.png

注意:

仅 块级元素 才可以完整展示对齐效果。

行级元素无法完整展示对齐效果(行级可以通过 display:block;转块级元素后,使用对齐效果)

2. 文本缩进

text-indent:用于某段文本的首行进行缩进。

image.png

例如:text-indent: 10px; 

image.png

在开发中,不建议在首行缩进处使用 px 单位,这样需要美工人员根据字体大小计算需要缩进的像素,费时费力。

所以在开发中,建议使用 em 单位进行缩进

例如:text-indent: 2em;

image.png

总结:

em 会根据当前字体大小 font-size 自动调整。

用以保证 1em 就是 1 个汉字

3. 文本装饰

text-decoration:文本的装饰效果。(通常用于给超链接修改装饰效果)

常见属性值:

image.png

超链接默认是 underline:

通过设置:text-decoration: none;

image.png

总结:文本装饰,通常用于设置超链接去除下划线。

4. 行高

line-height:用于设置元素内,每行之间的间距。(行高越大,行间距越大)

image.png

注意:行高的设置单位可以为 px,em,百分比 

image.png

小技巧:若元素中仅有一行内容,需要将内容在元素中垂直居中,仅需要 行高=元素高度 即可

image.png

5. 字体样式

在网页样式中,我们可以对字体进行样式调节。

调节字体字号、字体类型、字体粗细、字体样式等

image.png

注意:

1font-family 可以设置的字体,都是本机存在的字体。

image.png

2font-weight 也可以设置数字 100~900(除非精细化调整,否则不用数字)

400 normal700 bold

相关文章
|
2天前
|
移动开发 前端开发 HTML5
2024.3.30-认识 CSS (文本样式、复合选择器)
2024.3.30-认识 CSS (文本样式、复合选择器)
|
7天前
|
前端开发 JavaScript 程序员
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
|
5天前
|
缓存 前端开发 JavaScript
如何优化前端网页加载速度
本文将介绍一些优化前端网页加载速度的技巧和方法,包括减少HTTP请求、压缩文件大小、使用浏览器缓存以及异步加载等。通过这些优化措施,您可以提升用户体验,加快网页加载速度,为用户提供更好的网页访问体验。
|
2天前
|
移动开发 前端开发 HTML5
CSS 常用样式属性和字体图标
CSS 常用样式属性和字体图标
|
2天前
|
前端开发 iOS开发
通过css内修改input框placeholder样式
通过css内修改input框placeholder样式
12 1
|
6天前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
2天前
|
Web App开发 存储 SQL
CSS3 常用样式
CSS3 常用样式
CSS3 常用样式
|
6天前
|
前端开发 容器
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
|
2天前
|
移动开发 前端开发 UED
CSS3 常用样式属性
CSS3 常用样式属性
|
2天前
|
移动开发 前端开发 HTML5
CSS3 文本相关属性
CSS3 文本相关属性