css设置字体颜色的代码是什么

如果给你一些文本文字,要让它变得美,你将会采用什么方法?用过PPT的人都知道,可以调整颜色,可以设定字体,可以进行对齐、缩进等操作。这些在PPT中常用的方法,在CSS中也是很容易实现的,代码也简单。

10.1 文本颜色

在CSS中,设置文本颜色,用color属性,值可为16进制、一个RGB值或颜色名称。十六进制用#号开始,后接#RGB,比如 #ff0000;RGB值为rgb(255,0,51)形式;颜色名称名称直接就是英语单词,如red。

样色表ys2.css文件内容

body {
       color:#00ff00;
}
h3 {
 color:CadetBlue;

}
p {
    color:rgb(0,0,255);
}

HTML文件内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字体颜色</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<h3>年底了,还能找工作不?</h3>
<p>
    昨晚七点多收到通知,说老板抽查了几次监控,发现一些人上班浑水摸鱼玩手机,
要召开紧急视频会议,<br/>
    全体员工必须参会,视频里老板很生气,正火冒三丈的批评那些财务人员上班玩手机,
说再不多提升自己,<br/>
    以后早晚被电脑和机器代替, 然后我忘记关麦了,说了句:机器能替你吃牢饭?<br/>
    唉,也不知道年底了工作好不好找。</p>
</body>
</html>

输出结果

css设置字体颜色的代码是什么

10.2 文本字体

CSS字体属性定义字体,加粗,大小,文字样式。在用软件时,你是不是见过宋体什么的,没错,那个就是字体了。在CSS中,可以使用Font Family:”宋体”的方式指定字体;样式,就是加粗、倾斜那个,用font-style指定;大小则用font-size。

/* ys2.css里的样式表内容 */
.f {
    font-family: "宋体";
    /* 加粗 */
    font-style: oblique;
    font-size: 40px;
}

<!--html文件内容-->
<div class="f">
    牛的程序员,羊一样的女孩
</div>

输出结果

css设置字体颜色的代码是什么

10.3 对齐方式

文本在元素内水平对齐,可以使用 text-align: 值的方式,center居中对齐,left居左对齐,right居右对齐;垂直居中对齐,可用vertical-align和line-height结合的方式进行指定,这个平时会经常用到,记下来。

/*css文件里的内容*/

/*水平居中*/
.div-width {
    width: 800px;
}

.txt-left {
    text-align: left;
    color: aquamarine;
}

.txt-center {
    text-align: center;
    color: darkcyan;
}

.txt-right {
    text-align: right;
    color: darkgreen;
}

/*垂直居中*/
.txt-vertical {
    border: 2px solid green;
    height: 100px;
    line-height: 100px;
    vertical-align: middle;
    text-align: center;
}

<!-- HTML文件里的内容 -->
<div class="div-width">
    <!--水平居中-->
    <p class="txt-left">向左看齐</p>
    <p class="txt-center">居中对齐</p>
    <p class="txt-right">向右看齐</p>
    <!--垂直居中-->
    <div class="txt-vertical">垂直居中方法1</div>
    <div>垂直居中方法2</div>
</div>

输出结果

css设置字体颜色的代码是什么

如果要对标签进行水平居中的话,可以使用 margin: auto;用position: absolute; 属性来对齐元素的话,有些浏览器不支持,所以不推荐。

/* 在样式表文件中 */
.div-center {
    margin: auto;
    width: 50%;
    border: 1px solid green;
    height: 300px;
    text-align: center;
    vertical-align: center;
    line-height: 300px;
}
<!--在html文件中-->
<div class="div-center">我站在,人海中间:div在Web居中,文字在div中居中</div>

输出结果

css设置字体颜色的代码是什么

10.4 文本之距

为了让阅读舒服,在进行文本排版之时,会考虑字与字之间的间距,有行与行之间的距离,还有段落的缩进等。在CSS中,字符间距可用letter-spacing:值;行间距依然用line-height:值;段落字符缩进,用text-indent即可。温馨提醒:text-indent只对div和p标签有效。

/* 在样式表文件中 */
.text-spacing {
    width: 900px;
    border: 1px solid green;
    letter-spacing: 50px;
}

p.row {
    line-height: 3.0em;
}

