More CSS Syntax. Colors and Fonts. Color specification. CSS properties for colors. Χρώµατα και Γραµµατοσειρές. Κεφ. 3

Transcript

1 More CSS Sytax Colors ad Fots Χρώµατα και Γραµµατοσειρές Κεφ. 3 CSS properties for colors Color specificatio 17 colour keywords ( Π.χ. p { color: red; property color backgroud-color descriptio color of the elemet's text color that will appear behid the elemet Guarateed to be displayable by all graphical browsers o all colour moitors black purple avy olive blue 0000FF gray gree silver C0C0C0 teal red FF0000 lime 00FF00 fuchia FF00FF aqua 00FFFF yellow FFFF00 maroo white FFFFFF orage FFA500(added i CSS 2.1) 3 4

2 Colors i CSS Colors i CSS Hex values: you specify six hexadecimal values, two for the red, gree, ad blue chaels that make up each color, preceded by a # sig Each hex value has 16 possible values (0 to 9, the a to f). Each of the three color chaels (R, G, ad B) has a possible 256 values (16 x 16). So the total umber of possible colors you ca choose from is 256 x 256 x 256 = 16,777,216. p { color: #ff0000; RGB or RGBa: similar to Hex, except that you specify the values for R, G, Β i either decimal umbers or percetages (0-255 or 0%-100%): p {color: rgb(255, 0, 0); /* equiv to #ff0000*/ RGBa (CSS3): provides a way to specify also color trasparecy p {color: rgba(255, 0, 0,0.95); HSL/HSLa: stads for Hue (απόχρωση) Saturatio (κορεσμός) Lightess (φωτεινότητα) Hue: values from 0 to 360 Saturatio ad Lightess: values from 0 to 100% Examples: hsl(0, 100%, 50%) - Red hsl(60, 100%, 50%) - Yellow hsl(120, 100%, 50%) - Gree hsl(180, 100%, 50%) - Cya hsl(240, 100%, 50%) - Blue hsl(300, 100%, 50%) - Mageta/Purple 5 6 CSS properties for fots property fot-family fot-size fot-style fot-weight descriptio which fot will be used how large the letters will be draw used to eable/disable italic style used to eable/disable bold style Complete list of fot properties 8

3 Settig fots Fots ca be set usig the CSS fot-family property Prefer web-safe fots that are guarateed to be istalled across Widows, Mac, Liux Best practice: sas-serif fot for headigs (χωρίς πατούρα) serif fot for body text, for improved legibility take ito accout the target audiece of your site Times New Roma: better for serious ews Verdaa: might work better for text o a music or video game site p { fot-family: Helvetica; p { fot-family: "Trebuchet MS","Times New Roma", Georgia, serif; 9 More about fot-family ca specify multiple fots from highest to lowest priority geeric fot ames: serif, sas-serif, cursive, fatasy, moospace Serif fots have a small protrusio o the edge of a letter Serified fots are geerally believed to be easier to read o prited pages No-serified fots are thought to look cleaer o a computer scree Moospace fots take exactly the same width for each letter o the scree Variable-width fots are widely cosidered to be more pleasat to read except for certai cases (e.g. computer code) 10 Fot styles Five families of fots: sas-serif, serif, cursive, fatasy, moospace fot-family Parameters: style, variat, weight, size. Properties of CSS για τις γραμματοσειρές: fot-family fot-style fot-variat: specifies whether or ot a text should be displayed i a small-caps fot fot-weight: sets how thick or thi characters i text should be displayed. fot-size fot - to specify a list of fot properties (Order must be: style, weight, size, ame(s): fot: bolder 14pt Arial Times New Roma 11 eclose multi-word fot ames i quotes 12

4 Fot size To resize text you ca use the fot-size property It is recommeded that you use percetages or em s, ad ot pixels as fot-size uits Guidelie: Size the text relative to the default, istead of settig a absolute size irrespective of other settigs. Problem: if the desiger wats to icrease the geeral size of the whole page, idividual elemets sized usig pixels will stay the same size, ad start to look out of proportio. em is a scalable web measuremet uit that is always equal to the curret documet fot size E.g. if a default fot size of 16px is curretly beig used for paragraphs, 16px is equal to 1em. Settig a fot size of 2 em s will always make the fot double the default size (2 em s is equal to settig the size as 200%) 14 fot-size fot-weight, fot-style uits: pixels (px) vs. poit (pt) vs. m-size (em) 16px, 16pt, 1.16em vague fot sizes: xx-small, x-small, small, medium, large, x- large, xx-large, smaller, larger percetage fot sizes, e.g.: 90%, 120% either of the above ca be set to ormal to tur them off (e.g. headigs) 15 16

5 Embeddig Fots Groupig styles I CSS3 you ca embed fots ito your web page Makig sure that all users ca see the page properly i ay fot they like Usig { fot-family: Kimberley ; src: url( ) format( TrueType ); p { fot-family: Kimberley, Helvetica, sas-serif; fot-size: 1.5em; a style ca select multiple elemets separated by commas the idividual elemets ca also have their ow styles (like h2 above) 19 20

6 Typical stylig without CSS Text, Backgroud, Tables Κείµενο, Παρασκήνιο, Πίνακες Geeral text stylig The lies of text are too log to read ad ueve Τhe headig levels are ot that easy to differetiate betwee Τhe default typeface makes it look very like the Web of the 90s. The way the page looks by default is determied by the default browser styles that are beig applied. These will differ somewhat across browsers, but the effect is always pretty much the same. We ca make thigs better with some simple CSS styles. Let s look at the stylig ow. 23 Lie legths Geeral guidelie: make your text colums about characters i legth for easier readig Use the width property: fixed (static) width: legth property is assiged value i px dyamic (fluid) width: legth property is assiged value i percetage (%) ad text takes the same proportio of the browser widow width elastic: relies o legth defied usig ems, which are related to the size of the text - ot so ofte used width: 500px; width: 60%; #mai_cotet { width: 50%; #mai_cotet { width: 50%; mi-width: 300px; max-width: 600px; 24

7 Other typesettig properties lie-height specifies the height of each text lie (just the lie the text sits o; ot the text itself), i whatever uit you choose. text-trasform trasforms the textual cotet of a elemet. capitalize (capitalizes all words) lowercase (makes all letters lowercase) uppercase (makes all letters uppercase). text-decoratio specifies differet types of decoratio o the textual cotet of a elemet. blik (makes the text blik o ad off) uderlie (draws a lie uder the text) overlie (draws a lie above the text) lie-through (draws a lie through the text) 26 CSS properties for text text-alig property descriptio text-alig aligmet of text withi its elemet text-decoratio decoratios such as uderliig lie-height, word-spacig, text-idet gaps betwee the various portios of the text idets the first letter of each paragraph Complete list of text properties ca be left, right, ceter, or justify (which wides all full lies of the elemet so that they occupy its etire width) 27 28

8 text-decoratio CSS properties for backgrouds property descriptio ca also be overlie, lie-through, blik, or oe backgroud-color backgroud-image color to fill backgroud image to place i backgroud effects ca be combied:text-decoratio: overlie uderlie; backgroud-positio backgroud-repeat placemet of bg image withi elemet whether/how bg image should be repeated backgroud-attachmet whether bg image scrolls with page backgroud shorthad to set all backgroud properties backgroud-image backgroud-repeat backgroud image/color fills the elemet's cotet area ca be repeat (default), repeat-x, repeat-y, or o-repeat 31 32

9 backgroud-positio Image Replacemet The umber of fots commoly available across platforms, presets a certai limitatio to desigers o the Web. value cosists of two tokes, each of which ca be top, left, right, bottom, ceter, a percetage, or a legth value i px, pt, etc. value ca be egative to shift left/up by a give amout You could create your text i a graphics editor with the fot you desire ad put it o your site as a image but this presets a accessibility ad search egie idexig problem Oe commo solutio that solves both problems is Image Replacemet (IR) put your text i place o your site attach a backgroud image to that elemet cotaiig the text displayed exactly as you d like it, ad use CSS trickery to shut the HTML text off the edge of the scree CSS Sprites If you have a lot of images o your site that are the same size you ca put them i a sigle file (oe log strip of icos) so that oly oe dowload is required. As well as savig o file size, this cuts dow cosiderably o the umber of HTTP requests required. To iclude the images i your pages, you ca use the backgroud properties of HTML elemets. How to cotrol which idividual ico is displayed? Vary the backgroud-positio property: a differet portio of the sigle image is displayed i that part of the page. Make sure that the cotaier the image is attached to (be it a <div>, <p>, etc.) i the HTML is sized with the correct dimesios to cotai the sprites. 36

10 HTML Tables HTML Tables Fuctioality: orgaise ad preset data i tabular format. To create a table i HTML, you eed to use three elemets: <table>: Wraps the etire table; defies it as a data table <tr>: Defies each row of the table <td>: Cotais the cotet of each sigle table cell multiple <td>s are foud iside each <tr> Tables were used as a way of typesettig ad aligig of cotet iside Web pages but this is a bad practice that should be avoided: This was doe because CSS lacked cosistet support across browsers, ad usig table cells was see as a easier optio for cross-browser layouts. 40

11 Do't use tables for layout! (borderless) tables appear to be a easy way to achieve grid-like page layouts may "ewbie" web pages do this but, a table has sematics; it should be used oly to represet a actual table of data istead of tables, use divs, widths/margis, floats, etc. to perform layout tables should ot be used for layout! mess-up scree readers typesettig problems for users with small screes, larger fots, ovisual browsers performace (have to wait for the whole table to load before presetatio) 41 Advaced table elemets Headers <th> Differetiate the headers of a table from remaiig lies. Attribute: scope= row ή col Defies if header is about a row or colum - useful for scree readers 44

12 Advaced table elemets Captio (Λεζάντες) με το <captio> Επιπλέον δομικά στοιχεία: <thead> <tbody> <tfoot> Attribute colspa= : επιτρέπει σε ένα στοιχείο του πίνακα να επεκταθεί σε στήλες Attribute rowspa= : επιτρέπει σε ένα στοιχείο του πίνακα να επεκταθεί σε γραμμές 45 Stylig tables all stadard CSS styles ca be applied to a table, row, or cell table specific CSS properties: border-collapse, border-spacig, captio-side, emptycells, table-layout 48

13 The border-collapse property The rowspa ad colspa attributes by default, the overall table has a separate border from each cell iside colspa makes a cell occupy multiple colums; rowspa multiple rows the border-collapse property merges these borders ito oe text-alig ad vertical-alig cotrol where the text appears withi a cell Colum styles: <col>, <colgroup> CSS Selectors col tag ca be used to defie styles that apply to a etire colum (self-closig) colgroup tag applies a style to a group of colums (NOT self-closig) Eπιλογείς CSS 51

14 Uiversal selector Καθολικός Επιλογέας Body styles Selects all elemets of a web page ad applies them commo style properties * {color: red; to apply a style to the etire body of your page, write a selector for the body elemet saves you from maually applyig a style to each elemet CLASS selectors ID Selectors Select HTML elemets with a class attribute value equal to the selector: E.g. the selector:.example { applies to elemets: <p class="example">, <li class="example"> ή <div class="example"> The use of class allows the groupig of elemets that eed to be styled with the same rules. It is advised to defie the classes of a applicatio before startig the authorig of the cotet. Select a specific istace (στιγμιότυπο) of a HTML elemet with ID value equal to the value of the selector: The ID value must be uique withi the HTML documet Π.χ.: <p id= COPYRIGHT >The copyright for. #COPYRIGHT { fot-size: small 55 56

15 Selectors combiatio Attribute selectors We ca combie selectors to make rules with icreased specificity: p.warig{ matches all paragraphs with the class of warig div#example{ matches the elemet with the id attribute example, but oly whe it is a div p.ifo, li.highlight{ matches paragraphs with a class of ifo ad list items with a class of highlight Selectio of HTML elemets based o their attributes: Επιλογή στοιχείων img με ιδιοχαρακτηριστικό alt: img[alt] { border: 1px solid #000000; Selectio of HTML elemets based o their attribute values: img[src="alert.gif"] { border: 1px solid #000000; Selectio of HTML elemets based o attribute value patters (CSS3) - eg edig of fileames. [att^=val] Βλ. Represets a elemet with the att attribute whose value begis with the prefix "val". If "val" is the empty strig the the selector does ot represet aythig. [att$=val] Represets a elemet with the att attribute whose value eds with the suffix "val". If "val" is the empty strig the the selector does ot represet aythig. [att*=val] Represets a elemet with the att attribute whose value cotais at least oe istace of the substrig "val". If "val" is the empty strig the the selector does ot represet aythig Cotext Selectors (Επιλογείς συγκειμένου) Child selectors Select HTML elemets based o the cotext of their locatio. To defie cotext we use a combiatio of simple selectors: li p { margi-top: 0mm All p elemets estig iside li elemets table.small p { fot-size: smaller All p elemets estig iside elemets of class small that are part of a table elemet Select a elemet that is a child of aother HTML elemet E.g. Use blue for the cotets of strog elemets that are ested directly iside h3 elemets: h3 > strog { color: blue; 59 60

16 Descedet selectors Adjacet siblig selectors Select a elemet that is a descedat i the DOM tree of aother HTML elemet Descedet selectors are very similar to child selectors, except that child selectors oly select direct descedats. How to select all em elemets iside div? + : selects the elemet that appears immediately after some other selected elemet o the same level of the DOM hierarchy if you wated to select all p elemets that come immediately after h2 elemets, but o other p elemets, you could use the followig rule: <div> <em>hello</em> <p>i this paragraph I will say <em>goodbye</em>. </p> </div> div > em {... div em {... h2 + p {... h2 p Exteral selectors Pseudo-classes Affect presetatio based o iformatio exteral to the HTML file. I CSS1: Pseudo-classes: styles that apply whe somethig happes, rather tha because the target elemet simply exists Pseudo-elemets: parts of the cotet that are ot explicitly tagged by HTML. Eg: the first letter of a paragraph. Possible states i which a hyperlik achor may be foud (the <A> elemet): :lik - ο σύνδεσμος δεν έχει επιλεγεί από τον χρήστη για το άνοιγμα άλλου αρχείου - αποτελεί την προκαθορισμένη κατάσταση ενός συνδέσμου. :visited - ο σύνδεσμος έχει επιλεγεί προηγουμένως (η πληροφορία αυτή διατηρείται στον πλοηγό). Μέσω της λέξης κλειδί visited, μπορούμε να καθορίσουμε την εμφάνιση επιλεγμένων αγκυρών. :hover - ο δρομέας του ποντικιού βρίσκεται πάνω από το στοιχείο HTML :focus ή :active - αφορά σε υπερσύνδεσμο την (σύντομη) χρονική στιγμή που αυτός επιλέγεται από τον χρήστη ή που έχει τον δρομέα του πληκτρολογίου πάνω του 63 64

17 CSS pseudo-classes Pseudo-classes :first-child Συνδυάζεται με κάποιο επιλογέα τύπου Χ Επιλέγει τους σημαντήρες Χ, οι οποίοι είναι «πρώτα παιδιά» του πατέρα τους Select ad style every <i> elemet of every <p> elemet, where the <p> elemet is the first child of its paret p:first-child i { color: red; <body> <p>i am a <i>strog</i> ma. I am a <i>strog</i> ma.</p> <p>i am a <i>strog</i> ma. I am a <i>strog</i> ma.</p> <body> Pseudo-classes Pseudo-classe examples :lag(x) - selects elemets whose laguage has bee set to the specified laguage x usig the lag attribute :focus - useful as a usability aid i forms highlight the iput field that has the active blikig cursor iside it a:lik { color: gree a:active { color: red a:visited { color:blue a:lik { color: blue; a:visited { color: gray; :focus - useful as a usability aid i forms highlight the iput field that has the active blikig cursor iside it iput:focus { border: 2px solid black; backgroud color: lightgray; if you do't specify these rules i the same order as they are show, they might ot work as you expect. This is due to the way specificity causes later rules i the stylesheet to override earlier rules a:hover, a:focus { text-decoratio:oe; a:active { fot-weight: bold; 67 68

18 Pseudo-elemets Καθορίζονται από τμήματα του περιεχομένου τα οποία δεν επισημαίνονται ρητά από σημαντήρες ΗΤΜL: first-letter first-lie Παράδειγμα: p.iitial.first-letter {fot-size:200%; float: left p.iitial.first-lie { text-trasform: uppercase Εξήγηση: η πρώτη παράγραφος ενός κεφαλαίου ή υποκεφαλαίου, η οποία ανήκει στην κλάση iitial, εμφανίζεται με το πρώτο γράμμα της διπλάσιο από το υπόλοιπο κείμενο. Το γράμμα αυτό εμφανίζεται σε διαφορετική στοίχιση από τα υπόλοιπα. Η πρώτη γραμμή της παραγράφου αυτής εμφανίζεται με κεφαλαία γράμματα. 69