Inhaltsverzeichnis
Hello World
Heim Web-Frontend HTML-Tutorial html进阶css(1)_html/css_WEB-ITnose

html进阶css(1)_html/css_WEB-ITnose

Jun 24, 2016 am 11:34 AM

<br /><!doctype html><html><head>           <meta http-equiv="content-type" content="text/html";            charset="utf-8">           <title>html和css的关系</title>           <style type="text/css">            h1{                 font-size:12px;                 color:#930;                 text-align:center;                 }<br />            span{<br />                 color:yellow;<br />                }           </style></head><body>           <h1 id="span-Hello-span-World"><span>Hello</span> World</h1><br /></body></html>
Nach dem Login kopieren

css的组成:选择器,声明=属性与属性值

css的语法:选择器{属性:属性值;}

说明:1)属性和属性值之间用:连接,声明必须要在花括号内

2)一个选择器可以有多个属性,属性和属性之间用;分号隔开。

3)一个属性可以用多个属性值,属性值与属性值之间用空格隔开

meta标签支持html中的全局属性。

http-equiv属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先要传送给浏览器的mime文档头部包含名称/值对。

当服务器向浏览器发送文档时,会先发送很多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一格:content-type:text/html。这将告诉浏览器准备一个接受的html文档。(当然现在大多数浏览器都能自动识别HTML文档)

style type="text/css" 这段代表中间内容的风格是css格式。

例如:font-size:12px 是控制字体的大小

color:#930 是控制字体的颜色

text-align:center 是控制文字居中

span标签没有语义的它的作用就是为了设置单独的样式。在两种颜色或更多种颜色中它会选择最下面那种颜色。

Nach dem Login kopieren
Nach dem Login kopieren
<!doctype html><html><head>           <meta charset="utf-8">           <title>css之中的三种语法</title>           <link href="css的文件地址.css" rel="stylesheet" type="text/css" />           <style type="text/css">               span{                   color:blue;                   font-size:20px;                     }           </style></head><body>           <p style="color:red;font-size:12px">这里的颜色是红色</p>           <p>这是另外的<span>一个段落</span></p></body></html>
Nach dem Login kopieren
 以上是3种css的格式: 1)内联样式表就是<p style="color:red;font-size:12px"></p><br />css内联样式表就是把css代码直接写在现有的html标签中。<br />                    2)嵌入式样式表<style type="text/css"></style><br />嵌入式css样式就是可以把css样式代码写在style标签之中。一般情况下嵌入式css样式写在<head></head>之间。<br />                    3)外联样式表
Nach dem Login kopieren
 <link href="css的文件地址.css" rel="stylesheet" type="text/css" /><br />外联css样式就是把css代码写在一个单独的外部文件中,这个css样式文件以".css"为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到html文件内。
Nach dem Login kopieren
注意:rel="stylesheet"type="text/css"是固定写法不可修改,使用外联样式的好处可以让用户打开网页的速度有所提升。<br />三种样式表如果在同一个标签内,它们的优先级:内联>嵌入>外联。
Nach dem Login kopieren
 
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Erklärung dieser Website
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

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

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

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.

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 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.

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

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

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

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

See all articles