suchen
HeimWeb-FrontendHTML-TutorialCSS样式的面向对象思想(一)_html/css_WEB-ITnose

  今天来谈一谈CSS样式的面向对象写法。顾名思义,面向对象是高级语言具备的特性,主要是为了程序高可复用,解决模块之间的耦合关系,那么像CSS这样的脚本语言是否也可以使用面向对象的思想,来提高代码的可维护性和可扩展性呢?答案是肯定的,运用面向对象的思想来编写CSS代码,可以极大提高前台代码的效率。

      目前常用的一种CSS代码组织方法是:base.css + common.css + page.css , 这样的组织架构让人很容易联想到常用的三层架构模型,但是这里稍微有一点区别。base层代码中存放高度统一的css代码,是跨越项目的,可在多个项目中重复使用的基础样式代码;common层中存放针对某一个项目(网站)的css代码模块,在此项目中,这些代码是可重复利用;page.css是实现针对具体单个页面的样式代码。通过这样的css代码组织架构,可以很好的对功能进行抽象,避免了代码的重复开发,提高了效率,有利于维护。css代码的架构关系图如下:

                

 

     这里主要讲一下base层代码的编写要领,这一层会被项目的所有页面引用,与具体的UI设计无关(无视美工设计),要求精简和通用,具有高可移植性,一般的base层都会包括一下几类设置:

     1  CSS 初始化设置

         CSS初始化设置主要是提供一些通用的css初始化功能,这些功能就是HTML标签的默认样式,例如:ul的默认缩进样式、em的字体倾斜、strong的字体加粗等,以及以往常用的*{margin:0;padding:0;}

     2  文字排版

         文字排版是简洁的设置字体样式,报告字体大小、行高等;         例如:  f10{font-size:10px;}
                    f13{font-size:13px;}

     3  定位

         定位主要设置居中、float、postition等属性;

         例如:   fl{float:left;}
                     fr{float:right;}

     4  长度高度

          长度和高度主要设置 width 和 height;

          例如:  w10{width:10px;}
                     h10{width:10px;}

     5  边距

          边距主要设置margin和padding值;

          例如:  m10{margin:10px;}
                     p10{padding:10px;}

  

       那么,定义以上这样的样式,我们如何来改变思想,编写css样式呢?首先来看一段常用的css样式写法:

       例1:我们有3个p元素,我希望第1个为:50*50,文字为10px; 第二个为:100*100,文字为13px;   第三个为:200*200,文字为15px;那么c传统样式应该怎么写?

                   

11111



                 

22222



                 

333333

                  CSS代码如下:

                 .pClass1{ width:50px;height:50px;font-size:10px;background-color:#FF0; border:#000 solid 1px; position: relative; float:left;}
                 .pClass2{ width:100px;height:100px;font-size:13px;background-color:#0CF; border:#000 solid 1px;position:relative;float:left;}
                 .pClass3{ width:200px;height:200px;font-size:15px; background-color:#9F9; border:#000 solid 1px;position:relative;float:left;}

                       

                 我们来看下标注出来的代码,这里就是设置我们的提出的要求的css样式部分,那么现在我们再想增加一个条件:

                 再次增加一个p元素,样式为200*100,文字为15px;那应该怎么增加?

                 显然是这样:  1 增加HTML :   

444444

                                    2 增加CSS :

                .pClass4{ width:200px;height:100px;font-size:15px; background-color:#9F9; border:#000 solid 1px;position:relative;float:left;}   

                 想必大家都已经发现了,这样的增加代码只是在做一些重复的代码工作,显然不合符面向对象的思想,那么我们是否可以将以上这些功能予以分层合并呢,利用模块化的思想来编写?好,就让我们来试一试:

                 我们首先编写一个通用的css基础类(即我们以上所说的base.css),样式代码如下:

                  .w50{width:50px;}     .h50{height:50px;}      .f13{font-size:13px;}

                  .w100{width:100px;}  .h100{height:100px;}  .f15{font-size:15px;}

                  .w200{width:200px;}  .h200{height:200px;}  .f18{font-size:18px;}

                  .pClass{ border:#000 solid 1px; position: relative; float:left;}

                 HTML部分:

                   

11111



                  

22222



                  

333333

                   注意为了能够更好的说明问题,我这里把颜色值统一了,这里我们发现class写法不一样了,使用的是一种“组合式”写法,这个就是CSS面向对象的精髓,也就是说我们可以像搭积木一样的利用现有的CSS样式,不需要通过很大的修改生成一个样式,那么我们就来实现pClass4吧:

                  我们只需编写一个HTML即可: 

44444

       

                 来看看效果,您理解以上所说的面向对象含义了吗?

                             

 

                

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?Mar 04, 2025 pm 12:32 PM

Das offizielle Konto -Webseite aktualisiert Cache, dieses Ding ist einfach und einfach und es ist kompliziert genug, um einen Topf davon zu trinken. Sie haben hart gearbeitet, um den offiziellen Account -Artikel zu aktualisieren, aber der Benutzer hat die alte Version immer noch geöffnet. Schauen wir uns in diesem Artikel die Wendungen und Wendungen und wie man dieses Problem anmutig ansehen. Nach dem Lesen können Sie sich leicht mit verschiedenen Caching -Problemen befassen, sodass Ihre Benutzer immer den frischesten Inhalt erleben können. Sprechen wir zuerst über die Grundlagen. Um es unverblümt auszudrücken, speichert der Browser oder Server einige statische Ressourcen (wie Bilder, CSS, JS) oder Seiteninhalte, um die Zugriffsgeschwindigkeit zu verbessern. Wenn Sie das nächste Mal darauf zugreifen, können Sie ihn direkt aus dem Cache abrufen, ohne ihn erneut herunterzuladen, und es ist natürlich schnell. Aber dieses Ding ist auch ein zweischneidiges Schwert. Die neue Version ist online,

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?Mar 17, 2025 pm 12:27 PM

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?Mar 17, 2025 pm 12:20 PM

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?Mar 04, 2025 pm 02:39 PM

Dieser Artikel zeigt einen effizienten PNG -Grenzzusatz zu Webseiten mithilfe von CSS. Es wird argumentiert, dass CSS im Vergleich zu JavaScript oder Bibliotheken eine überlegene Leistung bietet, um zu beschreiben, wie die Randbreite, Stil und Farbe für subtile oder herausragende Effekte angepasst werden können

Was ist der Zweck des & lt; datalist & gt; Element?Was ist der Zweck des & lt; datalist & gt; Element?Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?Mar 12, 2025 pm 04:05 PM

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

Was ist der Zweck des & lt; Fortschritts & gt; Element?Was ist der Zweck des & lt; Fortschritts & gt; Element?Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Was ist der Zweck des & lt; Meter & gt; Element?Was ist der Zweck des & lt; Meter & gt; Element?Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Sicherer Prüfungsbrowser

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

SublimeText3 Englische Version

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools