ASP.NET初学者必修：掌握前端页面布局与CSS基础知识

116 浏览量更新于2024-08-28 1 收藏 183KB PDF 举报

ASP.NET基础学习之前端页面布局对于任何后端开发人员来说都至关重要，因为它不仅涉及后台逻辑，还直接影响到用户体验。前端工作主要负责创建用户界面，而作为后端开发者，了解并掌握前端布局技术有助于提高工作效率和产品质量。 CSS（Cascading Style Sheets），作为前端开发的核心组成部分，是用于管理和控制网页样式的标记语言。它的主要目标是将样式信息从内容中分离出来，使得网页设计更加模块化和可维护。CSS的语法相对简单，主要由选择器、属性和值构成，使其易于上手。然而，不同浏览器对CSS的支持可能存在差异，导致在遵循标准的同时，开发者需要处理浏览器间的兼容性问题。 CSS提供了两种定义样式的常见方法：内联样式和级联样式。内联样式直接应用于HTML元素的style属性，虽然直观但会导致代码冗余，适用于样式变化少的场景。相比之下，级联样式更为推荐，分为内嵌式和链接式。内嵌式CSS是在`<head>`标签内的样式，简洁易管理，修改时只需更新相关代码。链接式CSS则是通过外部`.css`文件引入，实现了更完善的结构与表现分离，适用于大型项目，有利于维护和复用。在样式表中，可能遇到样式冲突的问题，当一个元素同时接受多个样式定义时，浏览器会按照“就近使用”原则解决，优先使用直接作用于元素的样式，然后结合其他定义形成最终样式。这需要开发者具备一定的冲突处理能力。为了保证良好的用户体验，后端开发人员在学习ASP.NET时，应熟悉CSS的基础语法、选择器、布局方式以及浏览器兼容性策略。通过实践，掌握如何运用CSS来构建响应式、可访问性和易于维护的前端界面，从而与前端团队有效协作，共同提升项目的整体质量。

asp.net基础学习之前端页面布局基础学习之前端页面布局

前端就是给人看的界面，后台人员不仅要知道后台代码的编写，更要知道前端的布局。有时候要比前端人员知道的还要多，因

为有可能前端人员是个21天精通ps的大师级人物。这时候你可以自己写前端。

1.CSS

•CSS(Cascading Style

Sheet)，中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。就语法而言，

•CSS是一种容易学习的语言是一种容易学习的语言。它的“语法”仅由几个概念组成，使得它相当容易入门。CSS的难点在于所有主流浏览器呈现页面

的方式。尽管实际上每种浏览器都能够理解CSS，但当根据CSS标准显示页面时，它们都有各自的“怪癖”。

•CSS规定了两种定义样式定义样式的方法，分别是内联式和级联式。

•直接将样式控制放在单个HTML元素内，称为内联式或行内样式。该样式通过style属性来控制每个元素的外观，直观但是很繁

琐。除非具有相同样式的元素较少，否则很少采用。

在网页的head部分定义或导入的样式，称为级联式样式。该样式可以实现将网页结构和表现分离，这样，当修改某些元素的样

式时，只需要修改head部分定义或引入的样式，该网页内所有具有相同样式的元素都会自动应用新的样式。

•级联式样式级联式样式又可以分为两种方式：内嵌式和链接式。

•在head部分直接实现的CSS样式，称为内嵌式内嵌式。这种CSS一般位于HTML文件的头部，即在与标签内，并且以结束。

采用内嵌式比内联式方便了很多，body内的代码也相对简洁，修改某个元素的样式时只需修改head内的代码即可。

•在head部分通过导入以扩展名为.css的文件来实现CSS样式，称为链接式链接式。利用这种方法在网页中可以调用已经定义好的样式

表来实现样式表的应用，定义好的样式表通常单独以文件的形式存放在站点目录中。这种方法实现了将网页结构和表现的彻底

分离，最适合大型网站的CSS样式定义。

•如果某个元素既引用了链接样式文件中定义的样式，又在head部分定义了新的样式，或者在元素内部通过style属性定义了新

的样式，那么该标记元素最终呈现的效果会是什么样呢？这就是样式嵌套中的冲突问题，浏览器解决这种问题的方法就是一旦

发现样式冲突，则通过“就近使用”原则，而不冲突的样式则通过顺序组合后形成最终样式进行显示。

•一般情况下，在样式表(.css)文件中定义适合大多数网页公用的样式，在网页内部采用内嵌式定义该页面特有的样式。

•属性是元素的一部分，可通过样式表修改。CSS规范定义了一个长属性列表，但在大多数Web站点中不会用到所有项。

下面介绍这几种不同的方式来设置:

<h1 style="color:blue;">CSS样式</h1>

<style>

h1 {

color:red

}

</style>

#h1 {

color:gray

}

<h1 id="h1">CSS样式</h1>

.h1 {

color:gray

}

<h1 class="h1">CSS样式</h1>

//直接插入即可引用

html的标签,”id”对应”#”,”class”对应”.” .id是唯一标志的，在同一页面中不能有相同的值,class则没这约束。如：

Css

h1{……}

#div1{……}

//引用时，使用id属性声明即可 id=”div1″

.div2{……}

//引用时，使用class属性声明即可 class=”div2″

关联选择符关联选择符:

•关联选择符是一个用空格隔开的两个或更多的单一标记选择符组成的字符串。一般格式如下：选择符1 选择符2 …… {属性:值;

……}

•这些选择符具有层次关系，并且它们的优先级比单一的标记选择符大。例如： p h2{ color:red }

•这种定义方式只对p元素所包含的h2元素起作用，单独的p或者单独的h2元素均无法应用该样式。

并列选择符并列选择符

•如果有多个不同的元素定义的样式相同，则可以使用并列选择符简化定义。例如： h1,h2,h3{ color:blue}

•每个元素之间用逗号隔开，表示所有的h1、h2、h3标记中的内容都将以蓝色样式显示。

伪类伪类:

•伪类是CSS中非常特殊的类，它能自动地被支持CSS的浏览器所识别。伪类可以指定XHTML中的<a>元素以不同的方式显示

链接(links)、已访问链接(visited

links)和可激活链接(active links)。甚至不同字体大小和风格。

•CSS中用4个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a:active，例如：

a:link{font-weight : bold ;text-decoration : none ;color : #C00000 ;}

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38687928

粉丝: 2
资源: 950

ASP.NET初学者必修：掌握前端页面布局与CSS基础知识

.net 前端界面网站框架

ASP.NET MVC 搭建简单网站 --1.前端页面布局和基本样式实现-附件资源

.net前端界面框架

asp.net 页面布局

asp.net基础

asp.net基础学习--------计算器

.net页面布局学习

ASP.NET 基础入门

asp.net 基础知识

ASP.net基础教程

最新资源