What Is CSS? Stands for Cascading Style Sheets. Is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Styles define h

Transcription

1 What is CSS? Bok, Jong Soon

2 What Is CSS? Stands for Cascading Style Sheets. Is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. Styles were added to HTML to solve a problem. External Style Sheets are stored in CSS files.

3 Style Solved a Big Problem HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, like: <h1>this is a heading</h1> <p>this is a paragraph.</p> To solve this problem, W3C created CSS. All Web browsers support CSS today.

4 Style Solved a Big Problem (Cont.) 구분 H T M L C S S 폰트크기 가장큰값이 7 수치에따라임의조절 자간 / 행간 크기조절이블가능하다 배치의자율서및가독성 링크 밑줄의변형이불가능 밑줄변형이자유롭다. 페이지여백 적용에한계가있다. 원하는만큼의여백지정

5 History 1991, HTML 1994, HTML2 1996, CSS1 + JavaScript 1997, HTML4 1998, CSS2 2000, XHTML1 2005, Ajax 2011, CSS2.1

6 CSS Level 3 Unlike CSS1 and 2, a single, comprehensive CSS3 does not exist. Instead, rather than trying to release the entire specification at once, the CSS Working Group has split the spec into a series of modules. Each of which has its own developmental timeline.

7 CSS Level 3 (Cont.) Refer to t-work

8 CSS Level 3 (Cont.) CSS3 Browser Extension (Vendor Prefix) Extension Rendering Engine Browser(s) Example -moz- Mozilla Firefox, -moz-borderradius Camino -ms- Trident IE -ms-layout-grid -webkit- Webkit Chrome, Safari -o- Presto Opera -o-borderradius -webkit-borderradius

9 New in CSS3 Borders Multiple border colors on a side, border images, and rounded corners Backgrounds Multiple backgrounds can be added to a single element, backgrounds can be more precisely positioned, backgrounds can be extended and clipped to the inside or outside of a border, and backgrounds can be resized.

10 New in CSS3 (Cont.) Color Color opacity settings, gradients in backgrounds, and HSL color values Text Text shadows, text overflow, and word wrapping Transformations Scale, skew, move, and rotate an element in 2D or 3D space. Transitions Simple dynamic style transitions

11 New in CSS3 (Cont.) Box Add Drop shadows, place user-resizable resizable boxes, set overflow separately in horizontal and vertical directions, use outline offset to set space between the outline and the border, apply box model specifications to set how width and height are applied to a box. Content Styles can add content to an element. Opacity Elements can be transparent.

12 New in CSS3 (Cont.) Media Style pages based on the viewport size, color, a spect ratio, resolution and other important design considerations. Web fonts Updates and extends the ability to link to fonts for use in a design.

13 HTML vs. CSS vs. JavaScript

14 Applying CSS to (X)HTML Inline Styles <tag style= property:value; > <h1 style= color:red; ></h1> Embedded Styles <style type= text/css > style </style> <style type= text/css > h1 { color : red; } </style>

15 Applying CSS to (X)HTML (Cont.) External Styles <link rel= = stylesheet type= text/css href= URL > Imported Styles <style type= text/css url( 파일명 ); </style>

16 CSS Syntax Rule has two main parts: a selector, and one or more declarations. The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.

17 Examples of CSS

18 Examples of CSS (Cont.)

19 CSS Comments A CSS comment begins with "/*", and ends with "*/", like this:

20 Kinds of selector Syntax <style type="text/css"> selector{property:value} </style> 1. 태그선택자또는 type 선택자 2. 클래스 (class) 선택자 3. 아이디 (ID) 선택자 4. 복수선택자 5. 자손 (descendant) 선택자 6. 태그선택자와클래스선택자연계 7. 태그선택자와아이디선택자를연계 8. 가상클래스선택자

21 HTML 태그를선택자로사용 HTML 태그를선택자로지정 선언문에속성과값들을지정한다. 즉, {} 사이에전달하고자하는내용을넣어준다. <style type= text/css > html 태그 { 속성 1: 값 1 ; 속성 2: 값 2} html 태그 { 속성 1: 값 1 ; 속성 2: 값 2} html 태그 { 속성 1: 값 1 ; 속성 2: 값 2} </style>

22 class selector & id selector 구분클래스선택자아이디선택자 시작기호.( 마침표 ) #(hash) 속성명 class Id 역할 문서에서주로사용되는서식을클래스명으로지정하여문서에통일감을준다. 스크립트로아이디에지정된스타일의속성을변경할수있어 DHTML 로가는관문역할을한다. 주된용도문서를꾸며준다. 레이어의동작을제어한다. 주사용태그적용범위 <p> <div> <span> 등 <div> 등 여러개의태그에적용가능하다. 공통점이름은사용자가임의로지정한다. 태그에제한없이어느태그에서나사용가능하다. 하나의태그에만적용하여사용한다.

23 class selector & id selector (Cont.) <style type= text/css >.class_name { 스타일속성 1: 값 1; 스타일속성 2: 값 2} #id_name { 스타일속성 1: 값 1; 스타일속성 2: 값 2} </style>

24 문장선택자 ( 중첩테그 ) 기존설명된선택자들은하나의태그를사용한데비해문장선택자는두개의태그를선택자로사용한다. <style type= text/css > <style type= text/css > 제 1 태그제 2 태그 { 스타일속성 1: 값 1; 스타일속성 2: 값 2} 제 1 태그제 2 태그 { 스타일속성 1: 값 1; 스타일속성 2: 값 2} </style>

25 가상클래스선택자 기본형식 A: 지정자 { 속성 : 값 ;} 사용예 a:link{text-decoration : none} a:visited{text-decoration decoration : none} a:hover{text-decoration : underline}

26 Nesting Selector 상위 STYLE의값을그대로적용을받고, 만약동일한속성이있을경우엔우선적용을따라가는것을의미. 아래예에서보듯이홍길동전은먼저임베디드방식으로글자의크기를 10PT와녹색으로지정. 이후다시 읽고 글자다른스타일을적용하여도글자의크기가 10PT 이고녹색이다. <head> <style type= text/css > p {font-size:10pt ; color:green;}; b {background-color:yellowcolor:yellow ; border:1 solid black;}; </style> </head> <body> <p> 홍길동전 <b> 읽고 </b> 나서 </p> </body>

27 Grouping Selector 그룹화는크게보면식별자의그룹화와속성의그룹화로구분될수있다. 식별자의그룹화 식별자를그룹화하기위해서는먼저동일한속성과값을지닌식별자들이있어야함. 그룹화적용전 h1 {font-family: family: 궁서 ; color:green ; }; h2 {font-family: family: 궁서 ; color:green ; }; h3 {font-family: family: 궁서 ; color:green ; }; 그룹화적용후 h1,h2,h3 {font-family: family: 궁서 ; color:green ; };

28

29 Absolute-sizesize xx-small x-small small medium large x- large xx-large CSS Absolute-size HTML font sizes xx-small 1 x-small small 2 medium 3 large 4 x-large 5 xx-large 6 7

30 Absolute-size size (Cont.) Unit Name What It Is Example pt Point 72pt = 1inch 12pt pc Picas 1pc = 12pt 3pc mm Millimeters Imm = 0.24pc 25mm cm Centimeters 1cm = 10mm 5.1cm in Inches 1in = 2.54cm 8.25in

31 Relative-size Unit Name What It Is Example em Em Relative to the current font size (similar to percentage) 3em ex x-height Relative to the height of 5ex lowercase letters in the font px Pixel Relative to the monitor s resolution 125px

32 Color Units The list of basic color keywords. The color names are case-insensitive.