p.i {
    /*em是相对单位,2em即现在一个字大小的两倍*/
    text-indent: 2em;
}
<!--在html文件中-->
<div class="text-spacing">
    他说风雨中,这点痛算什么
</div>
<p class="row">
    秋季降温快的特点,使得秋收、秋耕、秋种的“三秋”大忙显得格外紧张。<br/>
    秋分棉花吐絮,烟叶也由绿变黄,正是收获的大好时机。华北地区已开始播种冬麦,<br/>
    长江流域及南部广大地区正忙着晚稻的收割,抢晴耕翻土地,准备油菜播种。
</p>
<p class="i">
    当我以为我无法继续走下去时,我强迫自己要继续前进。<br/>
    我的成功是基于我的坚持,并非运气。<br/>
    努力,是为了跳出你厌恶的圈子。<br/>
    读书,是为了远离渣货垃圾人。<br/>
    健身,是为了让讨厌的人心平气和...
</p>

输出结果

css设置字体颜色的代码是什么

好了,有关CSS文本或元素对齐的内容,老陈讲完了,如果觉得对你有所帮助,希望老铁能转发点赞,让更多的人看到这篇文章。你的转发和点赞,就是对老陈继续创作和分享最大的鼓励。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至2705686032@qq.com 举报,一经查实,本站将立刻删除。原文转载: 原文出处:

(0)
尊云-小张的头像尊云-小张
上一篇 2024 年 5 月 4 日 09:38
下一篇 2024 年 5 月 4 日 09:44

相关推荐

  • 代理服务器免费国外软件有哪些(免费连接国外网络软件)

    在全球数字化时代,访问海外网站、执行跨境营销或进行数据研究已成为许多企业和个人的必备需求。而要实现这些目标,一个稳定、高速且靠谱的海外代理IP是不可或缺的。那么海外IP代理有什么推荐的呢? 海外IP代理推荐 在众多供应商中,Proxy302以其卓越的性能、优质的服务和超高性价比脱颖而出,成为购买海外住宅IP的首选之一。 为什么选择Proxy302? Prox…

    2024 年 5 月 12 日
    300
  • 美国ip怎么弄

    在如今数字化的世界中,网络已经成为人们生活的重要组成部分。不论是工作、学习还是娱乐,我们都需要一个稳定、快速的网络连接。而对于一些特定的海外应用场景,例如网站测试、数据采集、海外广告投放等,拥有稳定的国外IP地址显得尤为重要。本篇文章将以美国住宅ip为例,向大家介绍如何找到较为稳定的美国住宅ip。 一、美国住宅ip的定义和特点 首先,了解住宅IP的特点是找到…

    2024 年 4 月 28 日
    000
  • cloudflare国内加速节点

    cloudflare是一款非常不错的CDN,不仅免费不限量,抗打能力也是CDN中数一数二的存在。因为在国内的节点速度慢的问题也是被很多站长诟病,戏称为减速CDN。cloudflare虽然确实不快,但是说他慢,其实也不尽然。因为cloudflare的节点在国内延迟大多为200-400ms,节点的延迟再加上网站本身加载数据的时间这么累计自然网站速度就慢下来了,其…

    2024 年 5 月 3 日
    5500
  • 如何查看tensorflow版本(anaconda版本如何选择)

    前言 现在机器学习大火,但是tensorflow的安装特别崩溃,看了特别多教程,觉得一点也不好用,今天给大家带来简单易懂的操作。 安装步骤 你可能出现了以下问题(都是我遇到过的): 1.自己使用pip或者使用pycharm直接安装tensorflow可能会问题,推荐使用anaconda,解决方案就在下方。 2.我使用的python是3.7版本,使用anaco…

    2024 年 5 月 11 日
    000
  • 路由器网站打不开为什么

    wifi满格信号却连不上网怎么回事? wifi有信号网页却打不开怎么回事?有人以为有wifi信号就一定有网,事实上并不是这样的。路由器一插上电就有wifi信号,路由器必须跟网络连接才能上网。如果网络没有连接或者光猫亮红灯网络出现了问题,或者路由器出现了故障,或者同一个路由器上联网的人太多都是上不了网的。 还有一种情况就是别人的局域网即使连接上了也上不了。什么…

    2024 年 4 月 24 日
    000

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

400-900-3935

在线咨询: QQ交谈

邮件:cong@zun.com

工作时间:365天无休服务 24小时在线

添加微信