ASP.NET程序设计教程5---CSS级联样式表(1)

最新推荐文章于 2022-11-11 09:15:31 发布

cc邦彦

最新推荐文章于 2022-11-11 09:15:31 发布

阅读量1.4k

点赞数 1

分类专栏： ASP.NET教程文章标签： asp.net css html5 教程 C#

本文链接：https://blog.csdn.net/weixin_43981402/article/details/97556789

版权

ASP.NET教程专栏收录该内容

7 篇文章 6 订阅

订阅专栏

先来看一段代码：

<body style = "background-color:Silver;color:Blue">
    <h1 style = "text-align:center">用1级标题显示文字</h1>
    <h2 style = "text-align:center">用2级标题显示文字</h2>
    <p style = "font-size:20px;font-family:隶书;text-align:center">文字大小20px，字体隶书</p>
    <p style = "text-align:center;color:#008080">正常字体&emsp;<b>粗体&emsp;</b><i>斜体&emsp;</i><u>下划线</u></p>
</body>

在visual studio中运行一下，得到如图1的运行结果。

图1 修改样式后的运行结果从图1中可以看出，我们定制了网页的背景颜色(background-color)，字体颜色(color)，字体(font-family)，文字大小(font-size)，对齐方式(text-align)。需要说明的是，在HTML5中规定文字中间的连续空格无论有多少个，都按一个空格处理。如果需要在文字中间显示多个连续的空格应使用多个普通空格替代符" "或全角空格替代符"&emsp;"来表示，为了统一代码的可读性，即便只需要一个空格时也应使用" "或"&emsp;"来表示。注意，每个替代符后面有一个分号“;”。

上述代码使用元素的style属性控制HTML5元素的样式，这种方式称为“内联式”。其优点是直观、方便。但缺点也十分突出，如果页面中有多个元素需要使用相同的样式，就需要进行多次重复书写，修改起来也是非常麻烦。为了解决这个问题，就产生了级联表样式(Cascading Style Sheets，CSS)，简称样式表，是一种将页面元素样式设置集中化的方法，引入CSS的主要目的就是为了将页面结构与页面外观表现分离。
我们来看一个使用“嵌入式”样式定义方法，代码如下：

<head>
    <title>嵌入式样式控制</title>
    <style type = "text/css">
        h1{font-size:20pt;color:Red}
        h2{font-size:15pt;color:Blue}
    </style>
</head>
<body>
    <div>
        <h1>第1章&emsp;ASP.NET与Visual&nbsp;Studio开发平台</h1>
        <h2>1.1&emsp;C/S和B/S架构体系</h2>
        <h2>1.2&emsp;ASP.NET的体系结构</h2>
        <h1>第2章&emsp;网页设计基础</h1>
        <h2>2.1&emsp;HTML5标记语言</h2>
        <h2>2.2&emsp;style与CSS</h2>
    </div>
</body>

运行结果如图2所示。

图2 使用CSS的网页显示将上述代码的：

h2{font-size:15pt;color:Blue}

改为：

h2{font-size:15pt;color:Green}

运行结果如图3所示。

图3 修改2级标题为Green后的网页显示通过上述代码的修改，可以看出，只需要对h2的属性就行修改后，所有使用h2标记的文字全部都会发生变化，相比HTML5的“内联式”就方便了许多。还有另一种使用CSS的方式，叫作“外部链接式”。语法格式为：

<head>
	<link type = "text/css" href="样式文件名.css" rel = "stylesheet">
</head>

上述代码说明:rel = "stylesheet"的含义是，将当前文档关联到一个级联样式表中。href属性指出了被关联文件的名称，如果.css文件没有存放在当前目录中，应写出文件所在的URL。
使用“外部链接式”控制样式可以将样式定义应用到更为广泛的范围。
如果一个网页中同时使用了“内联式”、“嵌入式”、“外部链接式”样式定义，而且三种不同方式对同样的标记元素定义冲突，那结果会怎样呢？
答案是，浏览器将采用“就近原则”的有限原则，即采用与该元素位置最近的样式定义。
CSS常用选择器
(1)类型选择器
“类型选择器”也称为“标记选择器”或“标签选择器”，它是以网页中现有标记为名称的选择器，用于统一设置某种标记的样式。例如，前面“嵌入式”定义方法中的例子，使用的就是“类型选择器”。
(2)ID选择器和类选择器
为了使相同的网页元素具有不同的外观设置，可以通过指定元素ID名称并以该ID值为选择器设置样式。ID选择器书写时必须以“#”开头。
类选择器通过类名称指定一组样式设置，网页中的元素通过引用该类来应用这样的样式设置。类选择器书写时必须以“.”开头。举例代码如下：

<head>
    <title>ID选择器和类选择器示例</title>
    <meta charset = "utf-8" />
    <style type = "text/css">
        #img_300{width:300px}
        #img_200{width:200px}
        
        .img_auto{width:auto;height:auto;max-width:100%;max-height:100%;}
        .imgdiv{position:absolute;top:20px;left:520px;width:100px;height:71px;}
    </style>
</head>
<body>
    <img id = "img_300" src = "1.jpg" alt = "not found"/>
    <img id = "img_200" src = "1.jpg" alt = "not found"/>
    <div class = "imgdiv">
        <img class = "img_auto" src = "1.jpg" alt = "not founf" />
    </div>
</body>

运行结果如图4所示，这里选用了一张小狗的图片。

图4 ID选择器和类选择器示例示例中使用ID选择器的代码为:

<img id = "img_300" src = "1.jpg" alt = "not found"/>
<img id = "img_200" src = "1.jpg" alt = "not found"/>

使用类选择器的代码为:

<div class = "imgdiv">
        <img class = "img_auto" src = "1.jpg" alt = "not founf" />
</div>

比较一下，一个使用的id，另一个使用的是class，所以称为ID选择器、类选择器。类选择器img_auto中的max-width和max-height是针对图片元素所在容器的div而言的，也就是说图片自动缩放最大占满div的范围，而div的大小及显示位置有类选择器imgdiv决定(层采用绝对定位方式；距离页面顶端20px；距离页面左端520px；层大小为宽100px，高71px)。
(3)包含选择器和组群选择器
包含选择器用于设置某元素下面子元素的样式。示例代码如下：

<style type = "text/css">
        div a{font-size:36px;font-family:黑体}
</style>

上述代码的含义是，使用包含选择器设置<div>标记下所有<a>子标记的字号为36px，字体为黑体。
如果希望<div>标记下的所有子标记都采用上述设置，可将代码改写成如下形式：

<style type = "text/css">
        div *{font-size:36px;font-family:黑体}
</style>

其中*为通配符选择器，表示所有子标记。
群组选择器可以对若干个不同元素进行统一的样式设置。例如，下列代码使用群组选择器使body、ul、li、a和p这几个元素具有相同的样式(内外边距均为0):

<style type = "text/css">
        body,ul,li,a,p{padding:0;margin:0}
</style>

cc邦彦

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET程序设计教程5---CSS级联样式表(1)

先来看一段代码：<body style = "background-color:Silver;color:Blue"> <h1 style = "text-align:center">用1级标题显示文字</h1> <h2 style = "text-align:center">用2级标题显示文字</h2> &lt...
复制链接

扫一扫