CSS, czyli wygląd strony w jednym pliku – wprowadzenie

Autorzy: Error parsing XSLT file: \xslt\Elements/ath.Elements.GetAuthorsList.xslt


ASP.NET, CSS


Załóżmy, że jesteśmy webmasterami serwisu internetowego, który składa się z wielu podstron. Postanawiamy na przykład zmienić wielkość czcionki oraz jej kolor. Edycja każdej strony z pewnocią była by bardzo monotonna i zajęła by dużo czasu. Aby ułatwić pracę webmasterom, powstały Kaskadowe Arkusze Stylów, zwane CSS (z ang. Cascading Style Sheets). Pozwalają one w szybki i prosty sposób zarządzać wyglądem strony. W poniższym artykule przedstawimy receptę na to jak dołączyć plik CSS do strony WWW oraz przykładowy sposób formatowania tekstu.

Wstęp

Zacznijmy od utworzenia nowego projektu strony internetowej w MS Visual Studio.01_new_project

W Solution Explorer klikamy prawym przycisiem myszy (ppm) na wygenerowanym projekcie i spośród dostępnych opcji wybieramy Add New Item, i dodajemy Web Form.

02_add_new_item

 

Po dodaniu strony, wygenerowany został jej domyślny kod, w którym pomiędzy znacznikami <div></div> dopisujemy:

<h1>Nagłówek h1</h1>
<h2>Nagłówek h2</h2>
<h3>Przykładowy tekst - h3</h3>
<h4>Ala ma Kota</h4>

Naciskając kombinację klawiszy Ctrl + F5 przechodząc w ten sposób do podglądu strony w przeglądarce internetowej. W rezultacie pownniśmy otrzymać tekst sformatowany jak na rysunku poniżej.

03_przyklad

Tworzenie CSS

Chcąc dodać do naszego projetu styl (plik CSS) klikamy ppm na jego węźle i wybieramy opcję Add New Item. Tym razem skorzystamy z szablonu Style Sheet.

04_add_css

Po kliknięciu przycisku "Add" w naszym projekcie pojawił się nowy plik. Wystarczy teraz, że przeciągniemy go z okna Solution Explorer do sekcji <head> tworzonej przez nas strony.

05_move

Jak widać, nic trudnego. Spróbujmy teraz dodać do niego kilka odpowiednich wpisów, by zmienić domyśly wygląd naszego tekstu. Kliknijmy zatem dwukrotnie na nasz plik, by otworzyć jego zawartość.

Na przykład, by zmienić kolor tła naszej strony wpisujemy w pliku poniższe linie:

body 
{
	background-color: #98e2c9;
}

Oczywiście zamiast hexadecymalnego zapisu koloru, możemy również wpisać jego angielską nazwę, np. Red, Green, Yellow, Blue. Skoro zmieniliśmy już kolor tła, przejdźmy do formatowania tekstu. Przykładowo, jeśli chcemy, aby tekst, który wpisaliśmy w tagach <h1> był napisany czcionką Arial, o rozmiarze 28px, pochylony oraz w kolorze zielonym, wystarczy do pliku css dopisać następujący kod:

h1
{
	font-size: 28px;
	font-family: Arial;
	font-style: italic;
	color: Green;
}

Przy okazji pozostałe teksty możemy sformatować na podobnej zasadzie:

h2
{
	font-family: Tahoma;
	font-size: 13px;
	color: Red;
	font-variant: small-caps;
}

h3
{
	font-family: Courier New;
	font-style: oblique;
	font-weight: bold;
	color: Yellow;
}
h4
{
	font-family: Lucida Console;
	font-size: 24px;
	font-style: normal;
	background-color: Aqua;
	color: Blue;
	background-color: Gray;
}

W efekcie końcowym, tekst powinien prezentowac się następująco:

06_end

Podsumowanie:
W artylkule przedstawiono podstawy pracy z plikami CSS. W jaki sposób je zamieścić w naszej stronie oraz zilustrowano przykładowe fomratowanie tekstu. Było to jedynie krótkie wprowadzenie, przydatne dla początkowych webmasterów. Autor zapowiada publikację kolejnych artykułów na ten temat niebawem.

Liczba ocen: 20 | Średnia ocen: 3.75

Czytaj także

 

Skomentuj

Twój komentarz
Dodaj

Komentarze

Nasz Fanpage

Popularne treści

  • .NET  
  • 3D  
  • 8  
  • ActiveDirectory  
  • AJAX  
  • amazon web services  
  • Android  
  • Android Market  
  • AngularJS  
  • Animacja  
  • API  
  • aplikacje  
  • Aplikacje wielojęzyczne  
  • asembler  
  • ASHX  
  • ASP.NET  
  • ASP.NET MVC  
  • assembler  
  • Automated Installation Kit  
  • Azure  
  • bezpieczeństwo  
  • bing  
  • Blender  
  • C#  
  • certyfikat  
  • chmura  
  • cloud computing  
  • cmd  
  • Cmdlet  
  • Cmdlet’ów  
  • core  
  • CSS  
  • Cycles  
  • developer  
  • Entity Framework  
  • Expression Blend  
  • fitl  
  • google  
  • google app engine  
  • googlemaps  
  • GPU  
  • Grafika  
  • GroupPolicy  
  • hamachi  
  • hyperv  
  • hyper-v  
  • IaaS  
  • ImageX  
  • instalacja aplikacji  
  • interface  
  • interfejs  
  • Iron Speed  
  • java  
  • JavaScript  
  • jQuery  
  • Kinect  
  • Knockout  
  • kolokacja  
  • konsola  
  • LINQ  
  • LINQ to SQL  
  • Linux  
  • MakeCert  
  • maps  
  • microsoft  
  • mobile  
  • moduły  
  • MVC  
  • mySQL  
  • OpenSource  
  • openstreet  
  • openvpn  
  • PaaS  
  • partycja  
  • PHP  
  • pliki apk  
  • pon  
  • powershell  
  • preview  
  • programowanie  
  • przeglądarka  
  • przetwarzanie w chmurze  
  • przewodnik  
  • Qt  
  • RAD  
  • Rendering  
  • SaaS  
  • script  
  • SDK  
  • server  
  • serwer  
  • Skalowanie  
  • SQL  
  • Systemy operacyjne  
  • światłowody  
  • Światłowód  
  • Template  
  • ubuntu  
  • virtual  
  • Visual Studio  
  • vpn  
  • WAIK  
  • WCF  
  • WebAdministration  
  • WebApi  
  • Windows  
  • windows azure  
  • Windows PE  
  • Windows Phone  
  • WinFroms  
  • wirtualizacja  
  • WPF  
  • XAML  
  • zdalny  
  • zdjęcia  
Komu polecasz tą stronę? (email)
Poleca (twoje imie/pseudonim)
Treść (opcjonalnie) Do Twojej treści zostanie dodany link polecanej strony
POLECAM