CSS 设置文本样式和设置图像效果详解

最新推荐文章于 2021-08-22 10:23:57 发布

原创最新推荐文章于 2021-08-22 10:23:57 发布 · 629 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#CSS 设置文本样式和设置图像效果详解

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍CSS中如何设置文本的字体、倾斜、加粗、大小写转换、大小、装饰效果、缩进、间距、行高、间距、对齐、颜色及垂直对齐，同时还涵盖图片的边框、大小、缩放、混排与对齐方式，为前端开发者提供全面的样式设置指南。

第一节：设置文字的字体
第二节：设置文字的倾斜效果
第三节：设置文字的加粗效果
第四节：设置英文字母大小写转换
第五节：设置文字的大小
第六节：设置文字的装饰效果
第七节：设置段落首行缩进
第八节：设置字词间距
第九节：设置文字的行高
第十节：设置段落之间的距离
第十一节：设置文本的水平位置
第十二节：设置文字和背景的颜色
第十三节：设置段落的垂直对齐方式

第一节：设置文字的字体

效果图：

第二节：设置文字的倾斜效果

p{font-style:normal;//正常
}

font-style: italic;//倾斜的文字

}

第三节：设置文字的加粗效果

p{
font-weight: bold;
}

第四节：设置英文字母大小写转换

<p>study Hard And Make Progress Every Day.</p>
<p class="p1">study Hard And Make Progress Every Day.</p>
<p class="p2">study Hard And Make Progress Every Day.</p>
<p class="p3">study Hard And Make Progress Every Day.</p>

效果图：

第五节：设置文字的大小

p{
font-size: 36px;
}

第六节：设置文字的装饰效果

   .p1{
       text-decoration: none;
   }

   .p2{
       text-decoration: underline;
   }

   .p3{
       text-decoration: line-through;
   }

   .p4{
       text-decoration: overline;
   }

<p class="p1">无装饰</p>
<p class="p2">下划线</p>
<p class="p3">删除线原价990</p>
<p class="p4">上划线</p>

第七节：设置段落首行缩进2字符

p{
text-indent: 2em;
}

第八节：设置字词间距

p{
       word-spacing: 10px;
       letter-spacing: 2px;
   }

<p>Study hard and make progress every day.</p>
<p>好好学习，天天向上。</p>

第九节：设置文字的行高（）

一般设置1.5倍（行的高度是文字高度的1.5倍），浏览器一般默认行高1.2倍

p{
line-height: 1.5;
}

第十节：设置段落之间的距离

<p>Study hard and make progress every day.</p>
<p>好好学习，天天向上。</p>

注释掉 margin: 1px;
padding: 10px;

默认段落之间有间距

加上padding和margin

第十一节：设置文本的水平位置

<div class="box1">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really</div>
<div class="box2">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really</div>

效果图：

第十二节：设置文字和背景的颜色

p{
       color: blue;//文字颜色
       background-color: red;//文字背景的颜色
   }

第十三节：设置段落的垂直对齐方式

<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>

效果图：

设置图像效果

第一节：设置图片边框
第二节：设置图片大小及缩放
第三节：图文混排
第四节：设置图片与文字的对齐方式

第一节：设置图片边框

其中一个的效果：

第二节：设置图片大小及缩放

<div style="border: 1px red solid;">
   <h1>图片大小</h1>
   <img src="../java.jpg" style="width: 160px;height: 180px;"/>
</div>
<div style="border: 1px red solid;">
   <h1>图片缩放</h1>//宽度是父div宽度的百分之二十，高度也自动缩放，设置高度的话高度就不自动缩放了，图片就会变形
   <img src="../java.jpg" style="width: 20%;"/>
</div>

第三节：图文混排

<img src="../java.jpg">
<p>Java之父——詹姆斯·高斯林出生于加拿大，是一位计算机编程天才。在卡内基·梅隆大学攻读计算机博士学位时，他编写了多处理器版本的Unix操作系统。</p>
<p>1991年，在Sun公司工作期间，高斯林和一群技术人员创建了一个名为Oak的项目，旨在开发运行于虚拟机的编程语言，同时允许程序在电视机机顶盒等多平台上运行。后来，这项工作就演变为Java。随着互联网的普及，尤其是网景开发的网页浏览器的面世，Java成为全球最流行的开发语言。因此被人称作Java之父。</p>
<p>高斯林一直对oracle公司抱有不满。这位工程师在离开甲骨文时写到，“我所说的都关乎细节与诚实，但吐露真相只会带来更多的坏处。”并称，“在Sun与oracle的并购会议上，到处是有关Sun和谷歌专利的争吵。oracle律师的眼睛闪闪发光。”
他表示，在收购Sun的早期阶段，oracle就表示出要同谷歌展开法律交锋的意愿。他本人也曾批评Android市场上的碎片化现象太过严重，足以影响软件开发者的工作。</p>

第四节：设置图片与文字的对齐方式

p{
border: 1px red solid;
}

默认对齐方式：竖直对齐

<p>竖直对齐：<img src="../red.jpg" style="vertical-align: baseline;"/> 方式：<img src="../blue.jpg" style="vertical-align: baseline;"/>baseline</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: top;"/> 方式：<img src="../blue.jpg" style="vertical-align: top;"/>top</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: middle;"/> 方式：<img src="../blue.jpg" style="vertical-align: middle;"/>middle</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: bottom;"/> 方式：<img src="../blue.jpg" style="vertical-align: bottom;"/>bottom</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: text-bottom;"/> 方式：<img src="../blue.jpg" style="vertical-align: text-bottom;"/>text-bottom</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: text-top;"/> 方式：<img src="../blue.jpg" style="vertical-align: text-top;"/>text-top</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: sub;"/> 方式：<img src="../blue.jpg" style="vertical-align: sub;"/>sub</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: super;"/> 方式：<img src="../blue.jpg" style="vertical-align: super;"/>super</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: 20px;"/> 方式：<img src="../blue.jpg" style="vertical-align: 20px;"/>20px;</p>
<p>竖直对齐：<img src="../red.jpg" style="vertical-align: -20px;"/> 方式：<img src="../blue.jpg" style="vertical-align: -20px;"/>-20px;</p>

效果图：