4.CSS Advanced

Transcription

4.CSS Advanced

CSS Advanced
Bok, Jong Soon
[email protected]
www.javaexpert.co.kr
Grouping Selectors

To minimize the code, you can group
selectors.
Nesting Selectors

It is possible to apply a style for a selector
within a selector.
height


Sets the height of an element.
Property value

auto | length | %
max--height
max


Sets the maximum height of an element.
Property value

none | length | %
max--width
max


Sets the maximum width of an element.
Property value

none | length | %
min--height
min


Sets the minimum height of an element.
Property value

length | %
min--width
min


Sets the minimum width of an element.
Property value

length | %
width


Sets the width of an element.
Property value

auto|| length | %
auto
Hiding an Element

visibility : hidden

It will still take up the same space as before.
Hiding an Element (Cont.)

display : none

It will not take up any space.
CSS Display – Block and Inline Elements

A block element is an element that takes up
the full width available, and has a line break
before and after it.

Examples of block elements:


<h1>,, <p>
<h1>
<p>,, <div>
An inline element only takes up as much
width as necessary, and does not force line
breaks.

Examples of inline elements:

<span>,, <a>
<span>
Changing How an Element is Displayed

The following example displays list items as i
nline elements:

li { display : inline; }
Changing How an Element is Displayed
(Cont.)

The following example displays span elemen
ts as block elements:

span {display : block; }
CSS Positioning



Allow you to position an element.
Can also place an element behind another,
and specify what should happen when an
element's content is too big.
There are four different positioning methods.
Static Positioning
 Fixed Positioning
 Relative Positioning
 Absolute Positioning

Static Positioning


HTML elements are positioned static by
default..
default
A static positioned element is always
positioned according to the normal flow of
the page.
Fixed Positioning


An element with fixed position is positioned
relative to the browser window.
It will not move even if the window is
scrolled:
Relative Positioning

A relative positioned element is positioned
relative to its normal position.
Absolute Positioning

An absolute position element is positioned
relative to the first parent element that has a
position other than static.
Overlapping Elements


When elements are positioned outside the
normal flow, they can overlap other
elements.
The z-index property specifies the stack
order of an element (which element should
be placed in front of, or behind, the others).
All CSS Positioning Properties

bottom,, left
bottom
left,, top
top,, right
Sets the bottom | left | top | right margin
edge for a positioned box.
 auto | length | %

All CSS Positioning Properties (Cont.)

clip
Clips an absolutely positioned element.
 shape | auto


overflow
Specifies what happens if content overflows an
element's box.
 auto | hidden | scroll | visible


position
Specifies the type of positioning for an element.
 absolute | fixed | relative | static


z-index
Sets the stack order of an element.
 number | auto

CSS Cursor

Specifies the type of
cursor to be displayed.

url | auto | crosshair |
default | pointer |
move | e-resize |
nene
-resize | nw
nw-resize
| n-resize | se
se-resize
| sw
sw-resize | s-resize
| w-resize | text | wait
| help
속성 값
crosshair
text
wait
help
move
e-resize
n-resize
결과
CSS Float

With CSS float, an element can be pushed
to the left or right, allowing other elements to
wrap around it.
CSS Float (Cont.)

clear
Specifies which sides of an element where other
floating elements are not allowed.
 left | right | both | none


float
Specifies whether or not a box should float.
 left | right | none

CSS Horizontal Alignment

Align block elements
Is an element that takes up the full width
available, and has a line break before and after
it.
 Examples of block elements:

<h1>
 <p>
 <div>

CSS Horizontal Alignment (Cont.)

Center aligning using the margin property.

Block elements can be centercenter-aligned by setting
the left and right margins to auto
auto..

Left and right aligning using the position
property.

One method of aligning elements is to use
absolute positioning:

Left and right aligning using the float
property.

One method of aligning elements is to use the
float property:
CSS PseudoPseudo-classes


CSS pseudopseudo-classes are used to add special
effects to some selectors.
Syntax


selector : pseudopseudo-class {property:value
{property:value}
}
selector.class : pseudopseudo-class {
property : value
}
CSS PseudoPseudo-classes (Cont.)

Anchor PseudoPseudo-classes


Links can be displayed in different ways in a
CSS--supporting browser.
CSS
Pseudo--classes and CSS classes
Pseudo

Can be combined with CSS classes.

CSS – The :first
:first-child pseudo
pseudo--class

The :first
:first-child pseudo
pseudo--class matches a
specified element that is the first child of another
element.

Match the first <i> element in all <p>
elements.

Match all <i> elements in all first child <p>
elements.

