文档介绍：该【ASP.NET程序设计教学资源电子课件单元2 母版主题与皮肤CSS样式的设计与应用 】是由【放射辐射】上传分享，文档一共【21】页，该文档可以免费在线阅读，需要了解更多关于【ASP.NET程序设计教学资源电子课件单元2 母版主题与皮肤CSS样式的设计与应用 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。
手绘风格
CSS基础–内联式
图1
CSS基础–内联式
上述代码分别定义了相关属性来控制样式,并且都使用内联式定义样式,这些CSS的属性的意义如下所示:
字体名称属性(font-family):该属性设定字体名称,如Arial,、Tahoma,、Courier等,可以定义字体的名称。
字体大小属性(font-size):该属性可以设置字体的大小。字体大小的设置可以有多种方式,最常用的就是pt和px。
字体风格属性(font-style):该属性有三个值可选:normal,、italic、oblique、normal是默认值,italic、oblique都是斜体显示。
CSS基础–内联式
字体粗细属性(font-weight):该属性常用值是normal和bold,normal是默认值,bold是粗体。
字体变量属性(font-variant):该属性有两个值normal和small-caps,normal是默认值。small-caps表示字体将被显示成大写。
字体属性(font):该属性是各种字体属性的一种快捷的综合写法。
颜色(color):该属性用来控制字体颜色。
CSS基础–嵌入式
用内联式的方法进行样式控制固然简单,但是在维护过程中却是非常的复杂和难以控制。当需要对页面中的布局进行更改时,则需要对每个页面的每个标签的样式进行更改,这样无疑增大的工作量,当需要对页面进行布局时,可以使用嵌入式的方法进行页面布局,代码如下:
CSS基础–嵌入式
<head>
<metacontent="text/html;charset=utf-8"http-equiv="Content-Type"/>
<title>这是一段文字1</title>
<styletype="text/css">
.font1
{font-size:14px;}
.font2
{font-size:14px;
font-weight:bolder;}
.font3
{font-size:14px;
font-style:italic;
}.font4
{
font-size:14px;
font-variant:small-caps;
}
.font5
{font-size:14px;
color:red;}
</style>
</head>
CSS基础–嵌入式
<body>
<divclass="font1">
这是一段文字1</div>
<divclass="font2">
这是一段文字2</div>
<divclass="font3">
这是一段文字3</div>
<divclass="font4">
ThisisMyFirstCSScode</div>
<divclass="font5">
这是一段文字5</div>
</body>
CSS基础–外联式
虽然嵌入式能够解决单个页面的样式问题,但是这样只能针对单个页面进行样式控制,而在很多网站的开发应用中,大量的页面样式基本相同,只有少数的页面不尽相同,所以使用嵌入式还是有不足,这里就可以使用外联式。使用外联式,,并在当前页面中添加引用,.css页面代码如下所示。
.font1{font-size:14px;}
.font2{font-size:14px;font-weight:bolder;}
.font3{font-size:14px;font-style:italic;}
.font4{font-size:14px;font-variant:small-caps;}
.font5{font-size:14px;color:red;}
CSS基础–外联式
,只需要定义如head标签中的style标签的内容即可,其编写方法也与内联式和内嵌式相同。在编写完成CSS文件后,需要在使用的页面的head标签中添加引用,示例代码如下所示。
<linkhref=""type="text/css"rel="stylesheet"></link>
,。在使用了外联式后,当前页面的HTML代码就能够变得简单和整洁,示例代码如下所示。
CSS基础–外联式
<htmlxmlns="">
<head>
<metacontent="text/html;charset=utf-8"http-equiv="Content-Type"/>
<title>这是一段文字1</title>
<linkhref=""type="text/css"rel="stylesheet"></link>
</head>
<body>
<divclass="font1">
这是一段文字1</div>
<divclass="font2">
这是一段文字2</div>
<divclass="font3">
这是一段文字3</div>
<divclass="font4">
ThisisMyFirstCSScode</div>
<divclass="font5">
这是一段文字5</div>
</body>
</html>