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天前
|
前端开发
particlesJS使用简介,CSS字体样式值
particlesJS使用简介,CSS字体样式值
|
3天前
|
前端开发
css文本垂直展示------
css文本垂直展示------
7 1
css文本垂直展示------
|
4天前
|
前端开发
CSS优先级:如何解决样式冲突?
CSS优先级:如何解决样式冲突?
|
5天前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
11 1
|
5天前
|
前端开发
css设置内嵌样式阴影
css设置内嵌样式阴影
11 0
|
5天前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
14 0
|
5天前
|
前端开发 UED
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式
【5月更文挑战第7天】CSS 提供关键帧和过渡动画两种方式创建动态效果。关键帧动画通过定义一系列样式的关键帧,浏览器自动插入过渡帧形成动画,如示例中背景颜色变化的循环。过渡动画则在属性改变时(如鼠标悬停)触发,展示平滑转换,如 div 元素尺寸变化。通过调整帧时间、顺序和样式,可实现更复杂的动画,增强网站交互体验。
31 4
|
5天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
5天前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
|
5天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
http://www.vxiaotou.com