CSS - The :lang Pseudo
Pseudo--class.

allows you to define special rules for different
languages.

:link


:visited


Selects all visited links.
:active


Selects all unvisited links.
Selects the active link.
:hover

Selects links on mouse over.

:focus


:first:first
-letter


Selects the first letter of every <p> element.
:first:first
-line


Selects the input element which has focus.
Selects the first line of every <p> element.
:first:first
-child

Selects every <p> elements that is the first child
of its parent.

:before


:after


Insert content before every <p> element.
Insert content after every <p> element.
:lang
lang(language)
(language)

Selects every <p> element with a lang attribute
value starting with "it".
CSS Navigation Bar

Navigation bar = List of links.

A navigation bar is basically a list of links, so usi
ng the <ul
ul>
> and <li
li>
> elements makes
perfect sense.
CSS Navigation Bar (Cont.)

Now let's remove the bullets and the margins
and padding from the list.

Vertical navigation bar

To build a vertical navigation bar we only need
to style the <a> elements.

Horizontal navigation bar


There are two ways to create a horizontal naviga
tion bar. Using inline or floating list items.
Inline List Items

Floating List Items
CSS Attribute Selectors

Attribute selector
CSS Attribute Selectors (Cont.)

Attribute and value selector

Attribute and value selector – multiple values

Attribute and value selector – multiple values

Styling Forms

The attribute selectors are particularly useful for
styling forms without class or id
id..
깔끔한 실선 테이블 만들기
table {
border : solid 1px orange ;
borderborder
-collapse : collapse; }
th {
border : solid 1px orange ;
backgroundbackground
-color
color:#FFCC66;
:#FFCC66;
color : white;
}
td {
border : solid 1px orange ; }
레이어의 계층 구조와 레이어
left:0
top:0
right:0
top:0
left:0
bottom :0
right :0
bottom :0
그림 자르기

사용 예
<div id="layer1"
style="width:400px;
height:600px;
position :absolute ;
left:100px; top:0px;
clip : rect
rect(0
(0 300 600
180);">
<img src
src="city.jpg"
="city.jpg"
width="400"
height="600">
</div>

Clip : rect
rect((a,b,c,d
a,b,c,d))
한영전환



키보드를 통하여 입력을 받을 수 있는 element
element에서
에서
만 적용
적용..
특별히 한영 전환키를 선택하지 않아도 한영전환이
되므로 사용자가 바로 입력이 가능
가능..
형식

ime-mode: [ inherit | auto | active | inactive |
imedisabled ]
 inherit ( 상속 : 이전에 설정된 값을 상속 )
 auto ( 자동 : 현재 설정된 한/영 부분을 따름 )
 active ( 동작 : 한글로 동작 )
 inactive ( 동작안함 : 영문으로 동작 )
 disabled ( 사용안함 : 영문으로 동작 )
필터

그림과 문자에 필터 적
용하는 법

<태그 style= filter:필터종류
filter:필터종류
(세부속성지정
세부속성지정)>
)>




필터의 종류

사진에 특수 효과를 주는
필터




gray
invert
xray
chroma
문자와 그림을 꾸며주는 필
터



filph
filpv
alpha
blur
wave
문자에 주로 사용되는 필터



dropshadow
shadow
glow
필터

dropshadow(color=red,offx
dropshadow(color=
red,offx=1,offy=1,positive=false);
=1,offy=1,positive=false);
 그림자에 대한 설정을 지정
지정..
 특정 요소의 내부에 포함되어있는 내용에 적용이
되는 것.
 속성값




color : 그림자 색을 지정 합니다
합니다..
offx : 그림자를 해당 객체로 부터 우측으로 표현할 상
대 값을 지정 합니다
합니다..
offy : 그림자를 해당 객체로 부터 아래로 표현할 상대
값을 지정 합니다
합니다..
positive : 그림자와 배경을 반전 할 지를 지정 합니다
합니다..
 true : 그래로 사용
 false : 반전

glow

특정 요소 내부에 있는 다른 요소들의 색(빛) 번짐을 표현

형식


