JavaWeb学习之路(26)–CSS之文本样式

简介: 本文目录1. 前言2. 文本颜色3. 文本对齐4. 文本装饰线5. 小结

1. 前言

上一篇我们已经讲解了如何将CSS样式设置到标签上,然后也演示了CSS语言格式特点。


所以之后的学习就很简单了,我们学习下新的样式名称,取值和对应的效果,然后自己多写一些代码练习熟练,就可以了。


本篇,我们就来学习下文本相关的样式。


2. 文本颜色

可以使用color:xxx;来设置为本颜色,其中xxx是颜色的名称如red/green/yellow。示例如下:


<body>

   <div>

       文本颜色演示:

       <p style="color:red;">

           春苗不觉晓

       </p>

       <p style="color:green;">

           处处闻啼鸟

       </p>

       <p style="color:blue;">

           夜来风雨声

       </p>

       <p style="color:yellow;">

           花落知多少

       </p>

   </div>

</body>


我们呢设置了4种颜色,所以效果如下:



3. 文本对齐

什么叫做对齐呢,就好比我们军训的时候参加队列练习,教官会说“向左看齐”,其含义就是左对齐。


对齐的意思就是向左对齐、向右对齐。还有一种叫做居中对齐,就是不管有几个人,都在中间呆着去吧。


说的太抽象了,我们还是看代码更直观:


 <!-- 左对齐 -->

   <div style="text-align: left;">

       <p>

           加入生活欺骗了你

       </p>

       <p>

           不要悲伤,不要心急

       </p>

       <p>

           犹豫的日子里需要寂静

       </p>

       <p>

           相信吧,那快乐的日子即将来临

       </p>

   </div>

   <!-- 右对齐 -->

   <div style="text-align: right;">

       <p>

           加入生活欺骗了你

       </p>

       <p>

           不要悲伤,不要心急

       </p>

       <p>

           犹豫的日子里需要寂静

       </p>

       <p>

           相信吧,那快乐的日子即将来临

       </p>

   </div>

   <!-- 居中对齐 -->

   <div style="text-align: center;">

       <p>

           加入生活欺骗了你

       </p>

       <p>

           不要悲伤,不要心急

       </p>

       <p>

           犹豫的日子里需要寂静

       </p>

       <p>

           相信吧,那快乐的日子即将来临

       </p>

   </div>


在上面的例子中,我们分别对三个div设置了左对齐,右对齐,居中对齐,所以div中的段落就会采用相应的对齐方式,所以效果如下:



4. 文本装饰线

提到文本装饰线,这个名字就有点高端了,但是下划线大家想必很清楚吧。


CSS的文本装饰线不仅支持下划线,还支持上划线,还有穿越线。上划线是在文本上方的横线,而穿越线是穿过文字中间的直线。


我们来看下代码:


  <div>

       <!-- 没有装饰线 -->

       <p style="text-decoration:none;">

           加入生活欺骗了你

       </p>


       <!-- 下划线 -->

       <p style="text-decoration:underline;">

           相信吧,那快乐的日子即将来临

       </p>


       <!-- 上划线 -->

       <p style="text-decoration:overline;">

           不要悲伤,不要心急

       </p>


       <!-- 穿越线 -->

       <p style="text-decoration:line-through;">

           犹豫的日子里需要寂静

       </p>

   </div>


对应效果如下。


上面的效果中国,其实也就下划线比较常用而已,应用场景就是那些网站的超级链接,很多时候超级链接喜欢用下划线标志出来。.


5. 小结

到这里大家可能已经发现了,CSS其实语法都是一样的,只是需要记住那些样式的写法,包括名称和值两部分的写法。


其实也不用大脑记住,我们记在电子文档里面,知道有这么一个样式,当我们需要写的是能够想起来就OK。


其实写的多了,自然就记住了。

相关文章
|
3天前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
3天前
|
前端开发 容器
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
|
17天前
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
|
1月前
|
前端开发
css文本垂直展示------
css文本垂直展示------
19 1
css文本垂直展示------
|
25天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
28 1
|
1月前
|
XML 前端开发 JavaScript
学习css
【5月更文挑战第25天】学习css
20 1
|
1月前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
32 1
|
1月前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
27 1
|
1月前
|
前端开发 UED
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式
【5月更文挑战第7天】CSS 提供关键帧和过渡动画两种方式创建动态效果。关键帧动画通过定义一系列样式的关键帧,浏览器自动插入过渡帧形成动画,如示例中背景颜色变化的循环。过渡动画则在属性改变时(如鼠标悬停)触发,展示平滑转换,如 div 元素尺寸变化。通过调整帧时间、顺序和样式,可实现更复杂的动画,增强网站交互体验。
40 4
|
1月前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。