Einführung in CSS

Die heutige Studie kam endlich zu CSS. CSS kann viele coole Schnittstellen realisieren, und das Aufkommen von CSS soll das Problem lösen

Eine Sprache, die aufgrund des Chaos in den Schreibstilen der HTML-Struktur entstanden ist. In der Vergangenheit wurden Stile zusammen mit der Struktur geschrieben

unterscheiden sich nicht voneinander, was die Codemenge erheblich erhöht, da derselbe Stil wiederholt wiederholt wird und Sie

nur immer wieder neu schreiben können

Komm schon, es macht es auch schwierig, den Code zu lesen, nachdem er geschrieben wurde, und es wird extrem schwierig, Fehler zu finden. Zu diesem Zeitpunkt erschien CSS und

spiegelt seine Vorteile wider, und sein Nutzen besteht darin, die oben genannten Probleme zu lösen und Struktur von Leistung zu trennen.

Lass uns darüber reden, was CSS ist?

Was ist CSS?

CSS (Cascading Style Sheets) Cascading Style Sheets

CSS3 ist eine aktualisierte Version von CSS2. Die Versionsnummer enthält viele leistungsstarke neue Funktionen, die auf CSS2.1 basieren.

Derzeit unterstützen Mainstream-Browser wie Chrome, Safari, Firefox, Opera und sogar 360 bereits die meisten CSS3-Funktionen

, IE10 wird auch CSS3 vollständig unterstützen. Verschiedene Browser erfordern möglicherweise unterschiedliche Präfixe. Es repräsentiert diese CSS-Eigenschaft

Oder die Regeln sind noch nicht Teil des W3C-Standards und sind private Eigenschaften des Browsers, obwohl neuere Versionen von Browsern dies derzeit nicht erfordern

erfordert ein Präfix, aber für eine bessere Vorwärtskompatibilität ist das Präfix dennoch unverzichtbar.

CSS scheint die Struktur von HTML zu dekorieren. Es kann Dinge tun, die früheres HTML nicht konnte. Es kann HTML verschönern

Es ist sehr schön, daher ist CSS eine Ergänzung zu HTML.

Zum Beispiel:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #ff00ff</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 16px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        font-weight</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> bold</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>wowaoda<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

CSS ändert das p-Tag so, dass die Schriftart rosa und fett ist und die Schriftgröße 16 Pixel beträgt. Daraus können wir erkennen, dass CSS Stile zu Elementen in HTML hinzufügen, also ändern und verschönern kann .

Was kann CSS also?

Was kann CSS? ? ? ?

CSS kann mit nur wenigen Codezeilen viele Effekte und sogar Animationseffekte erzielen, die bisher den Einsatz von Bildern und Skripten erforderten.

Zum Beispiel abgerundete Ecken, Bildränder, Textschatten und Boxschatten, Übergänge, Animationen usw.

CSS vereinfacht den Designprozess für Front-End-Entwickler und sorgt für ein flexibleres Seitenlayout und eine schnellere Seitenladegeschwindigkeit.

Alle Webseitenstile auf der Website können mithilfe einer CSS-Datei gesteuert werden. Ändern Sie einfach den entsprechenden Code in der CSS-Datei,

Dann ändern sich alle Seiten der gesamten Website entsprechend. CSS kann eine Vielzahl von Geräten unterstützen, z. B. Mobiltelefone, PDAs, Drucker, Fernseher, Spielekonsolen usw.

Zweck: Leistung von Struktur trennen.

Beispiel:

Code

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    div</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> rgba(200,150,200,0.3)</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 2px 2px 2px 3px #eee</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

Dies wird vollständig durch CSS realisiert, was die Seite verschönert.

Bitte klicken Sie auch hier:

Animations-CSS
Die oben genannten Dinge machen mich neugierig auf seine Kraft. Als nächstes wollen wir seine Sprache erkunden.

CSS-Syntaxstruktur?

CSS-Syntax besteht aus drei Teilen: Selektoren, Attributen und Werten

Das

-Attribut ist das Stilattribut, das Sie festlegen möchten.

Jedes Attribut hat einen Wert. Eigenschaften und Werte werden durch Doppelpunkte getrennt.

<span style="color: #000000;">p{
    font-size:15px;
    }</span>

p ist der Selektor, das Attribut ist die Schriftgröße und der Wert ist 15px;

Dies wird auch auf die gleiche Weise verstanden. Ist die Struktur sehr einfach, nur diese drei Teile.

<span style="color: #000000;">a{
    color:#000;
    }</span>

Sie wissen also bereits genug über CSS, aber wie implementieren Sie diese CSS? Dann lassen Sie uns über das Zitieren der Seite sprechen.

Wie führt man CSS ein?

Drei Möglichkeiten zur Einführung:

1. Inline-Zitat Inline-Zitat bezieht sich auf das Schreiben der CSS-Stilkodierung direkt in das Stilattribut im HTML-Tag.

Beachten Sie, dass bei der Einführung von CSS auf diese Weise kein Selektor geschrieben werden muss.

