Inne działy

 

Włączenie CSS - kojarzenia stylów

 

Istnieją cztery sposoby kojarzenia stylów z dokumentem HTML. Najczęściej stosową metodą jest zastosowanie wewnętrznego stylu CSS i zewnętrzny arkusz CSS.

 

Osadzony CSS – element <style>

Style CSS można umieścić w dokumencie HTML za pomocą elementu <style>. Ten znacznik jest umieszczony wewnątrz tagów <head>...</head>. Zasady zdefiniowane przy użyciu składni zostaną zastosowane do wszystkich elementów w dokumencie. Oto ogólna składnia:

 

<head>
<style type="text/css" media="...">
Opcje stylu
............
</style>
</head>

 

Atrybuty:

Atrybuty związane z elementem <style> znajdują się poniżej:

AtrybutyWartośćOpis
 type  text/css  Określa język arkuszy stylów, jako content-type (typ MIME). Jest to wymagany atrybut.
 media screen
tty
tv
projection
handheld
print
braille
aural
all
Określa urządzenie, na którym dokument będzie wyświetlany. Domyślna wartość jest all. Jest to opcjonalny atrybut.

 

Przykład:

Oto przykład składni CSS dla stylu osadzonego wewnątrz elementu <head>:

 

<head>
<style type="text/css" media="all">
h1{
color: #36C;
}
</style>
</head>

 

Atrybut style – wewnętrzny CSS

Za pomocą atrybutu stylu można zdefiniować styl dla dowolnego elementu HTML. Te reguły zostaną zastosowane tylko do tego elementu. Oto ogólna składnia:

 

<element style="...style rules....">

 

Atrybuty: 

AtrybutyWartośćOpis
 style  style rules  Wartości atrybutu stylu są oddzielone średnikami (;).

 

Przykład:

Oto przykład wewnętrznego stylu CSS w oparciu o powyższą składnię:

<h1 style ="color:#36C;"> To jest wewnętrzny CSS </h1>

 Poniżej wynik działania kodu:

 

To jest wewnętrzny CSS

 

 

 Zewnętrzny styl CSS - Element <link>:

Element<link> służy, aby dołączyć zewnętrzny plik arkusza stylów do dokumentu HTML.

Zewnętrzny arkusz stylów jest to oddzielny plik tekstowy z rozszerzeniem .css. Należy zdefiniować wszystkie reguły stylu w tym pliku tekstowym i można dołączyć ten plik w każdym dokumencie HTML za pomocą elementu <link>.

Oto ogólna składnia zewnętrznego pliku CSS: 

<head>
<link type="text/css" href="/..." media="..." />
</head>

 

Atrybuty:

Atrybuty związane z elementem <style>:

AtrybutyWartośćOpis
 type  text/css Określa język arkuszy stylów, jako content-type (typ MIME). Ten atrybut jest wymagany.
 href  URL Określa zasady stylu pliku arkusza stylów. Ten atrybut jest wymagany.
 media screen
tty
tv
projection
handheld
print
braille
aural
all
Określa urządzenie, na którym dokument będzie wyświetlany. Domyślna wartość jest all. Jest to opcjonalny atrybut.

 

Przykład:

Rozważmy prosty plik arkusza stylów o nazwie mojstyl.css z następującymi regułami:

h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

 Teraz można dołączyć plik mojstyl.css w każdym dokumencie HTML w następujący sposób:

<head>
<link type="text/css" href="/mojstyl.css" media="all" />
</head>

 

 Zaimportowany arkusz CSS - zasady @import:

 

Reguła @import jest używana do importowania zewnętrznego arkusza stylów w sposób podobny do elementu <link>. Oto ogólna składnia reguły @import.

 

<head>
<@import "URL";
</head>

 Tutaj adres URL to adres URL pliku arkusza stylów. Można użyć także innej składni:

<head>
<@import url("URL");
</head>

 

Przykład:

Poniżej znajduje się przykład pokazujący jak zaimportować plik arkusza stylów w dokumencie HTML: 

<head>
@import "mojstyl.css";
</head>

 

Reguły CSS przesłanianie:

Omówiliśmy cztery sposoby, aby zastosować arkusz stylów w dokumencie HTML. Oto reguły, które zastąpią wszelkie reguły arkuszu stylu.

  • Wszelkie wbudowane arkusze stylów mają najwyższy priorytet. Tak to zastępują reguły zdefiniowane w tagach <style>...</style> lub w zewnętrznym pliku arkuszu stylów.
  • Reguły zdefiniowane w tagach <style>...</style> zastępują reguły zdefiniowane w każdym zewnętrznym pliku arkusza stylów.
  • Reguły zdefiniowane w zewnętrznym pliku arkusza stylów mają najniższy priorytet i zasady określone w tym pliku będą stosowane tylko wtedy, gdy powyższe dwie zasady nie obowiązują.

 

Obsługa starych przeglądarek:

Istnieje jeszcze wiele starych przeglądarek, które nie obsługują CSS. Więc powinniśmy o nie zadbać podczas pisania naszych stylów CSS w dokumencie HTML. Poniższy fragment kodu pokazuje, jak można użyć znaczników komentarzy, aby ukryć CSS w starszych przeglądarkach:

 

<style type="text/css">
<!--
body, td {
   color: blue;
}
-->
</style>

 

Komentarze w CSS:

Wiele razy potrzebujesz umieścić dłuższe dodatkowe komentarze w arkusz stylu. Jest to bardzo łatwe w każdej części arkuszu stylów. Proste komentarze możesz umieścić wewnątrz znaków / *...to jest komentarz w arkuszu stylu...*/.

Można użyć znaków / *... * / aby zastosować blokowy komentarz wieloliniowy w podobny sposób, jak w językach programowania C i C++.

 

/* To jest zewnętrzny plik arkusza stylów */
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
/* koniec arkusza stylów. */

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.