前端怎么设置字体颜色

前端怎么设置字体颜色,第1张

1、首先打开hbuilder软件,新建一个html文件,里面写入3个p标签,再在style标签中设置p标签的基本样式,包括间距,字体大小等属性:

2、然后在style标签中用3种方法设置文字颜色,第一个p标签用16进制设置颜色,每两个数字为一组,最大数字为ff,它们代表红绿蓝三种颜色;第二种方法是rgba,也是红绿蓝三种颜色,只不过值变成了数字,最大为255表示颜色最鲜艳,比如把第一个设置为255就是最红:

3、第三个标签使用HSL色彩,其中H代表色调,值最大为360,0和360也是红色,其他颜色在中间;s是饱和度用百分比来表示,0%表示最暗,100%表示最亮;L表示亮度取值也是百分比;rgba和hlsa中a都表示透明度,取值在00到10之间,00是完全透明,10为完全不透明。

<style type="text/css">
title{ color: #00a8ff; }
</style>
放在head中
<div class="title">这里是字体颜色示例</div>
放在body中

一个外部的样式表可以通过HTML的LINK元素连接到HTML文档中:
<LINK REL=StyleSheet HREF="stylecss" TYPE="text/css" MEDIA=screen<
<LINK REL=StyleSheet HREF="color-8bcss" TYPE="text/css" title="8-bit Color Style" MEDIA="screen, print"<
<LINK REL="Alternate StyleSheet" HREF="color-24bcss" TYPE="text/css" title="24-bit Color Style" MEDIA="screen, print"<
<LINK REL=StyleSheet HREF="auralcss" TYPE="text/css" MEDIA=aural<
<LINK<标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型--text/css是一个层叠样式表--允许浏览器忽略它们不支持的样式表类型。为CSS文件配置服务器而将text/css当作Content-type内容发送出去也是一个好注意。
外部样式表不能含有任何像<HEAD<或<STYLE<这样的HTML的标记。样式表仅仅由样式规则或声明组成。一个单独由
P { margin: 2em }
组成的文件就可以用作外部样式表了。
<LINK<标记也有一个可选的MEDIA属性,用于指定样式表被接受的介质或媒体。允许的值有
screen(缺省值),提交到计算机屏幕;
print, 输出到打印机;
projection,提交到投影机;
aural,扬声器;
braille,提交到凸字触觉感知设备;
tty,电传打字机 (使用固定的字体);
tv,电视机;
all,所有输出设备。
多样的媒体通过用逗号隔开的列表或值all指定。
Netscape Navigator 4x错误地忽略除了screen值外的任何使用MEDIA值声明的连接或嵌入样式表。例如,MEDIA="screen,projection"会令到样式表被Navigator 4x忽略,尽管展示的设备是计算机的屏幕。Navigator 4x也忽略使用MEDIA=all声明的样式表。
REL属性用于定义连接的文件和HTML文档之间的关系。REL=StyleSheet指定一个固定或首选的样式而REL="Alternate StyleSheet"定义一个交互样式。固定样式在样式表激活时总被应用。缺少的TITLE属性,就像例子中的第一个<LINK<标记,定义一个固定样式。
一个首选样式会自动被应用,就像例子中的第二个<LINK<标记。REL=StyleSheet和一个TITLE属性的组合指定一个首选的样式。网页制作者不能指定多于一个的首选样式。
交互样式通过REL="Alternate StyleSheet"指出。例子中的第三个<LINK<标记定义一个交互样式,用户可以选择用来代替首选样式表。
注意现在的浏览器一般都缺乏选择交互样式的能力。
单一的样式也可以通过多个样式表给出
<LINK REL=StyleSheet HREF="basicscss" title="Contemporary"<
<LINK REL=StyleSheet HREF="tablescss" title="Contemporary"<
<LINK REL=StyleSheet HREF="formscss" title="Contemporary"<
在这个例子中,三个样式表组合成一个"Contemporary"样式,作为一个首选样式表被应用。要组合多个样式表成一个单一样式,必须在每个样式表中使用相同TITLE。
当样式被应用到很多的网页时,一个外部样式表是理想的。网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件。同样的,大多数浏览器会保存外部样式表在缓冲区,从而如果样式表在缓冲区就避免了在展示网页时的延迟。
Microsoft Internet Explorer3 for Windows 95/NT4并不支持来自连接的样式表中的BODY背景图象或颜色。如果考虑到这个错误,网页制作者不妨提供另外的包括一个背景图象或颜色的结构,例如嵌入或内联样式,或使用BODY元素的BACKGROUND属性。

在HTML中font标签即可对字体内容设置颜色。

1、font语法:

<font color="#FF0000">我是红色字体</font>

首先font是一对常规标签,将字体文本内容放入标签内,font标签内设置color颜色+对应颜色值即可设置font标签对象内字体颜色。

2、html font设置字体颜色实例完整代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>font字体颜色在线实例 DIVCSS5</title> 
</head> 
<body> 
<font color="#FF0000">我是红色字体</font> 
<table width="300" border="1"> 
<tr> 
<td><font color="#0000FF">你好</font></td> 
<td>DIVCSS5</td> 
</tr> 
</table> 
</body> 
</html>

字体颜色在网页设计中是最常见的功能之一,复杂的页面每个页面都会有多种字体颜色。html设置字体颜色的方式,有如下几种。

1、首先在桌面新建一个文件夹,然后新建两个text文件;分别将text文件重命名为indexhtml和csscss。

2、用记事本打开indexhtml文件,输入以下代码。

3、用浏览器打开浏览效果。

4、编辑indexhtml,在<p>标签内输入以下代码;<font color="#008252">字体颜色的不同设置方法</font>。

5、浏览器浏览效果,这样就完成了。

使用外部CSS,可以将CSS代码单独放到CSS文件里使用html link引入CSS(html引人css),也可以在html使用<style>标签,建立CSS。也可以在html标签内使用style属性设置css颜色。

CSS工作原理

CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

样式规则是可应用于网页中元素,如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中,外部样式单保存在独立的文档中,网页通过一个特殊标签链接外部样式单。

名称CSS中的"层叠(cascading)"表示样式单规则应用于HTML文档元素的方式。具体地说,CSS样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13327344.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-15
下一篇 2023-07-15

发表评论

登录后才能评论

评论列表(0条)

保存