2. Zitieren auf der Seite

<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color:#ff7600;"</span><span style="color: #0000ff;">></span>我是段落<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

In-Page-Referenzen dienen als separater Teil der Seite und werden innerhalb von positioniert.

3. Externes Stylesheet

<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #ff7600</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>

Externes Stylesheet ist die beste Form der CSS-Anwendung. Es platziert den CSS-Stilcode separat in einer externen Datei und ruft ihn dann von der Webseite auf.

这些就是它的引用方式，只要引用进来才能作用到HTML结构上。

既然有这几种引用方式，那么是不是随意引用的呢？如果这样那么就是乱套了，因为css也叫层叠样式表，既然

随便引用那么不是和它的理念冲突了吗？所以这些引用还是规则的，就是优先级；

优先级依次是：就近原则

行内引用 > 页内引用 > 页外引用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>csstitle>
    <link rel="stylesheet" href="style.css">
head>
<body>
<div>div>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color:#ff7600;"</span><span style="color: #0000ff;">></span>我是段落<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
body>
html>

它会优先执行行内样式，所以在外部样式中含有相同样式时，它是给忽略掉的。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>csstitle>
    <style>
    p{
        color: #fff;
    }
    style>
head>
<body>
<div>div>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color:#ff7600;"</span><span style="color: #0000ff;">></span>我是段落<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
body>
html>

从规则中知道这个也一样，内部样式也是被忽略的。

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #fff</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="style.css"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是段落<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

根据规则，内部样式优先。

既然样式都会写，那么自己写了很多很多样式代码，然后想找出某处的样式怎么办？一个一个样式看一遍，这个岂不是很耗时，很费神，

既然自己都这样了，那这个代码到了队友那不就是个坑。所以我们是不是可以注释一下他呢，让代码可读性更加强。

CSS注释

<span style="color: #000000;">/*这是头部*/
header{
    color:#fff;
}
/*这是导航*/
nav{}
/*这是主体*/
.container{}

/*这是尾部*/
footer{}</span>

这样是不是可读更强呢。

在HTML中结构可以很复杂，那么我们不可能简单的写个元素选择符吧。

而各种各样方便的选择符，从HTML结构树应运而生。

 选择符

1、通配选择符*

这个是选中全部元素，为他们设置样式。

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    *</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 15px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>标题<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我的段落的兄弟<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是段落<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

它们的字体都被设置为15像素。

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    *</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 15px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        font-weight</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> bold</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>标题<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我的段落的兄弟<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是段落<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

它们都被加粗了。

2、元素选择符

所谓元素选择符，指以网页中已有的标签名作为名称的选择符。

<span style="color: #000000;">body {}

h1 {}

p {}</span>

3、 群组选择符

除了可以对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义。

使用逗号对选择符进行分隔。对页面中需要使用相同样式的地方，只需写一次样式。

<span style="color: #000000;">p,h1{
        font-size: 15px;
        font-weight: bold;
    }</span>

4、 关系选择符

选择所有被E元素包含的F元素。

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    p span</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #eee</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>我是谁？<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

 

今日课程知识到此！！！

css.doyoe.com  css参考手册

接下来扩展补充：

特殊性：

每个选择器都有特殊性，而如果一个元素有两个或多个冲突的属性声明，特殊性高的胜出。

选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如：0,0,0,0. 

一个选择器的具体特殊性如下确定：

对于选择器中给定的各个ID属性值，加0,1,0,0。

对于选择器中给定的各个类属性值、属性选择或伪类，0,0,1，0。

对于选择器中给定的各个元素和伪元素，0,0,0,1。

结合符和通配选择器对特殊性没有任何贡献。

而通配选择器   0,0,0,0.

结合符连零都没有。

例子：

h1{color:red;}   为0,0,0,1 

p em{color：purple}  为0,0,0,2 

.grape{color:purple}  为0,0,1,0

p.b e.a{color:red; }   0,0,2,2

#aa{color:red;}    0,1,0,0

div#aa *[href]{color:red;}  0,1,1,1

而第一个0是为行内样式准备的，因为越前面，代表优先级越高，假如非零数字位置一样，那么先比较前面的数字的大小，

然后再往下比较，直到数字不相对，取数字大那个的优先级高。

重要声明 !important   ,就是把你所需要的声明标出来，它的优先级最高，不过它要放在声明的值的最后。 

继承：

继承的特殊性连零都没有，就是没有特殊性；

这个0特殊性有零与无特殊性有很大的区别，就是0特殊性的选择器可以为后代加样式，

而继承虽然也有给后代加样式，但有限制的，只有有继承能力的才能加到后代元素中，如color等，而margin、padding和border这些属性都不会加到后代里。

相同权重的，按顺序比较，顺序越下他的优先级最高。

较高特殊性强于较低特殊性

所以伪类声明顺序：link-visited-hover-active

LVHA（简写）

当:visited在他们之后时，由于权重一样，所以会看他们的顺序，而:visited在他们之后会胜出。

当不是写统一属性就不会出现这种问题。所以写同一种属性时要注意 ！！！！