Scribd Logo

Idioma

Más información
CargarLea gratis durante 30 días

¡Te damos la bienvenida a Scribd!

2. Css

Cargado por

Topi Putih
23 vistas57 páginas

Descripción:

Copyright:

Attribution Non-Commercial (BY-NC)
Descargue como PPT, PDF, TXT o lea en línea desde Scribd
Marcar por contenido inapropiado
23 vistas57 páginas

2. Css

Cargado por

Topi Putih

Descripción:

Copyright:

Attribution Non-Commercial (BY-NC)
Descargue como PPT, PDF, TXT o lea en línea desde Scribd
Marcar por contenido inapropiado

Títulos relacionados

de 57

Cascading Style Sheet

Ulla Delfana Rosiani, ST

Menggunakan CSS

Layout tabel pada HTML

Apa itu CSS?


Cascading Style Sheet
Bahasa yang terpisah dari HTML Bahasa baru dari web desain

Bertanggung jawab pada bagian penyajian (rendering) CSS adalah sebuah teknologi yang bertujuan untuk memperluas kemampuan HTML. The bad news is, walaupun Microsoft Internet Explorer and Netscape mendukung style sheets, keduanya tidak identik : Tiap browser akan menampilkan kode style sheet yang sedikit perbedaan satu dengan yang lain.

HTML Vs CSS
HTML defines the structure of a document, the organization of text and images and other data into individual elements (via tags). CSS define how these elements are displayed in terms of typography, color, spacing, etc. In basic terms, styles are applied to elements but elements - the content structure - are defined by the markup language.

WHY CSS?
Separation of structure and presentation Simpler more manageable HTML code Finer and more predictable control over presentation Flexible Centralized control of presentation Accessibility Simple syntax

Kelebihan CSS lainnya


Pada HTML: Semua tag yang ada di HTML memiliki style tertentu Atribut dan nilai atribut yang ada pada suatu tag hanya berlaku untuk tag yang bersangkutan. Ada keterbatasan style pada masing-masing tag di HTML. Sedangkan pada CSS: Style sheets menyediakan cara untuk menerapkan stylestyle pada tag yang diberikan gaya (style) atau pada bagian tertentu. Diijinkan untuk mengelompokkan settingan style besamasama lebih baik daripada memasukkan di kode HTML. konsep memisahkan antara HTML dan CSSnya. Dapat pula menerapkan style yang sama pada banyak dokumen HTML.

Bagaimana CSS bekerja?

Syntax CSS

Syntax CSS
Kumpulan instruksi dinamakan statements
Bagian Selector, yang mendefinisikan elemen mana yang diberi style Bagian Declaration, yang bertugas memberitahu browser bagaimana menampilkan elemen tadi.
Property value

P { color: blue }
Selector Declaration

Syntax CSS

Aturan CSS
Aturan yang lain Jika ada dua aturan yang berbeda, misalnya: P ( color: red } P { background-color: white } keduanya dapat disatukan menjadi P { color: red ; background-color: white } ataudapat pula menggabungkan beberapa elemen, seperti: H1, H2, H3, H4, H5, H6 { color: green } Catatan: Jika akan menggabungkan elemen gunakan tanda koma , . Jika akan menggabungkan beberapa deklaration gunakan tanda titik koma ;

Cara CSS berhubungan dengan dokumen HTML


Linking to an External Style Sheet Importing a Style Sheet Embedding a Style Sheet
The CLASS Attribute The ID Attribute

Inlining Style The SPAN Element The DIV Element

Linking style sheets


Linking style sheets can be a little more confusing than embedding them, mostly because the formatting information is in one location and the HTML code is in a completely separate document. That arrangement, however,also provides the biggest advantage of style sheets.

Linking style sheets

1. Membuat file CSS


Langkah-langkah yang perlu dilakukan:


Jika anda memilih menggunakan link ke style sheet, anda harus membuat file yang berisi style sheet. File berupa file plain-text, sama seperti dokumen HTML, dan memiliki extensi .css. Aturan yang diterapkan pada file style sheet sama dengan style sheet yang diembedkan. Untuk menghubungkan file style sheet dengan dokumen HTML, gunakan tag <LINK> dengan atribut REL, TYPE, HREF.
<LINK REL=StyleSheet TYPE=text/css HREF=newstyle.css>

