Harmonogram kursów

Zaawansowane kursy CSS

• Dodatkowa lektura CSS
• Wprowadzenie do CSS
• Podstawowa gramatyka CSS
• Zaawansowana gramatyka CSS
• Wybieranie potomków CSS
• Wybieranie elementów id CSS
• Wybieranie elementów klasy CSS
• Tworzenie CSS
• Tło CSS
• Tekst CSS
• Czcionki CSS
• Listy CSS

Model ramki CSS

• Podsumowanie modelu ramy CSS
• Wewnętrzne marginesy CSS
• Krawędzie CSS
• Zewnętrzne marginesy CSS
• Scalanie zewnętrznych marginesów CSS

Umieszczanie CSS

• Podsumowanie pozycjonowania CSS
• Pozycjonowanie względne CSS
• Pozycjonowanie absolutne CSS
• Przepływ CSS

Wybieracz CSS

• Wybieranie elementów CSS
• Grupowanie selektorów CSS
• Szczegółowe wyjaśnienie selektorów klas CSS
• Szczegółowe wyjaśnienie selektorów id CSS
• Szczegółowe wyjaśnienie selektorów atrybutów CSS
• Wybieranie potomków CSS
• Wybieranie elementów potomnych CSS
• Wybieranie sąsiadów CSS

Kursy wybieralne

Polecane kursy:

• Skarbiec CodeW3C.com

Krawędź elementu (border) to linia lub linie otaczające zawartość elementu i marginesy wewnętrzne.

Atrybut 'border' CSS pozwala określić styl, szerokość i kolor krawędzi elementu.

Krawędzie CSS

W HTML-u używamy tabeli do tworzenia krawędzi wokół tekstu, ale dzięki atrybutom krawędzi CSS możemy tworzyć świetne efekty krawędzi, które można zastosować do każdego elementu.

Zewnętrzny margines elementu to krawędź elementu (border). Krawędź elementu to linia lub linie otaczające zawartość elementu i marginesy wewnętrzne.

Każda krawędź ma trzy aspekty: szerokość, styl oraz kolor. W dalszej części wyjaśnimy te trzy aspekty szczegółowo.

Krawędź a tło

Specyfikacja CSS wskazuje, że krawędzie rysują się 'nad tłem elementu'. To jest bardzo ważne, ponieważ niektóre krawędzie są 'przerwane' (na przykład, krawędź punktowa lub krawędź przerywana), tło elementu powinno pojawiać się między widocznymi częściami krawędzi.

Specyfikacja CSS wskazuje, że tło rozciąga się tylko do marginesów wewnętrznych, a nie do krawędzi. Później CSS2.1 wprowadziło poprawkę: tło elementu jest tłem zawartości, marginesów wewnętrznych i obszaru krawędzi. Większość przeglądarek zgodnych z CSS2.1, ale niektóre starsze przeglądarki mogą zachowywać się inaczej.

Styl krawędzi

Styl jest jednym z najważniejszych aspektów ramki, nie tylko dlatego, że kontroluje wyświetlanie krawędzi (chociaż styl rzeczywiście kontroluje wyświetlanie krawędzi), ale także dlatego, że bez stylu nie byłoby wcale krawędzi.

Styl CSS Atrybut 'border-style'Zdefiniowano 10 różnych stylów, w tym 'none', które nie są dziedziczone.

Na przykład, możesz ustawić krawędź obrazu na 'outset', aby wyglądał jak 'wydatny przycisk':

a:link img {border-style: outset;}

Definicja wielu stylów

Możesz zdefiniować wiele stylów dla jednej krawędzi, na przykład:

p.aside {border-style: solid dotted dashed double;}

Poniższe reguły definiują cztery różne style krawędzi dla akapitów o klasie 'aside': krawędź solid, krawędź dotted, krawędź dashed i krawędź double.

Znowu zauważyliśmy, że wartości tutaj są ustawione w kolejności top-right-bottom-left, a ta kolejność była również widoczna podczas dyskusji o ustawianiu różnych wewnętrznych marginesów za pomocą wielu wartości.

Definicja stylu jednostronnego

Jeśli chcesz ustawić styl krawędzi ramki elementu, zamiast stylu krawędzi wszystkich czterech boków, możesz użyć poniższych atrybutów jednostronnych stylów krawędzi:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Zatem te dwa metody są równoważne:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Uwaga:Jeśli chcesz użyć drugiego sposobu, musisz umieścić pojedyncze atrybuty po skróconym atrybucie. Ponieważ jeśli umieścisz pojedyncze atrybuty przed border-style, wartość skróconego atrybutu zastąpi pojedyncze wartości none.

Szerokość krawędzi

Możesz to zrobić poprzez Atrybut border-widthOkreślenie szerokości krawędzi.

Możesz określić szerokość krawędzi na dwa sposoby: możesz指定长度值，such as 2px or 0.1em; or use one of the three keywords, which are thin, medium (default) and thick.

