Bizeso |  Trademingle |  36property |  Fverse |  LINAWOT Register | Sign In
bizeso
Blog Home |  My Blog |  Create Blog |  Manage Blog  |  My Favorite Blog 
  All Category
Social
Untitled Page
Business Special
Untitled Page
Business Other
Untitled Page
  Archive
 
August 2016
July 2016
June 2016
May 2016
April 2016
March 2016
February 2016
January 2016
December 2015
November 2015
October 2015
September 2015
     
   Blogs Details
  Favorite
Tuur
Kontrolowanie wygladu elementu HTML za pomoca atrybutu "style"
Kontrolowanie wygladu elementu HTML za pomoca atrybutu "style"
Blog Url: http://blog.bizeso.com/ Kontrolowanie-wygladu-elementu-HTML-za-pomoca-atrybutu-"style"
Tags: strony www
Category: Woman entrepreneurs
Kudos: 2           Views: 40           Comments: 0
Description: W tej części kursu CSS zapoznamy się z pierwszym sposobem, dzięki któremu będziemy mogli wpływać na wygląd elementów HTML.

W realnym świecie, gdy chcemy zmienić kolor kartki papieru, to możemy dokonać tego na kilka sposobów, np. pomalować kartkę kredką lub użyć do tego celu pędzla i farb albo zanurzyć całą kartkę w farbie.

Język CSS oferuje nam kilka sposobów, dzięki którym możemy zmienić wygląd danego elementu HTML bądź grupy elementów HTML.

Jednym ze sposobów formatowania właściwości wyglądu elementu HTML jest dodanie do niego atrybutu style wraz z właściwościami i wartościami jakie chcemy zmienić w wyglądzie danego elementu HTML.

Atrybut w języku HTML ma następującą składnię: atrybut="wartość"

W tym wypadku naszym atrybutem będzie atrybut style, a jego wartością będą właściwości oraz wartości CSS służące do zmiany domyślnego wyglądu danego elementu HTML.

Pod spodem znajdują się element div oraz p, które zostały umieszczone w elemencie body.


to jest element - p - umieszczony w elemencie - body




to jest element - div - umieszczony w elemencie - body




Po wyświetleniu naszych przykładowych elementów HTML w oknie przeglądarki internetowej zobaczymy po prostu dwie linijki tekstu.

to jest element - p - umieszczony w elemencie - body
to jest element - div - umieszczony w elemencie - body

Naszym celem w tej części kursu CSS będzie dodanie do elementów div oraz p nowych właściwości CSS, które zmienią wygląd tych elementów HTML. Wykorzystamy do tego celu atrybut style, który należy dodać bezpośrednio do znacznika danego elementu (wraz z właściwościami i wartościami odpowiadającymi za zmianę cech wyglądu).

Wspomniana czynność została przedstawiona w kodzie HTML, który został umieszczony poniżej:


to jest element - p - umieszczony w elemencie - body




to jest element - div - umieszczony w elemencie - body




Jak możemy zauważyć w kodzie HTML, który został zaprezentowany powyżej, atrybut style należy umieścić w znaczniku rozpoczynającym dany element HTML, a właściwości i wartości należy umieścić w cudzysłowie. Pomiędzy atrybutem style, a cudzysłowem, należy umieścić znak równości, czyli =, dzięki czemu do atrybutu style zostaną przypisane różne właściwości CSS, które od tej pory będą odpowiadać za wygląd danego elementu HTML.

Za pomocą atrybutu style, właściwości border oraz wartości 1px solid black, dodaliśmy do elementu p obramowanie.

Za pomocą atrybutu style, właściwości background-color oraz wartości lightblue, zmieniliśmy kolor tła elementu div na jasnoniebieski.

Od tej pory nasze przykładowe elementy HTML prezentują się następująco:

to jest element - p - umieszczony w elemencie - body
to jest element - div - umieszczony w elemencie - body

Metoda, którą poznaliśmy w tej części kursu CSS ma swoje zalety oraz wady.

Zalety tej metody:

nie musimy posługiwać się selektorami CSS (jednak nieznajomość selektorów CSS jest naszą wadą)
właściwości CSS umieszczone w atrybucie style mają pierwszeństwo przed właściwościami CSS, które znajdują się w innym miejscu pliku HTML lub pliku CSS (to zagadnienie wyjaśnimy sobie w innej części tego kursu CSS)

Wady tej metody:

zbyt wiele właściwości CSS umieszczonych w atrybucie style i zbyt duża liczba tych atrybutów w dokumencie HTML wprowadzają "wizualny chaos", przez co kod HTML staje się nieczytelny i mało przejrzysty
brak skutecznej kontroli wyglądu danej grupy elementów w większej liczbie dokumentów HTML

Wyobraźmy sobie, że za pomocą tej metody stworzyliśmy menu, które znajduje się w kilkuset dokumentach HTML.

Co się stanie, gdy będziemy chcieli zmienić wygląd w tym menu?

Musielibyśmy zrobić to kilkaset razy lub musielibyśmy skorzystać z jakiś dodatkowych narzędzi. Na szczęście istnieje inna metoda kontrolowania wyglądu tych samych elementów znajdujących się w większej liczbie dokumentów HTML. Jest to zewnętrzny kaskadowy arkusz stylów CSS, który poznamy w innej części tego kursu CSS.

W następnej części kursu CSS poznamy sposób tworzenia stylów CSS, czyli reguł CSS, za pomocą których będziemy mogli określać unikalny wygląd dla poszczególnych elementów HTML.

Zrodlo:http://kodcss.pl/kurs-css/lekcje/dzial-1/atrybut-style
budowa stron internetowych
Posted by: Tuur
NY, United States
Saturday, January 16, 2016
Post Comment
  (Max 200 characters)
Comment:

No comment posted  

Advertise with Us  -  About Us  -  Career with Us  -  Feedback  -  Contact Us  -  Private Policy  -  Terms of Use  -  Site Map

GROUP PORTALS :    36property.com - Buy/Sell/Rent and Lease out property  |  TradeMingle.com - Buy Sell your products  |  Fverse.com - Freelancer's Universe  |  LINAWOT.com - Online Dating Service
GROUP SUB PORTALS :   Jobs |  Art |  Entertainment |  Tender |  Advertising |  TradeShow |  Loans |  Insurance |  New Ideas |  Business Partners |  Investors |  Franchise
OTHER SERVICES :   Blog |  Flock |  Forum |  Chat |  Video |  Music |  Photoshare |  Poll |  Business Plan |  Mail |  Events |  Business Meeting

bizeso
 A BIZESO Group Company
Copyright © 2011 Bizeso Web Service Pvt. Ltd. All Rights Reserved.