 |
| Beispiel für Responsive Design |
.post-body blockquote {
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
border-left: 2px solid #ea808b;
}
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 10px;
border: 1px solid #ea808b;
}
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
}
.post-body blockquote:first-letter {
font-family: 'Great Vibes';
font-size: 35px;
}
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb1r1CMa2Fwh7Bg_gYOQDDZ3y08D56QctwdnLN9MY99OfV-FFqczhPyjagRMEHrksBnJQ-2SirCKqbfGwxbl2vAcOLyIXIG-Xpa92MIihR8mEy9keu5TdcaqvEaJ5UwTA52afDksRxuVL4/s320/squares4.jpg);
padding: 20px;
margin: 1em 0 1em 10px;
}
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
border-left: 2px solid #ea808b;
}
.post-body blockquote:before {
content: '" ';
}
.post-body blockquote:after {
content: ' "';
}
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPa5eUlIcfmUbVFxllop0DlY2_tInFM0pmb7rpiUeps2BTeAMnVAWAPOg4D1XWN0p2sEP9_a0nWTyyOMtG05so_nBHErGPznmd1Ax2REBgFHvXU4grrcqUANuNQPQ9t5kC1ezMhr615B6/s1600/quote.png) no-repeat;
background-position-x: left;
background-position-y: top;
}
body {}
|
Grundlegende Eigenschaften des Blogs
|
a:link {}
|
Eigenschaften der Links
|
a:visited {}
|
Eigenschaften der bereits besuchten Links
|
a:hover {}
|
Eigenschaften der Links, wenn man mit der Maus darüberfährt
|
a img {}
|
Eigenschaften der Bilder, die sich im Blog befinden und eine Verlinkung aufweisen
|
/* Header
-----------------------------------------------*/
|
/* Oberer Teil
-----------------------------------------------*/
|
#header-wrapper {}
|
Eigenschaften des Header-Bereichs
|
#header-inner {}
|
Eigenschaften für die Dinge, die sich im Header befinden
|
#header {}
|
Grundlegende Eigenschaften des Headers
|
#header h1 {}
|
Eigenschaften für Blogtitel im Header
|
#header a {}
|
Eigenschaften aller Links im Header (inkl. Blogtitel)
|
#header a:hover {}
|
Eigenschaften aller Links im Header (inkl. Blogtitel), wenn man mit der Maus darüberfährt
|
#header .description {}
|
Eigenschaften für die Blogbeschreibung unter dem Header
|
#header img {}
|
Eigenschaften für das Headerbild
|
/* Outer-Wrapper
----------------------------------------------- */
|
/* Hauptteil
----------------------------------------------- */
|
#outer-wrapper {}
|
Eigenschaften für den Gesamten Bereich (Sidebar+Haupbereich)
|
#main-wrapper {}
|
Eigenschaften für den Hauptbereich (Postbereich)
|
#sidebar-wrapper {}
|
Eigenschaften für den Sidebar-Bereich
|
/* Headings
----------------------------------------------- */
|
/* Überschriften
----------------------------------------------- */
|
h2 {}
|
Eigenschaften für Sidebartitel, Datum und “Überschrift” im Postbereich
|
/* Posts
-----------------------------------------------*/
|
/* Postbereich
-----------------------------------------------*/
|
h2.date-header {}
|
Eigenschaften für das Datum
|
.post {}
|
Eigenschaften für den Postbereich
|
.post h3 {}
|
Eigenschaften für Posttitel & Seitentitel auf der Startseite und (vor allem) auf der Postseite/Seite
|
.post h3 a, .post h3 a:visited, .post h3 strong {}
|
Eigenschaften für den Posttitel auf der Startseite
|
.post h3 strong, .post h3 a:hover {}
|
Eigenschaften für den Posttitel auf der Startseite, wenn man mit der Maus darüber fährt
|
.post-body {}
|
Eigenschaften für den einzelnen Postbereich
|
.post-body blockquote {}
|
Eigenschaften für Zitate
|
.post-footer {}
|
Eigenschaften für den unteren Teil des Posts
|
.comment-link {}
|
Eigenschaften für den Link zu den Kommentaren
|
.post img, table.tr-caption-container {}
|
Eigenschaften für die Bilder im Postbereich
|
.tr-caption-container img {}
|
Keine Angabe*
|
.post blockquote {}
|
Eigenschaften für die Zitate
|
.post blockquote p {}
|
Eigenschaften für Absätze in den Zitaten
|
/* Comments
----------------------------------------------- */
|
/* Kommentare
----------------------------------------------- */
|
#comments h4 {}
|
Eigenschaften für die Überschrift oberhalb des Kommentarbereichs
|
#comments-block {}
|
veraltet - keine Funktion**
|
#comments-block .comment-author {}
|
veraltet - keine Funktion**
|
#comments-block .comment-body {}
|
veraltet - keine Funktion**
|
#comments-block .comment-footer {}
|
veraltet - keine Funktion**
|
#comments-block .comment-body p {}
|
veraltet - keine Funktion**
|
.deleted-comment {}
|
Eigenschaften der gelöschten, sichtbaren Kommentaren
|
.feed-links {}
|
Keine Angabe*
|
#blog-pager-newer-link {
|
Eigenschaften für den Link "Neuere Posts" am Ende des Blogs
|
#blog-pager-older-link {}
|
Eigenschaften für den Link "Ältere Posts" am Ende des Blogs
|
#blog-pager {}
|
Eigenschaften für den Link "Startseite" am Ende des Blogs
|
/* Sidebar Content
----------------------------------------------- */
|
/* Sidebar
----------------------------------------------- */
|
.sidebar {}
|
Grundlegende Eigenschaften für die Sidebar
|
.sidebar ul {}
|
Eigenschaften für alle ungeordneten Listen der Sidebar
|
.sidebar li {}
|
Eigenschaften für alle Punkte in den Listen der Sidebar
|
.sidebar .widget. .main .widget {}
|
Eigenschaften für alle Gadgets in der Sidebar und im Postbereich
|
.main .Blog {}
|
Eigenschaften für den Postbereich
|
/* Profile
----------------------------------------------- */
|
/* Profilgadget
----------------------------------------------- */
|
.profile-img {}
|
Eigenschaften für das Bild im Profilgadget
|
.profile-data {}
|
Eigenschaften für die Überschrift im Profilgadget
|
.profile-datablock {}
|
Eigenschaften für die Überschrift im Profilgadget
|
.profile-textblock {}
|
Eigenschaften für den Text im Profilgadget
|
.profile-link { }
|
Eigenschaften für die Links im Profilgadget
|
/* Footer
----------------------------------------------- */
|
/* Unterer Teil des Blogs
----------------------------------------------- */
|
#footer {}
|
Eigenschaften für den unteren Teil des Blogs
|
b{
...
}
i{
...
}
u{
...
}
<b>Dein Text</b>
<u>Dein Text</u>
<i>Dein Text</i>
Der Text hier ist normal, aber ab <b>hier sieht es anders aus</b>. Jetzt ist es wieder normal.
Selektor {
Attribut: Wert;
}
width: 50px;
height: 5em;
width: 100%;
height: auto;
border-top: 1px solid #000000;
border-left: 3px dashed rgb(174, 255, 7);
border-right: 5px dotted #ffffff;
background-color: #ffffff;
background-color: rgb(0, 0, 0);
font-size: 5em;
font-size: 15px;
color: #ccdd66;
text-align: left;
text-transform: uppercase;
font-family: 'Verdana', sans-serif;
letter-spacing: 0.5em;
letter-spacing: 1px;