2. Meletakkan pada link

Importing a Style Sheet


Contoh pendeklarasian: <STYLE TYPE="text/css" MEDIA="screen, projection"> <!- @import url(http://www.htmlhelp.com/style.css); @import url(/stylesheets/punk.css); DT { background: yellow; color: black }

--> </STYLE> Tidak bisa bekerja pada browser lama

Embedding style sheets


The easiest way to handle style sheets is to embed them within the <HEAD> tag (technically, within <STYLE> tags within the <HEAD>) of the HTML document. Embedding them is easy because you dont have to create a completely different document for the style sheet. You can simply work with an HTML document you already have.

Atribut CLASS
Contoh pendeklarasian
Pendeklarasian
.punk { color: lime; background: #ff80c0 } P.warning { font-weight: bolder; color: red;

background: white }

Cara pemanggilan:
<H1 CLASS=punk>Proprietary Extensions</H1> <P CLASS=warning>Many proprietary extensions can have negative side-effects, both on supporting and non-supporting browsers... </p>

Atribut ID
Contoh pendeklarasian
Pendeklarasian #wdg97 { font-size: larger }
Cara pemanggilan:
<P ID=wdg97>Welcome to the Web Design Group!</P>

Class Vs ID
The ID attribute of an HTML tag is intended solely to provide a unique identifier.
no two elements within a document (web page) can have the same ID. Anytime you add an ID attribute to a tag, its value should be different from that of any other element's ID on the page, even if they have different tag names. So a style rule with an ID selector can, at most, only apply to a single element on a page. Pada pendefinisian suatu ID, Suatu elemen hanya berisi satu ID
The class selector, on the other hand, can be applied to several elements on a page. You can even make rules using the same class name with different tag names. Sebuah elemen dapat berisi beberapa class

The CLASS attribute was specifically designed to allow authors to assign styles to elements

Contoh Multiple Classes


.warning { color: red } .highlight { background-color: yellow } ... <h3 class="warning highlight">Danger</h3> <p class="highlight">An important point.</p>

Inlining Style
Contoh pendeklarasian:
<P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> This paragraph is styled in red with the New Century Schoolbook font, if available.</P>

Elemen SPAN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Example of SPAN</TITLE> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <STYLE TYPE="text/css" MEDIA="screen, print, projection"> <!- .firstwords { font-variant: small-caps } --> </STYLE> </HEAD> <BODY> <P> <SPAN CLASS=firstwords>The first few words</SPAN> of a paragraph could be in small-caps. Style may also be inlined, such as to change the style of a word like <SPAN STYLE="font-family: Arial"> Arial</SPAN>. </P> </BODY> </HTML>

Elemen DIV
Contoh pendeklarasian:
<DIV CLASS=note> <H1>Divisions</H1> <P>The DIV element is defined in HTML 3.2, but only the ALIGN attribute is permitted in HTML 3.2. HTML 4.0 adds the CLASS, STYLE, and ID attributes, among others.</P> <P>Since DIV may contain other block-level containers, it is useful for marking large sections of a document, such as this note.</P> <P>The closing tag is required.</P> </DIV>

Pseudo Class & Pseudo Elements

Pseudo Class & Pseudo Elements


We can cover some common cases in which there arent available structure elements by pretending that there are. Anchor pseudo-classes reflect link status. Typographical pseudo-elements pretend there is an element that might only be generated at layout time.

Contoh Pseudo-Class dan Element


a:link Specifies the style rule for unvisited links. a:active Specifies the style rules for active (currently selected) links. a:visited Specifies the style rules for visited links. :hover Specifies the style rules for elements that a mouse pointer is currently pointing to. It is the equivalent of the onMouseOver attribute for use with JavaScript. Lihat yang lain..>>

Inheritance and Cascade

Inheritance
Some style properties are inherited by default. It pays to think of some (X)HTML elements as parents, and the elements they contain as children. A parent owns a child, and passes what he or she knows down to the child. These include properties such as color, font and text-align.

misalnya:

Hasilnya:

<style> p {color:#FF0000} b {color:#0000FF} </style> <p>Contoh <b>inheritance</b> di css</p>

Cascade
Through Varying Methods of Application

1. The browser performs the inline rule first, and then 2. looksto perform any other rules embedded in the <head>, and finally 3. looks to any external files to complete its understanding of the CSS you created.

Layout dengan CSS

More Than Doodles (http://doodles.cssmastery.com) uses floats for the whole layout. All images and columns are floated to some degree.

Dasar Layout CSS


Float dan Clearing

Positioning

MODEL BOX

Tipe BOX
Box dibagi dalam dua tipe: block dan inline.
Block boxes are generated by elements such as P, DIV or TABLE. Inline boxes are generated by tags such as B, I or SPAN and actual content like text and images.

Float
Konsep float adalah kunci untuk membuat layout menggunakan CSS. Floats allow you to rebel against the linear nature of the flow of elements on a page. Tanpa float, setiap elemen akan diletakkan dibawah elemen diatasnya (sebelumnya), dan halaman akan panjang ke bawah. Tidak akan ada kolom dan tidak ada gambar sebaris, dan kita akan masih menggunakan tabel untuk layout. Ketikan akan memberikan float pada elemen, elemen akan menjadi sebuah block-level element yang kemudian dapat diposisikan ke kiri atau kanan dalam satu garis yang sama. Float kebanyakan digunakan untuk meletakkan gambar di konteks, membuat kolom dan umumnya menggiring designer untuk berfikir secara horisoltal.

Float Properties
1. Float:left 2. Float:right 3. float:none default

Float: none (default)

Float:left dan Float:right

The Problem
That the containing <div> (container) doesnt recognize the float, and as a result it is not expanding vertically to contain the <image_float> element, only the now-less-tall paragraph. It must therefore be a good time to look at clearing floats.

Clearing Floats
Adalah cara untuk menghilangkan pengaruh float. Empat pilihan untuk clearing float:
clear:left clear:right clear:both clear:none

Clear:left dan Clear:right

Without clearing the paragraph, the text sits right up against the gray box.

The gray box is floated left, and the paragraph is cleared left.

Clar:both

By specifying clear:both, the element is moved below all floating elements, regardless of whether they are floated left or right. In this example, the box is floated left, but the clear property for the paragraph is given the both value.

The Extraneous spacer <div>

Cara menghilangkan pengaruh float

Cara lain menghilangkan pengaruh float

With or without clearing the float, if the nonfloated element (the paragraph) is taller than the floated element, the container will behave properly.

position top left bottom right

Position
Empat tipe positioning :
Static positioning Absolute positioning Fixed positioning to be placed in relation to the actual browser window Relative positioning

Static positioning

With either no position whatsoever or position:static declared, the paragraph and image are arranged inside the container in their default (static) positions

Relative positioning

The position relates not to any parent element or to the browser window, but specifically to the properties of the element itself.

Absolute positioning

An absolutely positioned element is designed to take its point of reference from the nearest positioned element.

Fixed positioning

As a result of this change, the images position will appear to be the same as in the absolutely positioned example. The real surprise comes when you scroll the page.

Tipe Layout
Ada beberapat tipe layout: 1. fixed width using static width measurements, typically pixels. A fixedwidth layout does not stretch to fill the browser window, and remains its set width whatever you do to it. 2. Liquid expands and contracts to fill the browser window. Widths declared using percentage measurements 3. Elastic - - > contoh 4. variable fixed width - - > contoh

Selamat belajar

Contoh Penerapan CSS


Tabel dengan CSS Layout 2 kolom Layout 3 kolom

Tables and CSS


Does a CSS Tableless layout mean no more tables? No a CSS tableless layout is great; however, that doesnt mean you cant, or shouldn't use tables. Tables are the best way to display information need needs to be align in rows and colums. Contoh

Layout 2 Kolom

Note
Remember that every time you create a new column <div>, you also create a new parent element for any elements it contains. This means that you can be even more specific with your CSS and how you target certain elements using contextual selectors.

Tugas
Create two different CSS (one internal and one external) for the Web page developed in Homework. The two CSS should contain different styles for at least the:
Background. Text. Font. Classes. IDs.

Intereses relacionados

Documentos similares a 2. Css

Popular en Typography

Calificar

Compartir