Podstawowa gramatyka CSS

CSS 语法

Reguły CSS składają się z dwóch głównych części: selektora oraz jednej lub kilku deklaracji.

selector {declaration1; declaration2; ... declarationN }

Selektor jest zazwyczaj HTML-em elementu, którego styl chcesz zmienić.

Każda deklaracja składa się z atrybutu i wartości.

Atrybut (property) to styl, który chcesz ustawić. Każdy atrybut ma wartość. Atrybut i wartość są oddzielone dwukropkiem.

selector {property: value}

To wiersz kodu ustawia kolor tekstu elementu h1 na czerwony i ustawia rozmiar czcionki na 14 pikseli.

W tym przykładzie, h1 jest selektorem, color i font-size to atrybuty, red i 14px to wartości.

h1 {color:red; font-size:14px;}

Poniższy diagram pokazuje strukturę powyższego kodu:

CSS 语法

Wskazówka:Użyj nawiasów kwadratowych, aby otoczyć deklaracje.

Różne formy zapisu i jednostki wartości

Oprócz angielskiego słowa red, możemy użyć wartości szesnastkowej #ff0000:

p { color: #ff0000; }

Aby oszczędzić bajty, możemy użyć skróconej formy CSS:

p { color: #f00; }

Możemy użyć dwóch metod do użycia wartości RGB:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

Proszę zauważyć, że przy użyciu RGB w procentach, nawet jeśli wartość wynosi 0, należy napisać symbol procentu. W innych przypadkach nie jest to konieczne. Na przykład, gdy rozmiar wynosi 0 pikseli, po 0 nie należy używać jednostki px, ponieważ 0 jest 0, niezależnie od jednostki.

Pamiętaj, aby napisać cudzysłów

Wskazówka:Jeśli wartość składa się z kilku słów, wartość należy otoczyć cudzysłowami:

p {font-family: "sans serif";}

Wielokrotne deklaracje:

Wskazówka:Jeśli chcesz zdefiniować więcej niż jedną deklarację, każda z nich powinna być oddzielona średnikiem. Poniższy przykład pokazuje, jak zdefiniować centralnie wyśrodkowany akapit z czerwonym tekstem. Ostatnie zasada mówi, że nie jest konieczne dodawanie średnika, ponieważ średnik w języku angielskim jest znakiem rozdzielczym, a nie końcowym. Jednak większość doświadczonych projektantów dodaje średnik na końcu każdej deklaracji, co zmniejsza ryzyko błędów, gdy dodajesz lub usuwasz deklaracje z istniejących zasad. Jak tutaj:

p {text-align:center}; color:red;}

Powinieneś opisywać każdą właściwość w wierszu, aby zwiększyć czytelność definicji stylu, jak tutaj:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

Spacje i wielkość liter

Większość arkuszy stylów zawiera więcej niż jedno reguły, a większość reguł zawiera więcej niż jedną deklarację. Użycie wielokrotnych deklaracji i spacji ułatwia edycję arkuszy stylów:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

Czy zawartość pustka wpływa na działanie CSS w przeglądarkach, tak samo, w przeciwieństwie do XHTML, CSS nie jest wrażliwy na wielkość liter. Jednak istnieje wyjątek: jeśli chodzi o pracę z dokumentami HTML, nazwy klas i id są wrażliwe na wielkość liter.