Презентация на тему Part II. Cascading Style Sheets (CSS)

Part II. Cascading Style Sheets (CSS)2.1) What are Cascading Style Sheets :Let's say you make yourself 2.2) Styles in html tags :You can use a style inside an html tag if you Example :This is a link to the w3schools Web site.This is a link to the w3schools 2.3) better way to use CSS :To use a stylesheet you must put a link to Stylesheet.cssbody{background:#FF0000;}   /* change the background colour *//* Separating tags with a comma allows you 2.4) IDs and classesWe don't have to be restricted to only using styles by the tag Example :h1{text-align:center;color:#0fff0f;}#p1{color:#FF0000;}p {text-align:left;color:yellow;}p.date {text-align:right;color:blue;}p.main {text-align:left;color:red;} Omar Al Mukhtar University May, 2009 Faculty of Engineering Computer DepartmentNote: CSS3 BordersWith CSS3, you can create rounded borders, add shadow to boxes, and use an image border-radius : div{border:2px solid #a1a1a1;padding:10px 40px; background:#dddddd;width:300px;border-radius:25px;} The border-radius property allows you to add rounded corners Box Shadow div{width:300px;height:100px;background-color:yellow;box-shadow: 10px 10px 5px #888888;} Border image div{border:15px solid transparent;width:250px;padding:10px 20px;}#round{-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */-o-border-image:url(border.png) 30 2.5) Tables :Tables are one of the most important things in web site building. Just about Example :Now lets create 2 rows each with 2 cells: Building a table 2.5.1) Width and height :Theses can be used for the table or the tr or the 2.5.2) Colspan and Rowspan : “add colomns and rows” 2.5.3) The tag : Used to group inline-elements in a document. My mother has blue eyes 2.5.3) Text alignmentBy default text in a table will be on the left side of the 2.5.4) Cellpadding and cellspacing : The space between the text and the border is called padding. 2.5.6) Colors : We can change the border color of a table or cell with the 2.5.7) Tables in css :

Презентацию Part II. Cascading Style Sheets (CSS), из раздела: Информатика,  в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: Политика защиты авторских прав

Слайды и текст этой презентации

Слайд 1

:Let's say you make yourself a website one day. Your new website starts out with

Part II. Cascading Style Sheets (CSS)

2.1) What are Cascading Style Sheets :

Let's say you make yourself a website one day. Your new website starts out with only 5 pages but after a few months it has grown to 100 pages. You decide that you don't like the old color scheme and you want to change it. It will take a long time to change the colors on all 100 pages.

If you had used a stylesheet then you would have been able to change the colors in only the stylesheet file and they would be applied to all 100 pages immediately.


Слайд 2

an html tag if you want to by using the style property on that tag.

2.2) Styles in html tags :

You can use a style inside an html tag if you want to by using the style property on that tag. You should try not to do this because it defeats the purpose of CSS but it can be useful in some situations.




Слайд 3

a link to the w3schools Web site.

Example :




This is a link to the w3schools Web site.


This is a link to the w3schools Web site.






Слайд 4

must put a link to the stylesheet file inside your head tags like this:  

2.3) better way to use CSS :

To use a stylesheet you must put a link to the stylesheet file inside your head tags like this:
  My first CSS page

 

Hi


Hello


Omar Al Mukhtar University Faculty of Engineering - Al Beida



Fall Semester


Web Development Course
 

After that we have to create a file stylesheet.css when we put our styles properties.




Слайд 5

with a comma allows you to apply a style to all of those tags */h1,h2

Stylesheet.css

body{background:#FF0000;} /* change the background colour */

/* Separating tags with a comma allows you to apply a style to all of those tags */
h1,h2 {color:#FFFF00;font-size:20px;color:orange;text-align:center;}

p{font-family:sans-serif;font-weight:bold;}

/*You can apply a style to a certain tag that is inside another tag by seperating the tags in the stylesheet with spaces.*/
h3 b{color:#0000FF;}



Слайд 6

using styles by the tag name. If we want to make one set of p

2.4) IDs and classes

We don't have to be restricted to only using styles by the tag name. If we want to make one set of p tags have red text and another set have blue text then we must use the id property. First assign an id to the p tags.

kjkjkljkjkl

 


In the stylesheet we put the name of the id with a “#” in front of it.
#p1{color:#FF0000;} #p2{color:#0000FF;}
we are only allowed to use id names in 1 tag. To give the same id to many tags we must use the class property instead.

 


Classes have a “.” in front of them instead of a “#”.
.abc{text-decoration:underline;}

Слайд 7

Faculty of Engineering Computer DepartmentNote: City of Al Beida

Example :






Omar Al Mukhtar University


May, 2009


Faculty of Engineering


Computer Department


Note: City of Al Beida




Слайд 8

boxes, and use an image as a border - without using a design program, like

CSS3 Borders

With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop. border-radius box-shadow border-image


Слайд 9

allows you to add rounded corners to elements.

border-radius :





The border-radius property allows you to add rounded corners to elements.




Слайд 10

Box Shadow











Слайд 11

5 and older */-o-border-image:url(border.png) 30 30 round; /* Opera */border-image:url(border.png) 30 30 round;}#stretch{-webkit-border-image:url(border.png) 30 30

Border image








Note: Internet Explorer does not support the border-image property.


The border-image property specifies an image to be used as a border.



Here, the image is tiled (repeated) to fill the area.



Here, the image is stretched to fill the area.


Here is the image used:






Слайд 12

web site building. Just about all websites use tables but we don't see them very

2.5) Tables :

Tables are one of the most important things in web site building. Just about all websites use tables but we don't see them very often because they're hidden.

/ creation of the table with border ;
Tag / creation of the row in the table ; Tag / creation of the cell into the row ;
Cell 1 Tag Cell 2 Cell 3




Слайд 13

a table

Example :

Now lets create 2 rows each with 2 cells:

Building a table

Line 1 Cell 1 Line 1 Cell 2
Line 2 Cell 1 Line 2 Cell 2


 



Слайд 14

or the tr or the td. example : making the table 100 pixels (we can

2.5.1) Width and height :

Theses can be used for the table or the tr or the td.
example : making the table 100 pixels (we can use %) high and making each of the top cells 100 pixels wide.

Building a table

Line 1 Cell 1 Line 1 Cell 2
Line 2 Cell 1 Line 2 Cell 2


 


Слайд 15

2.5.2) Colspan and Rowspan : “add colomns and rows”

/ the top row spans 2 columns
1
1 2


/ the first cell span across 2 rows
12
1



Слайд 16

document. My mother has blue eyes and my father has dark green eyes.

2.5.3) The tag : Used to group inline-elements in a document.




My mother has
blue eyes and my father has dark green eyes.






Слайд 17

the left side of the cell in the middle.We us the align attribute for horizontal

2.5.3) Text alignment

By default text in a table will be on the left side of the cell in the middle.
We us the align attribute for horizontal text alignment and the valign attribute for vertical alignment.

left center right top middle bottom



Слайд 18

the border is called padding. 1   1 We

2.5.4) Cellpadding and cellspacing :

The space between the text and the border is called padding.

1





We can also increase or decrease the space between cells with the cellspacing attribute.

1
1 2


1 2


Слайд 19

table or cell with the bordercolor attribute. 1  We can also

2.5.6) Colors :

We can change the border color of a table or cell with the bordercolor attribute.

1


We can also change the background color of a table or a cell.

1


Слайд 20

2.5.7) Tables in css :


  • Имя файла: part-ii-cascading-style-sheets-css.pptx
  • Количество просмотров: 18
  • Количество скачиваний: 0