Dann lernen Sie das CSS-Stylesheet:

(45 Nachrichten) CSS-Stylesheet learning_one day321's Blog-CSDN-Blog

Teil II (Fortsetzung):

Transparenz Opazität

Opazität bedeutet Transparenz, allgemein: Opazität:1. Dies ist die Standardtransparenz, also undurchsichtig.

Der Wert liegt im Allgemeinen zwischen 0 und 1. Je kleiner der Wert, desto höher die Transparenz.

Es kann mit dem img:hover-Tag verwendet werden. Gibt an, dass das Bild seinen Stil ändert, wenn die Maus darüber bewegt wird.

Zum Beispiel:

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

Navigationsleiste: (interessant zu kneifen)

In der Navigationsleiste wurden verschiedene Typen, Frameworks, Attribute und Beschriftungen eingeführt. Am geeignetsten ist jedoch die Verwendung der Element-Tags <ul> und <li>.

Unterteilt in vertikale seitliche Navigationsleiste und horizontale Navigationsleiste:

Vertikale seitliche Navigationsleiste:

Das Wichtigste ist der Farbwechsel dieser beiden angeklickten Links. Gibt den Stil dieses aktiven Links und den Stil dieser aktiven Seite an. Beachten Sie, dass diese beiden unverzichtbar sind.

li a.active { Hintergrundfarbe: #04AA6D; Farbe weiß; }

li a:hover:not(.active) { //Wenn das Element: not(.active) fehlt, ändert sich der Stil der aktiven Seite, wenn wir mit der Maus darüber fahren.
Hintergrundfarbe: #555;
Farbe: Weiß;
}

Hinweis: Position: Fest muss eingestellt werden. Dieses Element ist wichtig. Wahrscheinlich wird nur die Seitenleiste dieses Element verwenden.

Beispiel:

ul {
  list-style-type: none;     //设置样式无列表
  margin: 0;    
  padding: 0;       //位置是左上。
  width: 25%;         //宽度是25%
  background-color: #f1f1f1;     
  position: fixed;     //固定此位置，这个多琢磨一下。和position:sticky进行比较。
  height: 100%;
  overflow: auto;
}

li a {
  display: block;   设置标签为块级元素，一个占据一行
  color: #000;       
  padding: 8px 16px;
  text-decoration: none;    设置链接无下划线。
}

li a.active {
  background-color: #04AA6D;
  color: white;    
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Horizontale Navigationsleiste:

Der Unterschied zwischen der horizontalen Navigationsleiste und der oben genannten besteht darin, dass es viele Möglichkeiten gibt, sie festzulegen. Stellen Sie den Gleitkommamodus ein: float:left. Stellen Sie den Inline-Modus ein: display: inline. Sticky-Navigation festlegen: display:sticky.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;       //设置粘贴性的水平导航栏
  top: 0;
}

li {
  float: left;      //这个是关键，使用浮点式的方法设置水平导航栏。
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

Erweitertes Beispiel:

Navigationsleiste mit Dropdown-Liste: Ein Beispiel hierfür finden Sie am Ende dieses Links.

Horizontale CSS-Navigationsleiste (w3schools.com)

Dropdown-Liste

.dropdown-content { display: none;} Dieses Element verbirgt den Dropdown-Content-Stil. Dieser Stil kann mit dem Float unten aktiviert werden.

.dropdown:hover .dropdown-content { Das versteckte Element kann in der Pseudoklasse neu gestartet werden.
Anzeige: Block;
}

Beispiel:

<style>
.dropdown {
  position: relative;   
  display: inline-block;
}

.dropdown-content {
  display: none;   
  position: absolute;    //这个很重要的，决定了它会单独成为一个样式。
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>

Bildstil (kleines Symbol), Attributauswahl

Bild-Sprite:

background: url(img_navsprites.gif) 0 0;- Definieren Sie das Hintergrundbild und seine Position (0px links, 0px oben)

Tatsächlich ähnelt es einem langen Bild und extrahiert dann einen Teil davon separat. Dies ist das lange Bild bei vielen Apps.

Zum Beispiel ein Bild der Navigationsleiste:

Hintergrund: URL(" ") -47px -47px; das nächste Pixel ist das Wertpixel des Schattenteils

Attributauswahl:

[Attribut] Zum Beispiel: [a] Auf diese Weise wird der Attributstil aller Links geändert.

【attribute="value"】 Beispiel: a[target="_blank"]

[attribute~="value"] Beispiel: [title~="flower"] gibt an, dass der Titel das Attribut „Blume“ enthält. Vollständige Wörter!

[attribute|="value"] Zum Beispiel: [class|="top"] Es ähnelt der vorherigen Verwendung. Unterschied, kann ihm ein „-“ folgen.

[attribute^="value"] Zum Beispiel: [class^="top"] Der Header enthält das top-Attribut. Der Wert muss kein ganzes Wort sein!

[attribute$="value"] Beispiel: [class$="test"] enthält am Ende das Testattribut. Dito.

[attribute*="value"] ist in Ordnung, solange das Attribut dies enthält. [class*="te"]

Form, Zähler

input[ type=text ]: focus //Dies ist eine Fokusschaltfläche, deren Stil sich ändert, wenn darauf geklickt wird.

Größe ändern: keine. Wenn diese Eigenschaft festgelegt ist, lässt die Formulareigenschaft keine Größenänderung zu. (Einige Browser können die Größe ziehen. Durch Festlegen dieser Eigenschaft wird das Ziehen deaktiviert.)

Schalter:

Es hat die folgenden Eigenschaften:

counter-reset- Zähler erstellen oder zurücksetzen
counter-increment- Erhöhen Sie den Zählerwert
content- Generierter Einfügeinhalt
counter()oder Funktion - Addieren Sie den Wert des Elementzählerscounters()

Beispiel: Dies definiert die Anzahl von h2. Zählen Sie nach der Anzahl h2.

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Das Wichtigste an diesem Attribut ist der verschachtelte Zähler: z. B. 1.1, 1.2, 1.3 Stile. Es sind zwei Zähler erforderlich. Und der Inhalt des letzteren Zählers ist der vorherige Zähler.

Aus Zeitgründen muss ich meinen Studienplan ändern. Die bisherige Methode ist immer noch zu langsam. Da es keine praktische Anwendung gibt, lese ich es einfach noch einmal und mache mir dann Notizen zu diesem Inhalt, genau wie beim erneuten Kopieren. Wir können so nicht weitermachen. Vorschlag: Schauen Sie einfach zu, es gibt Wissenspunkte für die Themenschulung . Andere Wissenspunkte, machen Sie sich keine Notizen, Sie können es lesen, wenn Sie möchten. Versuchen Sie, nicht hinzusehen. Warten Sie, bis Sie es wirklich brauchen.

Erlernen von CSS-Stylesheets Teil 2