-
2021-08-04 07:44:54
样式一：
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #000000;
background: #f2e7ca url(images/templatemo_body.jpg) top center no-repeat;
}
样式二：
body {
background:#2f373a;
font-family:Arial,Helvetica,sans-serif;font-size:100%;
line-height:1em;color:#4e4e4e;
min-width:920px;
border-top:10px solid #0c0e0e
}
样式三：
body {
font-family:Arial,Helvetica,sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal
}
样式四：
body
{
margin:0px;
padding:0px;
background-color:#E7EAEB;
font-family:"微软雅黑","黑体","宋体";
font-size:12px;
height:36px;
}
样式五：
body
{
font: .8em Arial, Tahoma, Verdana;
background: #fff url(../images/bg.gif) repeat-x;
color: #777;
}
样式六：
body
{
width:auto; margin-top:12px;
float:right; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:11px;
color:#999999;
line-height:25px;
letter-spacing:1px
}
样式七：
body
{
width:auto;
margin-left:1px;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#5f5f5f;
line-height:35px;
text-transform:uppercase
}
样式八：
body {
background: #e1e5e8;
font-family: "Georgia", Tahoma, Sans-Serif;
font-size: 12px;line-height: 18px;
color: #888;
}
样式九：
body
{
width:130px; height:20px;
background:url(images/servicesbg.gif) 0 0 repeat-x #68EF00;
color:#317400;
font:18px/14px Georgia, "Times New Roman", Times, serif;
margin:34px 0 0 37px;
}
样式十：
body
{
display:block;
width:94px;
height:20px;
background: url(images/serviceslink1bg.gif) 0 72% no-repeat #6DFD00;
color:#01699F;
font:13px/20px Georgia, "Times New Roman", Times, serif; text-decoration:none;
}
样式十一：
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;color: #33322e;background: #39443D url(images/templatemo_body_bg.jpg) repeat-x;
/* background: #47443c url(images/templatemo_body_bg_2.jpg) repeat-x; */
}
样式十二：
body {margin: 0;padding: 0;line-height: 1.5em;font-family: Tahoma, Geneva, sans-serif;font-size: 12px;color: #6f6f6f;
background: #2ac5c0 url(images/templatemo_body_top.jpg) repeat-x;
}
样式十三：
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Verdana, Geneva, sans-serif;font-size: 11px;
color: #ffffff;background: #005b7f;
}
样式十四：
body {
margin: 0;
padding: 0;
line-height: 1.7em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;color: #333333;
background: #000000 url(images/templatemo_main_bg.jpg) repeat-y center;
}
样式十五：
body {
margin: 0;
padding: 0;
line-height: 1.7em;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;color: #707b84;
background: #3e464d;
}
样式十六：
body {
margin: 0;
padding: 0;
line-height: 1.7em;
letter-spacing: 1px;
font-family: Georgia, "Times New Roman", Times, serif;font-size: 12px;
color: #333;
background: #e1d1d6 url(images/templatemo_body.png) repeat-x top;
}
样式十七：
body {
margin: 0;
padding: 0;
line-height: 1.7em;
letter-spacing: 1px;
font-family: Georgia, "Times New Roman", Times, serif;font-size: 12px;
color: #333;
background: #e1d1d6 url(images/templatemo_body.png) repeat-x top;
}
样式十八：
body
{
background:url(images/bg.gif) repeat #000000;
padding:0; font-family:arial, sans-serif; font-size:12px;
margin:0px auto auto auto;
color:#36322b;
}
样式十九：
body
{
margin:0px;
padding:0px;
background:url(images/mainbg.gif) 0 0 repeat-x #F6F4E4;
color:#6B6854;
font:14px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
样式二十：
body
{
font-family:Georgia;
font-family:Arial;
}
更多相关内容 -
Css样式--文本样式详解
2020-09-25 05:59:49本样式包括所谓的文本缩进：text-indent、水平对齐：text-align:center;left;right、字间隔和字母间距、字符转换：text-transform等等，在本文将为大家详细介绍下，感兴趣的朋友可以参考下 -
富文本样式库wysiwyg-css.zip
2019-07-17 05:09:56wysiwyg-css用于为富文本/Markdown 编辑器生成的内容提供主题样式。特点可读性：间距和颜色在视觉上平衡简单：只需一个单一的类来设置所有元素的样式可扩展性：您可以根据变量自定义输出 标签：wysiwyg -
通过纯CSS样式实现DIV元素中多行文本超长自动省略号
2020-12-13 13:52:24在CSS中，我们可以通过下面的样式实现DIV元素中文本超长后自动截断并以省略号结尾： 复制代码代码如下: overflow: hidden; word-break: normal; text-overflow: ellipsis; text-overflow: ellipsis是实现文本截断... -
[ CSS-CSS3 ] 史上最全CSS样式一览表
2021-01-08 12:32:12CSS样式一览表CSS样式CSS添加方法CSS选择器CSS样式(I) 文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和... -
CSS常用文本样式总结
2020-12-11 12:20:15CSS文本样式是相对于内容进行的样式修饰。由于在层叠关系中，内容要高于背景。所以文本样式相对而言更加重要。有些人对文本和字体样式之间的不同不太了解，简单地讲，文本是内容，而字体则用于显示这个内容。本文将... -
七款好看文字样式纯css
2021-08-04 04:17:30.vintage1{background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;text-shadow: 5px -5px....展开全文
.vintage1{
background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;
text-shadow: 5px -5px black, 4px -4px white;
font-weight: bold;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text }
.vintage2{
color: transparent;
-webkit-text-stroke: 1px red;
letter-spacing: 0.04em;}
.vintage3 {
color: transparent;
background-color : blue;
text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
-webkit-background-clip : text;
}
.vintage4{
color: gold;
letter-spacing: 0;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 }
.vintage5{
font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink
}
.text-reflect-base{
color: palegreen;
-webkit-box-reflect:below 10px;
}
.text{
width: 350px;
height: 200px;
position: absolute;
left: 20%;
margin-left: -150px;
background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
-webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
-webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
-webkit-background-size: 200% 100%;
-webkit-animation: masked-animation 4s linear infinite;
font-size: 35px;
}
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
-
css文字控制与css文本样式示例和属性
2020-09-25 04:00:14主要介绍了css文字控制与css文本样式示例和属性,需要的朋友可以参考下 -
CSS--文本溢出完美样式
2018-02-25 11:21:29CSS--文本溢出完美样式，CSS--文本溢出完美样式，CSS--文本溢出完美样式 -
Markdown.css样式简介
2020-09-25 00:29:11主要介绍了Markdown.css样式,用来实现显示强大的Markdown样式的文本,需要的朋友可以参考下 -
Dreamweaver使用CSS样式表设置网页文本格式
2020-09-24 17:51:56本文章介绍如何在 Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式。您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本，从而能更加灵活自如地控制页面的外观。 了解 CSS 层叠样式表 (CSS... -
文本框 css 样式
2014-07-29 09:58:12文本框 css 样式 鼠标移上去文本框变成浅绿色 文本框提示样式，鼠标点击获得焦点时提示内容消失 input文本框样式 只有下划线的文本框： 软件序列号式的输入框： 软件序列号式的输入框(完整版)： 输入框景背景... -
利用css的样式对文本进行隐藏和显示等操作
2020-09-25 02:58:56主要介绍了如何利用css的样式对文本进行隐藏和显示等操作，需要的朋友可以参考下 -
浅谈CSS样式之背景、文本
2020-09-24 21:43:04下面小编就为大家带来一篇浅谈CSS样式之背景、文本。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧 -
css自定义占位文本(placeholder)的样式的方法示例
2020-12-10 10:37:18当我们对input元素或者textarea元素写CSS样式的时候, 如果需要自定义占位文本(也就是placeholder)的样式的时候怎么办? CSS有一个伪元素选择器::placeholder可以解决我们的问题. 用法 HTML <input placeholder=... -
android TextView 支持CSS样式
2017-05-11 18:51:03android TextView 支持CSS样式 -
CSS 鼠标样式和手指样式整理
2020-12-10 11:20:33CSS鼠标样式语法如下： 任意标签中插入 style="cursor:*" 例 子：文本或其它页面元素</span> 文本或其它页面元素</a> 注意把 * 换成如下15个效果的一种： 下面是对这15种效果的解释。移动鼠标到解释上面，看看你的... -
css文本显示省略号样式文件
2019-10-11 09:52:51css文本显示省略号 如果不适应sass 需要把@extend .text-webkit-box替换为.text-webkit-box里面的内容 -
在Dreamweaver中利用CSS样式表设置网页
2020-09-24 17:56:11本文介绍如何在Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式。您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本，从而能更加灵活自如地控制页面的外观。 了解 CSS 层叠样式表 (CSS) ... -
几种漂亮的CSS3提示框样式.rar
2019-07-10 11:23:30收集几种漂亮的CSS3提示框样式，带图标的提示框，可直接用于移动开发中。这些提示框的特点 ： 1、圆角风格； 2、提示框右侧都带有图标，视觉效果好。 3、可无损移植到智能移动设备、手机上运行。 -
纯css3精美的文本块排版效果
2019-12-13 08:57:52这是一款使用纯css3制作的图文混排的文本块排版效果。该css3排版效果中共有6种不同的效果。图文混排搭配得十分精美。 -
CSS设置文本样式
2018-03-27 21:08:55CSS设置文本样式 这里我就列举几个常用的样式，仅供参考 1，设置文本字体： 用font-family属性 Code： 注：这里都用到类别选择器 2，设置文字倾斜效果： p{ font-style: italic; } 3，设置文字加粗...展开全文CSS设置文本样式
这里我就列举几个常用的样式，仅供参考
1，设置文本字体：
用font-family属性
Code：
注：这里都用到类别选择器2，设置文字倾斜效果：
p{
font-style: italic;
}3，设置文字加粗效果：
p{
font-weight: bold;
}4，设置英文字母大小写转换：
p{
text-transform: capitalize;
}5，设置文字的大小：
p{
font-size: 36px;
}6，设置文字的装饰效果：
p{
text-decoration: underline;
}7，设置段落首行缩进：
p{
text-indent: 2em;
}8，设置字间距离：
p{
word-spacing: 20px;
letter-spacing: 2px;
}9，设置文字的行高：
p{
line-height: 1.5;
}10，设置段落之间的距离：
p{
border: 1px red solid; /* 设置标签 /
margin: 1px; / 设置段落边距 /
padding: 10px; / 段落距离 */
}11，设置文字的水平位置（这个比较复杂，就举个详细例子。没有贴详细的代码，大家可以自己补充试一下）
样式部分：
body部分：
12，设置文字和背景颜色
p{
color: blue;
background-color: red;
}
-
CSS的文本样式
2020-11-01 11:51:47CSS的文本样式文本样式设置文本颜色设置元素水平对齐方式设置首行文本的缩进设置文本的行高设置文本的装饰 文本样式 属性名 含义 举例 color 设置文本颜色 color:#00C text-align 设置元素水平对齐方式 ...展开全文文本样式
属性名 含义 举例 color 设置文本颜色 color:#00C text-align 设置元素水平对齐方式 text-align:right text-indent 设置首行文本的缩进 text-indent:20px line-height 设置文本的行高 line-height:25px text-decoration 设置文本的装饰 text-decoration:underline 设置文本颜色
取值方法：
1.颜色名字
2.十六进制记法
3.R G B 三原色
4.RGBA 三原色，A是控制透明度 Alpha 0 -1 , 1完全不透明，0 完全透明<p style="color: red;">使用颜色名称</p> <p style="color: #006699;">使用十六进制</p> <p style="color: rgb(0,0,0);">使用十六进制</p> <p style="color: rgba(0,0,0,1);">rgba透明度为1</p> <p style="color: rgba(0,0,0,0);">rgba透明度为0</p>样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p style="color: red;">使用颜色名称</p> <p style="color: #006699;">使用十六进制</p> <p style="color: rgb(0,0,0);">使用十六进制</p> <p style="color: rgba(0,0,0,1);">rgba透明度为1</p> <p style="color: rgba(0,0,0,0);">rgba透明度为0</p> </body> </html>效果截图：
最后一行是完全透明看不到↓
这样就可以看到了↓
设置元素水平对齐方式
文本的对齐方式 left right center
<p style="text-align: left;">文字对齐方向 left</p> <p style="text-align: right;">文字对齐方向 right</p> <p style="text-align: center;">文字对齐方向 center</p>样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p style="text-align: left;">文字对齐方向 left</p> <p style="text-align: right;">文字对齐方向 right</p> <p style="text-align: center;">文字对齐方向 center</p> </body> </html>效果截图：
设置首行文本的缩进
<p style="text-indent: 50px;">这里写一段话</p>样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p >中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。 旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP： CSDN APP、CSDN学院APP； 新媒体矩阵微信公众号：CSDN资讯、程序人生、GitChat、CSDN学院、AI科技大本营、区块链大本营、CSDN云计算、GitChat精品课、人工智能头条、CSDN企业招聘； IT技术培训学习平台： CSDN学院；技术知识移动社区： GitChat；IT人力资源服务：科锐福克斯； 高校IT技术学习成长平台：高校俱乐部。</p> <p style="text-indent: 50px;">中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。 旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP： CSDN APP、CSDN学院APP； 新媒体矩阵微信公众号：CSDN资讯、程序人生、GitChat、CSDN学院、AI科技大本营、区块链大本营、CSDN云计算、GitChat精品课、人工智能头条、CSDN企业招聘； IT技术培训学习平台： CSDN学院；技术知识移动社区： GitChat；IT人力资源服务：科锐福克斯； 高校IT技术学习成长平台：高校俱乐部。</p> </body> </html>效果截图：
效果很明显吧，第一段话没有加缩进，第二段话加了缩进
设置文本的行高
行高,一般用于配合着垂直居中使用, 将文本的 line-height 和容器的高度一致
<div style="border: solid 1px red;height: 100px;line-height: 100px;"> CSDN </div>样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div style="border: solid 1px red;height: 100px;line-height: 100px;"> CSDN </div> </body> </html>效果截图：
设置文本的装饰
text-decoration-line属性值 说明 none 默认值定义的标准文本 underline 设置文本的下划线 overline 设置文本的上划线 line-through 设置文本的删除线 text-decoration-style属性值 说明 solid 默认值线条将显示为单线 double 线条将显示为双线 dotted 线条将显示为点状线 dashed 线条将显示为虚线 wavy 线条将显示为波浪线 text-decoration-color属性值 说明 选择颜色 线条显示相应的颜色 样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div style="text-decoration-line: none;">CSDN</div><br/> <div style="text-decoration-line: line-through;">CSDN</div><br/> <div style="text-decoration-line: underline;">CSDN</div><br/> <div style="text-decoration-line: overline;">CSDN</div><br/> <div style="text-decoration-line: underline;text-decoration-style: solid;">CSDN</div><br/> <div style="text-decoration-line: underline;text-decoration-style: dashed;">CSDN</div><br/> <div style="text-decoration-line: underline;text-decoration-style: dotted;">CSDN</div><br/> <div style="text-decoration-line: underline;text-decoration-style: wavy;">CSDN</div><br/> <div style="text-decoration-line: underline;text-decoration-style: unset;">CSDN</div><br/> <div style="text-decoration-line: underline;text-decoration-style: double;">CSDN</div><br/> <div style="text-decoration-line: underline;text-decoration-style: none;">CSDN</div><br/> <div style="text-decoration-line: underline;text-decoration-style: solid;text-decoration-color: red;">CSDN</div><br/> </body> </html>效果截图：
效果可以叠加使用，如上↑
写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]
加油！
共同努力！
Keafmd
-
Web网页设计之css_5. 用css设置文本样式
2020-10-03 19:29:31本篇博客我们主要来说一下用css设置文本样式，内容比较多，大家好好练习一下 一、设置文本的大小、颜色、字体 设置文本大小我们可以使用 font-size，设置颜色我们可以使用 color，字体我们可以使用 font-family ... -
ace的css样式内容。
2018-05-02 09:20:46ace的css样式内容，用于之前element的样式文件，直接替换即可。 -
CSS字体样式设置、CSS文本样式设置
2019-10-22 18:23:54一、CSS字体样式设置 1.字体样式设置 字体样式大致有如下几种特征： 字体类型（风格）、字体粗细、字体大小、字体系列 (1)字体类型（风格） font-style 用于设置字体风格，可设置以下值： ① normal：普通字体 ② ... -
CSS基础1-基础选择器+字体文本相关样式
2021-12-05 17:04:26CSS基础-基础选择器+字体文本相关样式 -
css文本输入框的样式
2019-05-20 15:17:09.form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #555555; vertical-align: middle; background-color: #ffffff...bo...
