Vendosja e prapavijes (Background)

Slides:



Advertisements
Similar presentations
HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
Advertisements

Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.
CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
Very quick intro HTML and CSS. Sample html A Web Title.
Part 5 Introduction to CSS. CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line.
Links.  Styling Links  Links can be styled with any CSS property (e.g. color, font-family, background-color).  Special for links are that they can.
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red“ Example h1.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
Designing Web Pages The case for CSS. The Power of CSS css Zen Garden
LT: I can use CSS to decorate a web page. Do Now: Get your storyboard, and log in to winhome. Write our a list of colors you want in your website. (Minimum.
1 Cascading Style Sheets
WebD Introduction to CSS By Manik Rastogi.
Cascading Style Sheets (CSS) Internal Style Sheets Classes
IS1500: Introduction to Web Development
Style Sheets.
( Cascading style sheet )
Creating Your Own Webpage
CSS Rule Selector Declaration Block Value Attribute Name body {
CS1220 Web Programming Saloni Chacha.
>> The “Box” Model
CSS.
>> CSS Rules Selection
Introduction to Web programming
Vendosja e Headers dhe Footers
Principles of Software Development
CASCADING STYLE SHEET CSS.
TIK 12 – Prof. Blerand Koshi
SH.M.U-2 Tema:WEB Shfletuesit Nxënësi:Elbaroza Bunjaku Arsimtari:Muhamer.
Introduction to Web programming
TIK 12 – Prof. Blerand Koshi
CSS – Cascading Style Sheet DOM – Document Object Model
Insertimi i hapësirave dhe kalimi në kryerresht
The Internet 10/13/11 The Box Model
Insertimi i audiove/videove
CSS Borders and Margins.
TIK 12 – Prof. Blerand Koshi
DynamicHTML Cascading Style Sheet Internet Technology.
5.2.3 Be able to use HTML and CSS to construct web pages
CS134 Web Design & Development
Konfigurmi I Windows-it Control Panel
Shmu2 Lënda: Informatikë Tema: Programi i Power Ponit Klasa: IX-4
Web Protocols, Technologies and Applications
Creating a Webpage with External CSS
Working with Cascading Style Sheets (CSS)
Working with Cascading Style Sheets (CSS)
The Internet 10/6/11 Cascading Style Sheets
DynamicHTML Cascading Style Sheet Internet Technology.
Targetimi i elementeve specifike
Ligjerata 3 Dr. Fisnik Dalipi
Ligjerata 4 Dr. Fisnik Dalipi
TIK 12 – Prof. Blerand Koshi
TIK 11 – Prof. Blerand Koshi
Creating a simple web page
Web Design & Development
Session 4: CSS Positioning
TIK 12 – Prof. Blerand Koshi
Gradients.
Gradients.
Veprime themelore ne dokument
Gradients.
Gradients.
CSc 337 Lecture 5: Grid layout.
Introduction to Cascading Style Sheets (CSS)
Kanida Sinmai CSS – Cascading Style Sheets Kanida Sinmai
Session 4: CSS Positioning
Presentation transcript:

Vendosja e prapavijes (Background) TIK 12 – Prof. Blerand Koshi

Vendosja e prapavijes Të gjitha faqet deri më tani prapavijën e kishin të bardhë Përmes CSS mund të ndryshohet ngjyra apo të vendoset foto si background Prapavija mund të aplikohet në gjithë faqen apo vetëm në ndonjë element specifik

Ndryshimi i ngjyrës së prapavijës Ngjyra e prapavijës së HTML elementit ndryshohet me CSS property background-color: #FFFF00; vlerat e ngjyrave mund të jepen njëjtë si te color: Shembulli i mëposhtëm ndryshon ngjyrën e komplet faqes body { }

Ndryshimi i ngjyrës së prapavijës Ndryshimi i ngjyrës mund të bëhet edhe për ndonjë element specifik psh. div div { background-color: #FF0000; } Po ashtu mund të targetohen elementet duke u bazuar në hierarkin e përdorimit psh span më poshtë paraqitet element "fëmijë" i div div span {

<!doctype html> <html> <head> <title>A CSS Exercise</title> <link rel=”stylesheet” type=”text/css” href=”style8.css”> </head> <body> <div class=”boldText”>This is my web page.</div> <div> This is the <span>nicest</span> page I’ve made yet. </div> <div class=”boldText”>Here is some text on my page.</div> </body> </html>

Vendosja e imazhit në prapavijë Prapavija me imazhe është një mënyrë e mirë për krijimin e HTML faqeve të mira Imazhet në prapavijë qëndrojnë prapa elementeve tjera Vendosja bëhet përmes CSS property background-image:url(“imazhi.jpg”); background-image:url(“http://www.alg- prizren.com/bilder/einstieg/sterne.png”);

Vendosja e imazhit në prapavijë Kur dëshirojmë që mos të kemi përsëritje të imazhit përdorim background-repeat: no-repeat; Mund të përdoret si kombinim me background color body { background-image:url(“large-snow.jpg”); background-color: #000000;}

Pozita e imazhit Prapavija mund të vendoset në pozita të caktuara background-position: center top; vlerat tjera përfshijnë left, right, bottom mund të përdoret kombinimi i tyre psh. bottom left Imazhet e vogla (20px X 20px) nëse bashkohen mirë krijojnë një background të përshtatshëm lexohen shumë më shpejtë nga browseri

? Pyetje