CSS 字体风格

最新推荐文章于 2023-06-22 21:36:28 发布
最新推荐文章于 2023-06-22 21:36:28 发布
阅读量167 收藏 2
点赞数
原文链接：http://www.cnblogs.com/lszw/p/10577359.html
版权

粗体

font-weight 属性可以设置文本的粗细。

它有两个属性:

  • normal 普通粗细
  • bold 粗文本

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >font-weight</ title >
     < style >
         .a{
             font-weight:nomal;
         }
         .b{
             font-weight:bold;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >学编程，上利永贞网</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

斜体

font-style 属性可以设置文本倾斜。

它有3个属性:

  • normal 正常显示
  • italic 手写风格斜体
  • oblique 斜体

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >font-style</ title >
     < style >
         .a{
             font-style:nomal;
         }
         .b{
             font-style:italic;
         }
         .c{
             font-style:oblique;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
</ body >
</ html >

大写和小写

text-transform 属性可以设置文本的大写或小写。

它有3个属性:

  • upercase 使文本大写显示
  • lowercase 使文本小写显示
  • captialize 使每个单词的首字母大写

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-transform</ title >
     < style >
         .a{
             text-transform:uppercase;
         }
         .b{
             text-transform:lowercase;
         }
         .c{
             text-transform:capitalize;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
</ body >
</ html >

下划线和删除线

text-decoration 属性可以给文本设置线条。

它有5个属性:

  • none 删除文本的装饰线
  • underline 在文本底部增加一条实线
  • overline 在文本顶部增加一条实线
  • line-through 在文本中间穿一条线
  • blink 文本动态闪烁

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-decoration</ title >
     < style >
         .a{
             text-decoration:none;
         }
         .b{
             text-decoration:underline;
         }
         .c{
             text-decoration:overline;
         }
         .d{
             text-decoration:line-through;
         }
         .e{
             text-decoration:blink;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
< p class = "d" >study hard, improve every day</ p >
< p class = "e" >study hard, improve every day</ p >
</ body >
</ html >

行间距

line-height 属性可以设置行间距。

行间距会使文本垂直方向的空隙增大。

设置行间距单位使用em，不要使用px，这样的好处是可以根据用户选择的文本大小来设定。

行间距的初始值最好设定在1.4em~1.5em之间。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >line-height</ title >
     < style >
         .a{
             line-height:1.4em;
         }
         .b{
             line-height:2.4em;
         }      
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

字母间距

letter-spacing 属性可以设置字母间距。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >letter-spacing</ title >
     < style >
         .a{
             letter-spacing:2em;
         }
         .b{
             letter-spacing:1em;
         }      
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

单词间距

word-spacing 属性可以设置单词之间距离。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >word-spacing</ title >
     < style >
         .a{
             word-spacing:2em;
         }
         .b{
             word-spacing:1em;
         }      
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

对齐方式

text-align属性可以设置文本的对齐方式。

它有4个属性:

  • left 设置文本左对齐
  • right 设置文件右对齐
  • center 设置文本居中显示
  • justify 设置文本两端对齐

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-align</ title >
     < style >
         .a{
             text-align:left;
         }
         .b{
             text-align:right;
         }
         .c{
             text-align:center;
         }  
         .d{
             text-align:justify;
         }          
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
< p class = "d" >study hard, improve every day</ p >
</ body >
</ html >

垂直对齐

vertical-align 垂直对齐通常在文本做为内联元素时使用。

它的属性有：

  • baseline 使元素的基线与父元素的基线对齐
  • sub 使元素的基线与父元素的下标基线对齐
  • super 使元素的基线与父元素的上标基线对齐
  • text-top 使元素的顶部与父元素的字体顶部对齐
  • text-bottom 使元素的底部与父元素的字体底部对齐
  • middle 使元素的中部与父元素的基线加上父元素x-height的一半对齐
  • top 使元素及其后代元素的顶部与整行的顶部对齐
  • bottom 使元素及其后代元素的底部与整行的底部对齐

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-align</ title >
     < style >
         .a{
             vertical-align:text-top;
         }
         .b{
             vertical-align:middle;
         }
         .c{
             vertical-align:text-bottom;
         }      
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p >
< img class = "a" src = "https://www.liyongzhen.com/liyongzhen/docs/images/downloadmediazip.png" />
study hard, improve every day
</ p >
< p >
< img class = "b" src = "https://www.liyongzhen.com/liyongzhen/docs/images/downloadmediazip.png" />
study hard, improve every day
</ p >
< p >
< img class = "c" src = "https://www.liyongzhen.com/liyongzhen/docs/images/downloadmediazip.png" />
study hard, improve every day
</ p >
</ body >
</ html >

文本缩进

text-indent 属性可以设置首行文本缩进。

中文的首行缩进两个字可以设置为2em。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-indent</ title >
     < style >
         .a{
             text-indent:2em;
         }      
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >一日，许褚走马入东门，正迎许攸，攸唤褚曰：“汝等无我，安能出入此门乎？”褚怒曰：“吾等千生万死，身冒血战，夺得城池，汝安敢夸口！”攸骂曰：“汝等皆匹夫耳，何足道哉！”褚大怒，拔剑杀攸，提头来见曹操，说“许攸如此无礼，某杀之矣。”操曰：“子远与吾旧交，故相戏耳，何故杀之！”深责许褚，令厚葬许攸。乃令人遍访冀州贤士。冀民曰：“骑都尉崔琰，字季珪，清河东武城人也。数曾献计于袁绍，绍不从，因此托疾在家。”操即召琰为本州别驾从事，而谓曰：“昨按本州户籍，共计三十万众，可谓大州。”琰曰：“今天下分崩，九州幅裂，二袁兄弟相争，冀民暴骨原野，丞相不急存问风俗，救其涂炭，而先计校户籍，岂本州士女所望于明公哉？”操闻言，改容谢之，待为上宾。
</ p >
< p >study hard, improve every day</ p >
</ body >
</ html >

投影

text-shadow 属性可以设置文本的投影效果。

它有4个值，同时使用，也可以有选择地使用：

  • 第一个值 设置阴影左右延伸长度，负值向左，正值向右
  • 第二个值 设置阴影上下延伸长度，负值向上，正值向下
  • 第三个值 设置阴影的模糊程度
  • 第四个值 设置阴影的颜色

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-align</ title >
     < style >
         .a{
             text-shadow:1px 1px 0px #df3232;
         }
         .b{
             text-shadow:1px 1px 5px #df3232;
         }
         .c{
             text-shadow:2px 2px 9px #red;
         }  
         .d{
             text-shadow:1px 1px 10px blue;
         }          
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
< p class = "d" >study hard, improve every day</ p >
</ body >
</ html >

首字母

:first-letter 属性可以设置首字母

它是一个伪选择器。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >:first-letter</ title >
     < style >
         .b:first-letter{
             font-size:2em;
             font-weight:bold;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >学编程，上利永贞网</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

首行文本

:first-line属性可以设置首字母

它是也一个伪选择器。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >:first-line</ title >
     < style type = "text/css" >
         p.a:first-line {
             font-weight: bold;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p >学编程，上利永贞网</ p >
< p >study hard, improve every day</ p >   
</ body >
</ html >

链接样式

链接样式也是伪选择器，有两个：

:link 未访问过的链接样式

:visited 已经单击过的样式

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >链接样式</ title >
     < style type = "text/css" >
         a:link{
             color:#000;
         }
         a:visited{
             color:#982312;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< a href = "https://www.liyongzhen.com/" target = "_blank" >学编程，上利永贞网</ a >
< p >study hard, improve every day</ p >   
</ body >
</ html >

响应用户

响应用户有3个伪选择器：

:hover 鼠标悬停时的样式

:active 用户在元素上操作时生效

:focus 元素拥有焦点时生效

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >链接样式</ title >
     < style type = "text/css" >
         a:link{
             color:#000;
         }
         a:visited{
             color:#982312;
         }
         a:hover{
             color:yellow;
         }
         a:active{
             color:red;
         }
         a:focus{
             color:blue;
         }          
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< p class = "a" >study hard, improve every day</ p >
< a href = "https://www.liyongzhen.com/" target = "_blank" >学编程，上利永贞网</ a >
< p >study hard, improve every day</ p >   
</ body >
</ html >

转载于:https://www.cnblogs.com/lszw/p/10577359.html

weixin_30371469
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS字体样式
Te_Amo_SHX的博客
05-11 1835
一、字体类型：（font-family属性） 1.可以写多个字体类型，用逗号隔开。 2.单个英文单词的字体类型不用加双引号（或单引号），其他的需要加双引号（或单引号）。 示例 p{font-family:Verdana,"楷体";} body{font-family:Times,"Times New Roman","楷体";} 二、字体大小：（font-size属性） 1.常用单位：em、px(像素) h1{font-size:24px;} h2{font=size:2em;} 三、字
【CSS】CSS字体样式【CSS基础知识详解】
热门推荐
@花无缺
11-08 1万+
文字是网页界面上最常见的元素，而文字的字体、大小和文字样式等都可以通过CSS来设置。在 CSS 中，有五个通用字型： 衬线字体（Serif） 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感 特点：文字笔画粗细不均匀，并且首尾有笔锋装饰 场景：报刊书籍中应用广泛 常见该系列字体：宋体、Times New Roman 无衬线字体（Sans-serif）字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。 特点：文字笔画粗细均匀
CSS-12：CSS字体属性之文字样式(风格)
臧小川的博客
07-04 190
CSS字体属性之文字样式(风格) p { font-style: italic; } em
css字体样式设置
dianzhuxian2030的博客
02-19 174
font-size：字号大小 font-weight：字体粗细 属性 normal、bold、bolder、lighter、100~900（100的整数倍） 数字 400 等价于 normal，而 700 等价于 bold font-style：字体风格 属性： normal：默认值，浏览器会显示标准的字体样式。 italic：...
CSS——CSS字体样式属性和CSS外观属性
流楚丶格念的博客
06-26 5212
爱是朝朝暮暮的相守CSS字体样式属性font-size:字号大小font-family:字体注意CSS Unicode字体font-weight:字体粗细font-style:字体风格font:综合设置字体样式 (重点)CSS外观属性color:文本颜色line-height:行间距text-align:水平对齐方式text-indent:首行缩进text-decoration 文本的装饰简单案例 CSS字体样式属性 font-size:字号大小 font-size属性用于设置字号，该属性的值可以使用相对长
css3实现Metro风格.rar_css3metro风格_css3实现Metro风格
09-21
8. **字体图标**：Metro风格常使用矢量图形，如字体图标（Font Icons），它们可以通过CSS更改颜色和大小，且在不同分辨率下保持清晰。 9. **颜色方案**：Metro风格强调鲜明的颜色对比，开发者可以使用CSS3的颜色...
CSS字体属性全解析
12-13
话说CSS字体属性font-family、font-style、font-size、font-weight、font-variant： 使用CSS，可以对字体进行设置，字体属性包括五种常见属性：字体系列font-family、字体样式/字体风格font-style、字体大小font-...
CSS的文字样式
weixin_43887184的博客
04-07 145
1.font字体 1.1 font-size:大小 作用： font-size属性用于设置字号 p { font-size:20px; } 单位： 可以使用相对长度单位，也可以使用绝对长度单位。 相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。 注意： 我们文字大小以后，基本就用px了，其他单位很少使用 谷歌浏览器默认的文字大小为16px ...
CSS样式风格定义
02-23
系统默认提供的CSS样式风格定义 　　说　明：在《动易网站管理系统》中，CSS样式风格定义是可以自己自由定义的，也说是说您可以自由添加Ｎ多个自定义的风格，然后在各频道的版式模板中调用就行了。下面提供的是系统默认提供的CSS样式风格定义，里面有详细的定义注释，注释标记为：/* ...... */。　　友情提醒：修改风格设置必须具备一定网页css样式设计知识，建议您找些这方面的书看一下，在定义中也不能使用单引号或双引号，否则会容易造成程序错误。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝/* 网站链接总的CSS定义:可定义内容为链接字体颜色、样式等 */a{text-decoration: none;} /* 链接无下划线,有为underline */ a:link {color: #000000;} /* 未访问的链接 */a:visited {color: #000000;} /* 已访问的链接 */a:hover{COLOR: #ff0000;} /* 鼠标在链接上 */ a:active {color: #0000ff;} /* 点击激活链接 *//* 顶部频道文字链接的CSS定义－－将顶部频道文字链接与网站链接总的CSS定义分开，以后可以制作深底浅字的格式，如果要保持原来的设计样式，将此定义内容删除或定义成与网站链接总的CSS相同即可。调用代码为<a class=‘Channel‘ ***>***</a> */a.Channel:link {color: #ffffff;}a.Channel:visited {color: #ffffff;}a.Channel:hover{COLOR: #ffff00;}a.Channel:active {color: #ffffff;}/* 顶部当前频道文字链接的CSS定义－－显示当前频道的文字样式，调用代码为<a class=‘Channel2‘ ***>***</a> */a.Channel2:link {color: #ffffff;}a.Channel2:visited {color: #ffffff;}a.Channel2:hover{COLOR: #ffff00;}a.Channel2:active {color: #ffffff;}/* 顶部频道用户注册链接的CSS定义－－调用代码为<a class=‘user‘ ***>***</a> */a.user:link {color: #ffffff;}a.user:visited {color: #ffffff;}a.user:hover{COLOR: #ffff00;}a.user:active {color: #ffffff;}/* 底部版权信息文字链接的CSS定义－－与顶部频道文字链接定义的想法相同。可设置与顶部频道文字链接定义不同的文字颜色，网页内定义以预留。调用代码为<a class=‘Bottom‘ ***>***</a> */a.Bottom:link {color: #ffffff;}a.Bottom:visited {color: #ffffff;}a.Bottom:hover{COLOR: #ffff00;}a.Bottom:active {color: #ffffff;}/* 文章栏目标题文字链接的CSS定义－－可设置与顶部频道文字链接定义不同的文字颜色，网页内定义以预留。要相同可不设置。调用代码为<a class=‘Class‘ ***>***</a> */a.Class:link {color: #037FA8;}a.Class:visited {color: #037FA8;}a.Class:hover{COLOR: #ff0000;}a.Class:active {color: #037FA8;} /* 水平条效果的CSS定义BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted;height:1;width:100%;align:left;color:#86BCD4;Shade:no; 水平条虚线效果定义一border:1px dashed #86BCD4; height: 1; 水平条虚线效果定义二align: center;width: 100%;height: 1;color: #86BCD4;Shade:no;SIZE=1; 水平条实线无阴影效果定义*/hr{border:1px dashed #86BCD4; height:1;}/* 列表项目效果的CSS定义*list-style-type: circle;　列表项目样式disc : 　CSS1　实心圆circle : 　CSS1　空心圆square : 　CSS1　实心方块decimal : 　CSS1　阿拉伯数字lower-roman : 　CSS1　小写罗马数字upper-roman : 　CSS1　大写罗马数字lower-alpha : 　CSS1　小写英文字母upper-alpha : 　CSS1　大写英文字母none : 　CSS1　不使用项目符号armenian : 　CSS2　传统的亚美尼亚数字cjk-ideographic : 　CSS2　浅白的表意数字georgian : 　CSS2　传统的乔治数字lower-greek : 　CSS2　基本的希腊小写字母hebrew : 　CSS2　传统的希伯莱数字hiragana : 　CSS2　日文平假名字符hiragana-iroha : 　CSS2　日文平假名序katakana : 　CSS2　日文片假名字符katakana-iroha : 　CSS2　日文片假名序号lower-latin : 　CSS2　小写拉丁字母upper-latin : 　CSS2　大写拉丁字母*list-style-image: url(Skin/sg_blue/li1.gif); 用图像代替列表项目*list-style-position : outside | insideoutside : 　列表项目标记放置在文本以外，且环绕文本不根据标记对齐inside : 　列表项目标记放置在文本以内，且环绕文本根据标记对齐*/li{list-style-image: url(Skin/sg_blue/j32.gif); } /* 栏目导航发光阴影效果的CSS定义，调用代码为<span class="Glow">***</span> */.Glow{FILTER: Glow(Color=0733B2, Strength=1) dropshadow(Color=0733B2, OffX=1, OffY=1,); WIDTH: 100%; COLOR: #ffffff; LINE-HEIGHT: 20px}/* Body的CSS定义:对应CSS中“BODY”，可定义内容为网页字体颜色、背景、浏览器边框等 */BODY{FONT-SIZE: 9pt;background:url(Skin/blue/bg_all.gif);text-decoration: none;SCROLLBAR-FACE-COLOR: #f6f6f6;SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #cccccc; SCROLLBAR-3DLIGHT-COLOR: #cccccc; SCROLLBAR-ARROW-COLOR: #330000; SCROLLBAR-TRACK-COLOR: #f6f6f6; SCROLLBAR-DARKSHADOW-COLOR: #ffffff;}/* 单元格的CSS定义:对应CSS中的“TD”，这里为总的表格定义，为一般表格的的单元格风格设置，可定义内容为背景、字体颜色、样式等 */TD{FONT-FAMILY:宋体;FONT-SIZE: 9pt;line-height: 150%; }/* 文本框的CSS定义:对应CSS中的“INPUT”，这里为文本框的风格设置，可定义内容为背景、字体、颜色、边框等 */Input{BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #666666 1px solid;BORDER-LEFT: #666666 1px solid;BORDER-RIGHT: #666666 1px solid;BORDER-TOP: #666666 1px solid;COLOR: #666666;HEIGHT: 18px;border-color: #666666 #666666 #666666 #666666; font-size: 9pt}/* 按钮的CSS定义:对应CSS中的“BUTTON”，这里为按钮的风格设置，可定义内容为背景、字体、颜色、边框等 */Button{FONT-SIZE: 9pt;HEIGHT: 20px;}/* 下拉列表框的CSS定义:对应CSS中的“SELECT”，这里为下拉列表框的风格设置，可定义内容为背景、字体、颜色、边框等 */Select{FONT-SIZE: 9pt;HEIGHT: 20px;}/* 顶部用户登录文字链接的CSS定义 */.top_UserLogin{color: #037FA8;}/* ==简短标题文字的CSS定义开始== *//* [图文]简短标题文字的CSS定义 */.S_headline1{color: blue;}/* [组图]简短标题文字的CSS定义 */.S_headline2{color: #FF6600;}/* [推荐]简短标题文字的CSS定义 */.S_headline3{color: green;}/* [注意]简短标题文字的CSS定义 */.S_headline4{color: red;}/* ==简短标题文字的CSS定义开始== *//* ==top.asp中的CSS定义开始== */.top_tdbgall /* 顶部表格总背景颜色定义 */{width: 760;background:#ffffff;border-right: 1px solid #000000;border-left: 1px solid #000000;}.top_Channel /* 频道表格背景、文字颜色定义 */{background:#3399CC;color:#3AB1F5!important;text-align: right;}.top_Announce /* 公告表格背景、文字颜色定义 */{background:url(Skin/blue/top_nav_menu.gif);color: #0560A6;height: 30;}.top_nav_menu /* 导航栏表格背景、文字颜色定义 */{background:url(Skin/blue/top_nav_menu.gif);color: #0560A6;height: 30;}.top_Path /* 您现在的位置表格背景、文字颜色定义 */{width: 760;background:#ffffff;border-right: 1px solid #000000;border-left: 1px solid #000000;height: 30;}.top_UserLogin /* 顶部用户登录文字链接的CSS定义 */{color: #037FA8}/* ==top.asp中的CSS定义结束== *//* ==网页中部中的CSS定义开始== */.center_tdbgall /* 中部表格总背景颜色定义 */{background:#ffffff;border-right: 1px solid #000000;border-left: 1px solid #000000;}　　 /* --网页中部左栏的CSS定义开始-- */.left_tdbgall /* 左栏表格总背景颜色定义 */{background:#f2f2f2;}.left_title /* 左栏标题表格背景、文字颜色定义 */{background:url(Skin/blue/left_title.gif);font-weight:bold;color: 037FA8;height: 26;}.left_tdbg1 /* 左栏内容表格背景、文字颜色定义 */{background:url(Skin/blue/left_tdbg1.gif);line-height: 150%;padding-left:5;padding-right:8;}.left_tdbg2 /* 左栏底部表格背景、文字颜色定义 */{background:url(Skin/blue/left_tdbg2.gif);height: 10;}　　 /* --网页中部左栏的CSS定义结束-- */　　 /* --网页中部中栏的CSS定义开始-- */.main_tdbgall /* 中栏表格总背景颜色定义 */{width: 572;background:#ffffff;}.main_shadow /* 中栏内容间隔表格背景颜色定义(575) */{height: 10;}.main_announce /* 中栏公告表格背景、文字颜色定义 */{color: 037FA8;height: 25;background:url(Skin/blue/main_announce.gif);border: 1px solid #8CC3DE;}.main_Search /* 中栏搜索表格背景、文字颜色定义 */{color: 037FA8;height: 25;border: 1px solid #8CC3DE;background:#f7f7f7;}.main_top /* 中栏最新推荐表格背景颜色定义 */{background:url(Skin/blue/main_top.gif);height: 187;}.main_title_575 /* 中栏标题表格背景、文字颜色定义(575) */{color: 037FA8;background:url(Skin/blue/main_title_575.gif);border: 1px solid #8CC3DE;text-align: left;padding-left:40;height: 26;}.main_tdbg_575 /* 中栏内容表格背景、文字颜色定义(575) */{border: 1px solid #8CC3DE;line-height: 150%;text-align: left;padding-left:5;padding-right:5;}.main_title_282 /* 栏目文章列表标题表格背景、文字颜色定义(282) */{background:url(Skin/blue/main_title_282.gif);color: 037FA8;height: 20;border-top: 1px solid #8CC3DE;border-left: 1px solid #8CC3DE;border-right: 1px solid #8CC3DE;}.main_tdbg_282 /* 栏目文章列表内容表格背景、文字颜色定义(282) */{border: 1px solid #8CC3DE;line-height: 150%;text-align: left;padding-left:5;padding-right:5;}.listbg /* --栏目文章列表内容间隔颜色的定义1-- */{background:#ffffff;}.listbg2 /* --栏目文章列表内容间隔颜色的定义2-- */{background:#f7f7f7;}　　 /* --网页中部中栏的CSS定义结束-- */　　 /* --文章显示页的CSS定义开始-- */.main_ArticleTitle /* 主标题文字颜色定义 */{color: ff0000;font-weight:bold;font-size: 18;line-height: 150%;}.main_ArticleSubheading /* 副标题文字颜色定义 */{color: 037FA8;font-weight:bold;line-height: 150%;}.main_title_760 /* 标题导航表格背景、文字颜色定义(760) */{background:url(Skin/blue/main_title_760.gif);border: 1px solid #8CC3DE;padding-left:5;height: 25;color: 037FA8;}.main_tdbg_760 /* 内容表格背景、文字颜色定义(760) */{border: 1px solid #8CC3DE;padding: 8;}　　 /* --文章显示页的CSS定义结束-- *//* ==网页中部中的CSS定义结束== *//* ==Bottom.asp中的CSS定义开始== */.Bottom_tdbgall /* 底部表格总背景颜色定义 */{width: 760;background:#ffffff;border-right: 1px solid #000000;border-left: 1px solid #000000;}.Bottom_Adminlogo /* 管理信息表格背景、文字颜色定义 */{background:#3399CC;color:#ffffff;}.Bottom_Copyright /* 版权信息表格背景、文字颜色定义 */{background:#ffffff;color:#000000;}/* ==Bottom.asp中的CSS定义结束== *//* ==自选风格中的CSS定义结束== */.menu{background-color: #cccccc;width:97%;border: 1px;}.menuBody{background-color: #ffffff;}/* ==自选风格中的CSS定义结束== */
非常好的网站模板带有css风格
12-09
里面有多套网页模板，见面非常漂亮，希望能对你有帮助
CSS设置字体——系列和风格
weixin_30847939的博客
08-05 514
首先来了解一下CSS字体： 通用字体系列 前面讨论过，实际上相同的字体可能有很多不同的称呼，不过 CSS 迈出了勇敢的一步，力图帮助用户代理把这种混乱状况理清楚。 我们所认为的“字体”可能有许多字体变形组成，分别用来描述粗体、斜体文本，等等。例如，你可能已经对字体 Times 很熟悉。不过，Times 实际上是多种变形的一个组合，包括 TimesRegular、TimesBold、Times...
CSS代码风格
辐_射的博客
08-20 166
强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。a、属性值前面,冒号后面，保留一个空格。b、选择器(标签)和大括号中间保留。强烈推荐第二种格式，因为更直观。
css中的字体样式
Bouteilles
05-21 2298
font-family :字体类型 可以指定多种字体,从左到右的顺序排列,用英文逗号隔开
CSS之文字样式
最新发布
weixin_45604020的博客
06-22 6658
CSS字体属性定义字体，颜色、大小，加粗，文字等的样式。
CSS字体及文本样式
吴的博客
06-02 1808
​ 取值:​ url() : 指定图标位置。
CSS常用字体样式
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-20 6206
总结：这7种css字体样式，就是我们比较常用的啦，当然还有很多字体样式，这里就不一一罗列出来了！
CSS边框风格详解：掌握border-style属性
- 在CSS中，通过组合选择符、属性和值，实现细致的样式定制，如设置段落文字大小`font-size:9pt`，或者控制文本对齐方式`text-align`。 - 类选择符的灵活性使得我们可以为多个相似元素赋予统一的样式，简化代码并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值