Uwaga:CSS nie definiuje konkretnych szerokości dla 3 kluczowych wartości, więc jeden agent użytkownika może ustawić thin, medium (domyślna wartość) i thick odpowiednio na 5px, 3px i 2px, podczas gdy inny agent użytkownika może je ustawić na 3px, 2px i 1px.

Więc możemy ustawić szerokość krawędzi w ten sposób:

p {border-style: solid; border-width: 5px;}

Albo:

p {border-style: solid; border-width: thick;}

Definiowanie szerokości jednej strony

Możesz ustawić szerokość każdej strony elementu w kolejności top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

Powyższy przykład można również skrócić w ten sposób (ten sposób zapisu nazywa sięKopiowanie wartości）：

p {border-style: solid; border-width: 15px 5px;}

Możesz również ustawić szerokość każdej strony krawędzi za pomocą następujących atrybutów:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Zatem, poniższe reguły są równoważne z powyższym przykładem:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

Brak krawędzi

W poprzednim przykładzie zobaczyłeś, że aby wyświetlić jakąkolwiek krawędź, musisz ustawić styl krawędzi, na przykład solid lub outset.

Więc jeśli ustawisz border-style na none, co się stanie?

p {border-style: none; border-width: 50px;}

Choć szerokość ramki wynosi 50px, styl ramki jest ustawiony na none. W tym przypadku nie tylko styl ramki znika, ale szerokość również staje się 0. Ramka znika, dlaczego?

To dlatego, że jeśli styl ramki to none, czyli ramka w ogóle nie istnieje, ramka nie może mieć szerokości, więc szerokość ramki jest automatycznie ustawiona na 0, niezależnie od tego, jak wcześniej ją zdefiniowałeś.

Pamiętaj o tym, to jest bardzo ważne. W rzeczywistości, zapomnienie o zadeklarowaniu stylu ramki to często popełniany błąd. Według poniższych zasad, wszystkie elementy h1 nie będą miały żadnych ram, nie mówiąc już o szerokości 20 pixeli:

h1 {border-width: 20px;}

Ponieważ wartość domyślna border-style to none, jeśli nie zadeklarowano stylu, jest to równoważne border-style: none.Dlatego, jeśli chcesz, aby ramka była widoczna, musisz zadeklarować styl ramki.

kolor ramki

Ustawienie koloru ramki jest bardzo proste. CSS używa prostego Właściwość border-colormoże przyjąć maksymalnie 4 wartości koloru.

Można używać dowolnego typu wartości koloru, na przykład można to być nazwa koloru, wartość szesnastkowa lub wartość RGB:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

Jeśli wartość koloru jest mniejsza niż 4, działa wartość kopiowania. Na przykład poniższe deklaracje reguł określają, że górna i dolna ramka akapitu jest niebieska, a boczne ramki są czerwone:

p {
  border-style: solid;
  border-color: blue red;
  }

Uwaga:Domyślny kolor ramki to kolor tła elementu. Jeśli nie zadeklarowano koloru ramki, będzie on taki sam jak kolor tekstu elementu. Z drugiej strony, jeśli element nie ma żadnego tekstu, zakładając, że jest to tabela, która zawiera tylko obrazy, kolor ramki tej tabeli będzie kolorem tekstu jej elementu nadrzędnego (ponieważ color można dziedziczyć). Ten element nadrzędny to prawdopodobnie body, div lub inna tabela.

Definiowanie koloru jednej strony

Istnieją również właściwości koloru ramki po jednej stronie. Ich zasada działania jest taka sama jak dla pojedynczych stylów i szerokości:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Aby określić dla elementu h1 prostą czarną ramkę, a prawą ramkę jako prostą czerwona, można to określić w ten sposób:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Przejrzysta ramka

Mówiliśmy wcześniej, że jeśli ramka nie ma stylu, nie ma szerokości. Jednak w niektórych przypadkach możesz chcieć utworzyć niewidzialną ramkę.

CSS2 wprowadził wartość koloru ramki transparent. Ta wartość służy do tworzenia niewidzialnych ramek o szerokości. Spójrz na poniższy przykład:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

Zdefiniowaliśmy takie style dla powyższych linków:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Spróbuj sam

W pewnym sensie, użycie transparent, to jak dodatkowy wewnętrzny margines; dodatkowo ma to zaletę, że można go łatwo uczynić widocznym. Przezroczysta ramka jest podobna do marginesu wewnętrznego, ponieważ tło elementu rozciąga się do obszaru ramki (jeśli jest widoczne tło).

Ważne:Przed IE7, IE/WIN nie udostępniał wsparcia dla transparent. W wcześniejszych wersjach, IE ustawił kolor ramki na podstawie wartości color elementu.

Atrybuty obramowania CSS

Narzędzia

Podręcznik CSS

Przykłady CSS

Test CSS

Kurs CSS

Linki sponsorowane