css控制文字大小及颜色、字体

字体:font-style:italic;斜体

        font-weight:bold;加粗

        font-size:30px;大小

        line-height:30px;行高

        font-family:“SimHei”;字体

以上必须按顺序来,有些可以不写;

分开写和一行控制:

注: font-size与 line-height之间的像素要用斜线区分开;

 

<style>
#test1{
color:red;
font-style:italic;

font-weight:bold;

font-size:30px;

line-height:30px;

font-family:"SimHei";

}
#test2{
font:italic bold 30px/30px "SimHei";

}
</style>
</head>
<body>
<p id="test1">人生总有许多偶然和巧合,两条平行线,也可能会有交汇的一天。
人生又有许多意外和错过,握在手里的风筝,也会突然断了线……。 </p>
<p id="test2">生命中,不断地有人离开或进入。于是,看见的,看不见的;记住的,遗忘了。 生命中,不断地有得到和失落。于是,看不见的,看见了;遗忘的,记住了。 然而,看不见的,是不是就等于不存在?记住的,是不是永远不会消失?</p>
</body>

设置字体时首先设置需要的,如果该机器没有这种字体,会选择后面的,比如先是NewTime,没有的话就是新宋体,再没有就是宋体,如果还是没有则告诉它自己选择;优先选择,字体大类放在最后面。

<style>
#test1{
 color:red;
font-family:‘微软不雅黑‘,‘微软雅黑‘,‘黑体‘,sans-serif;
}
#test2{
 color:green;
 font-family:‘NewTime‘,‘新宋体‘,‘宋体‘,sans-serif;
}
</style>
</head>
<body>
<p id="test1">人生总有许多偶然和巧合,两条平行线,也可能会有交汇的一天。
人生又有许多意外和错过,握在手里的风筝,也会突然断了线……。 </p>
<p id="test2">生命中,不断地有人离开或进入。于是,看见的,看不见的;记住的,遗忘了。 生命中,不断地有得到和失落。于是,看不见的,看见了;遗忘的,记住了。 然而,看不见的,是不是就等于不存在?记住的,是不是永远不会消失?</p>
</body>

  

时间: 2024-10-13 12:09:16

css控制文字大小及颜色、字体的相关文章

CSS font-size字体文字大小样式属性-字体大小样式篇

一.设置字体大小CSS单词与语法 - TOP基本语法结构: .divcss5{font-size:12px;}设置了文字大小为12px像素Font-size+字体大小数值+单位 单词:font-size语法:font-size : absolute-size | relative-size | length取值:xx-small | x-small | small | medium | large | x-large | xx-largexx-small:最小x-small:较小small:小m

HTML学习笔记7——CSS控制文字的一些基本属性的使用

CSS控制文字的一些基本属性的使用: 一.CSS控制段落: 段落缩进:text-indent:20px; 文字方向:text-align:center; 文字修饰:text-decoration:underline:下划线 overline;上划线 Line-though;删除线 字与字之间的距离:letter-spacing:10px; ……(还有很多属性,可通过查找手册了解相关知识) 二.CSS控制字的大小字体及颜色 字体的颜色:color:blue:蓝色 斜体效果:font-style:i

【Android】安装插件 + 改变文字大小、颜色 + 隐藏代码区块的直线

安装插件 可以在搜寻框里面填入关键字搜寻,具体的插件,网上有很多介绍了 改变文字大小.颜色 隐藏代码区块的直线 原文地址:https://www.cnblogs.com/PureHeart/p/11634364.html

选中按钮改变文字大小和颜色

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; min-height: 25.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #cf8724 }

用CSS控制图片大小显示的方法

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示. 对于标准浏览器(如Chrome/Firefox),或者IE7/8浏览器,直接使用max-width,max-height:或者min-width,min-height的CSS属性即可.如: 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高

纯css控制文字2行显示多余部分隐藏

在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 3行代码搞定,这个很常见.但是要是2行文字显示多余隐藏呢,我之前在网上搜到的很多说什么用js去控制,用php控制...等等诸如此类的复杂方法,为什么不能同样用css去控制呢?后来找到答案了,用css同样可以去控制2行文字显示多余隐藏. text-overflow

css 控制文字超出部分显示省略号

该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图: 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢. 接下来重点说一说多行文本溢出显示

iOS 设置Label中特定的文字大小和颜色

直接上代码: _price = @"27"; NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:_cookPrice.text]; //设置颜色 [attributedString addAttribute:NSForegroundColorAttributeName value:[MCUtils colorWithRGBString:@&quo

css控制文字溢出用点(省略号)代替

兼容火狐.Opera.chrome的文字溢出添加省略号的功能,当文字或字符超出外层Div的时候,自动隐藏并添加省略号,对前端开发来说,这是个相当不错的CSS特效吧. 示例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="