filter:glow(color=
filter:glow
(color=값
값, strength=값
strength=값)
속성

color


strength


번짐 효과 색을 지정 합니다
합니다..
요소로 부터 얼마만큼 번짐 효과를 줄지를 pixcel
pixcel단위로
단위로 지정
지정..
gray

특정 요소의 컬러값을 흑백 처리합니다
처리합니다..

실제론 이미지에 가장 많이 사용이 됩니다
됩니다..

형식

filter:gray;
filter:gray
;

xray

이미지에 xray 효과를 부여 할 경우에 사용 됩니다
됩니다..

형식


filter:xray;
filter:xray
;
blur

지정된 개체의 번짐 효과를 부여 합니다
합니다..

형식


add


1과 0값을 가지며 번짐의 효과를 지정 합니다
합니다..
direction


filter:blur(add=
filter:blur
(add= 값,direction= 값,strength=
,strength=값
값)
번짐의 방향을 360
360도
도 각도로 지정 합니다
합니다..
strength

그림자의 길이를 지정 합니다
합니다..

wave


지정된 개체에 웨이브 효과를 줍니다
줍니다..
형식
 filter:wave
filter:wave(add=
(add=값
값,freq=
,freq=값
값,lightstrength
lightstrength=
=
값,phase=
,phase=값
값,strength=
,strength=값
값)
합니다.. boolean
boolean값으로
값으로 0과 1값을
 add : 물결의 색을 어둡게 또는 밝게 합니다





갖습니다.
갖습니다.
합니다..
freq : 물결의 수를 지정 합니다
지정합니다.(1~100)
.(1~100)
lightstrength : 물결의 진하기를 지정합니다
합니다.(1~100)
.(1~100)
phase : 굴곡의 시작 위치를 지정 합니다
합니다.(1~100)
.(1~100)
strength : 굴곡의 깊이를 지정 합니다
chroma


투명하게 보여질 색상을 16
16진수로
진수로 지정 합니다
합니다..
형식
 filter:chroma
filter:chroma(color=#
(color=#rrggbb
rrggbb);
);

alpha


지정된 element
element를
를 투명하게 바꾸어 줍니다
줍니다..
형식
 alpha(opacity=opacity,
finishopacity=
finishopacity
=finishopacity
finishopacity,
, style=style,
startx=
startx
=startx
startx,
, starty
starty=
=starty
starty,
, finishx
finishx=
=finishx
finishx,
,
finishy=
finishy
=finishy
finishy)
)
 opacity : 시작 투명도의 단계값을 지정합니다
지정합니다.(0:
.(0:투명
투명~100:
~100:불투명
불투명))
 finishopacity : 마지막 위치의 투명도
 style: 불투명 경사도의 특징을 나타내는 값을 지정 합니다
합니다..








0 : 변화 없슴
1 : 직선의 불투명 경사도를 가짐
2 : 원형의 불투명 경사도를 가짐
3 : 사각형의 불투명 경사도를 가짐
startx : 불투명 경사도의 시작 x 좌표
starty : 불투명 경사도의 시작 y
finishx : 불투명 경사도의 종료 x 좌표
finishy : 불투명 경사도의 종료 y 좌표

revealtrans



객체가 보여지거나 사라질때 23
23가지의
가지의 미리 정의된 효과
효과((사
라지는 모양
모양))를 사용하게 합니다
합니다..
실제로 구동되는 것은 자바스크립트를 함께 사용해야 합니다
합니다..
형식
 filter:revealtrans
filter:revealtrans(duration=duration,
(duration=duration,
transition=transitionshape
transition=
transitionshape)
)
 duration : 효과가 일어나는 시간을 지정하며
지정하며,, 값은 “분
“분..초”
초”로
로
지정 합니다
합니다..

transitionshape







0(box in), 1(box out), 2(circle in), 3(circle out), 4(wipe up), 5(wipe
down)
6(wipe right), 7(wipe left), 8(vertical blinds), 9(horizontal blinds)
10(checkerboard across), 11(checkerboard down), 12(random
dissolve)
13(split vertical in), 14(split vertical out), 15(split horizontal in)
16(split horizontal out), 17(strips left down), 18(strips left up)
19(strips right down), 20(strips right up), 21(random bars
horizontal)
22(random bars vertical), 23(random)


javascript에서 알아두어야 할 revealtrans
javascript에서
revealtrans의
의 메서드와 속성
메서드




속성



object_name.filters.revealtrans.stop();
object_name.filters.revealtrans.stop();
object_name.filters.revealtrans.apply();
object_name.filters.revealtrans.apply
();
object_name.filters.revealtrans.play();
object_name.filters.revealtrans.play
();
object_name.filters.revealtrans.transition;
object_name.filters.revealtrans.transition;
object_name.filters.revealtrans.duration;;
object_name.filters.revealtrans.duration
스크립트코드















<img src
src="images/ca4.jpg"
="images/ca4.jpg" id="hoho
id="hoho"" style="filter:revealtrans
style="filter:revealtrans(transition=3,
(transition=3, duration =2.5);">
<a href
href="#"
="#" onclick
onclick="
="cmd
cmd()">
()">aaaa
aaaa</a>
</a>
<script language=javascript
language=javascript>
>
<!-<!
-var chk
chk=true;
=true;
function cmd
cmd()
() {
hoho.filters.revealtrans.stop();
hoho.filters.revealtrans.stop
();
hoho.filters.revealtrans.apply();
hoho.filters.revealtrans.apply
();
if(chk
if(
chk)) hoho.src="images/ca4.jpg";
else hoho.src="images/ca2.jpg";
chk=!
chk
=!chk
chk;;
hoho.filters.revealtrans.play();
hoho.filters.revealtrans.play
();
}
//-//
-->
>
</script>

blendtrans


선택된 객체를 점차 밝게
밝게(fade
(fade in)나타내거나
in)나타내거나,, 점차 사라지게
사라지게(fade
(fade out)
함.
형식
filter:blendtrans(duration=
(duration=분
분.초);
 filter:blendtrans
사진에 특수효과를 주는 필터

gray 필터는 컬러 값을 모두 제거하고 흑백사진으
로 만들어준다
만들어준다..
<img src
src="
="이미지
이미지 전체 경로
경로"" style="filter:gray
style="filter:gray()">
()">

invert 필터는 색상
색상,, 채도
채도,, 명도 값을 반전시켜서 반
대되는 느낌의 그림을 만들어준다
만들어준다..
<img src
src="Aniston.jpg"
="Aniston.jpg" style="filter:invert
style="filter:invert()">
()">

xray 필터는 x-ray 사진처럼 그림이 흑백으로 표현
된다..
된다
<img src
src="Aniston.jpg"
="Aniston.jpg" style="filter:xray
style="filter:xray()">
()">

chroma 필터는 지정색을 투명하게 만들어 준다
준다..
<img src
src="
="이미지
이미지 전체경로
전체경로"" style="filter:chroma
style="filter:chroma(color=
(color=
투명하게할 색상명
색상명)">
)">
문자와 그림을 꾸며주는 필터

대칭 필터로 그림을 상, 하, 좌, 우로 뒤집어준다
뒤집어준다..
<img src
src="dog.jpg"
="dog.jpg" style=filter:fliph
style=filter:fliph()>
()>
<img src
src="dog.jpg"
="dog.jpg" style=filter:flipv
style=filter:flipv()>
()>

alpha 필터는 불투명도
불투명도(opacity)
(opacity) 값 조절
<img src
src="dog.jpg"
="dog.jpg"
style="filter:alpha
style="
filter:alpha(opacity=40,style=3,finishopacity=0)">
(opacity=40,style=3,finishopacity=0)">

blur는
blur
는 이미지를 흐리게 하면서 번짐 효과
<img src
src="dog.jpg"
="dog.jpg"
style="filter:blur
style="
filter:blur(direction=225,strength=30,add=0)">
(direction=225,strength=30,add=0)">

wave 필터는 퍼머 머리처럼 웨이브를 준다
준다..
<img src
src="dog.jpg"
="dog.jpg"
style="filter:wave
style="
filter:wave(strength=25,freq=2,lightstrength=95
(strength=25,freq=2,lightstrength=95,,
phase=51,add=1)">
phase=51,add=1
)">
문자에 주로 사용되는 필터

dropshadow 필터는 특정 위치에 그림자를 만들어
준다..
준다
<p style="filter:dropshadow
style="filter:dropshadow(color=
(color=gray,offx
gray,offx=3,offy=3
=3,offy=3,,
position=0)">
position=0
)">DropShadow
DropShadow</p>
</p>

shadow 필터는 지정 각도로 번짐 효과가 있는 그
림자를 만들어준다
만들어준다..
<p style="filter:shadow
style="filter:shadow(color=
(color=green,direction
green,direction=135
=135">
">
Shadow</p>
Shadow
</p>

glow 필터는 문자 주위에 외부 광채를 만들어준다
만들어준다..
<p style="filter:glow
style="filter:glow(color=
(color=red,strength
red,strength=5
=5)">
)">
Glow로
Glow
로 문자에 광채주기
광채주기</p
</p>
>

4.CSS Advanced

Transcription

Similar documents

LA OFICINA DE RELACIONES NACIONALES E INTERNACIONALES

vortronic

FleetValue ™ Oil Filters

Floran Filter Fit

Greater Cincinnati Water Works Filter Distribution

Filtration units tailored to your needs

PERPUSTAKAAN SULTAN ABDUL SAMAD CUSTOMER

Extend Lube Filter life and reduce operating cost

PREPERATION AREAS

CSS for Page Layout