bài giảng tìm hiểu về css

Tr ườ ng ĐH Quang Trung Khoa: KT-CN... 3.Thu c tính text ộ Ví du1: text-transform: none; text-transform: uppercase; /*in hoa*/ text-transform: lowercase; /*in thường*/ text-transform: c

Tr ườ ng ĐH Quang Trung Khoa: KT-CN

Có 3 cách khác nhau đ nhúng CSS vào m t đo n mã HTML.ể ộ ạ

 Cách 1: Inline style sheet( N i tuy n)ộ ế

đây là phương pháp nguyên th y(không c n selecter trong cú pháp)ủ ầ

L u ý: ư th style nên đ t trong th head Đ i v i nh ng trình duy t không nh n ra đ ẻ ặ ẻ ố ớ ữ ệ ậ ượ c

<style> ta làm nh sau: đ a ư ư <! ở ướ tr c và > ở sau kh i css ố

Ví dụ: <style type=“text/css”>

V trí đ t CSS trong HTML ị ặ

 Cách 3: External style sheet ( liên k t v i m t file CSS bên ngoài )ế ớ ộ

 Tương t cách 2 nh ng ta đ t mã css vào m t th style và đ a chúng trong m t ụ ư ạ ộ ẻ ư ộ

file css(có ph n m r ng css) bên ngoài và liên k t nó v i trang web b ng thu c ầ ở ộ ế ớ ằ ộ

tính href trong th ẻ link Đây là cách làm được khuy n cáo.ế

S u tiên trong CSS ự ư

Thu c tính thay đ i đ u tiên ộ ổ ọ ư : !important

 Cú pháp: selector{ property :value !important}

 Ví d : ụ p{width :500px ; text-align:left !important; color:#333 !important}

 N u cùng ,m t thu c tính cho m t selector mà c 2 thu c tính cùng đ t !ế ộ ộ ộ ả ộ ặ

important thì u tiên cho cái sau.ư

Tìm hi u cú ph p c b n CSS ể ấ ơ ả

 Cú pháp CSS c b n: ơ ả

Selector { property : value;}

 Selector : các đ i tố ượng mà ta s áp d ng các thu c tính trình bày.Nó là các ẽ ụ ộtag HTML,class hay id.ví d : body,h2,h3,p,img,#title,…ụ

Trong class th img và “a” đ u có cùng tên visitors nh ng đây là 2 đ i tẻ ề ư ố ượng

khác nhau ta mu n dùng CSS riêng cho ph n nh thì dùng nh sau:ố ầ ả ư

img.visitors {width:50}

Tìm hi u cú ph p c b n CSS ể ấ ơ ả

 Property: là thu c tính quy đ nh cách trình bày.ộ ị

Ví d : ụ background-color,font-family,color,padding,margin,…

N u có nhi u h n 1 thu c tính trong 1 selecter thì ta dung d u “;” đ phân cách và ế ề ơ ộ ấ ể

được đ t trong d u ngo c nh n sau selecter.ặ ấ ặ ọ

Ví d : ụ

body{background-color:#FFF;font-size:14px}

 Đ i 1 trang web có nhi u thành ph n có cùng m t só thu c tính ta có th gom g n ố ề ầ ộ ộ ể ọ

l i nh sau:ạ ư

h1{color:#0000FF;text-transform:uppercase} /*transform: ch đ in hoa ,in ế ộ

h2{color:#0000FF;text-transform:uppercase}

h3{color:#0000FF;text-transform:uppercase}

=> h1,h2,h3{color:#0000FF;text-transform:uppercase}

Tìm hi u cú pháp c b n CSS ể ơ ả

 Value: giá tr c a thu c tínhị ủ ộ

Ví d : h3{color:ụ #0000FF;font-family:”Times New Roman”;}

Ghi chú trong CSS: /* n i dung chú thích*/ộ

 Đ n v CSS: ơ ị Đ n v đo chi u dài.ơ ị ề

Đ n v CSS ơ ị

 Đ n v màu s c:ơ ị ắ

1 Thu c tính brakground ộ

o Khóa nh n n: background-attachment ả ề cho phép b n xát đ nh tính c đ nh c a ạ ị ố ị ủ

nh n n so v i n i dung trang web

+ Sroll: nh n n s cu n cùng n i dung ,giá tr m c đ nh.ả ề ẽ ộ ộ ị ặ ị

+ fixed: C đ nh nh n n so v i n i dung trang web.(nghĩa là hình n n đ ng yên khi ố ị ả ề ớ ộ ề ứ

b n đang cu n trang web.)ạ ộ

o Đ nh v nh n n:background-position ị ị ả ề

o Vd: background-position:5cm2cm(5cm t trái qua và 2cm t ph i qua)ừ ừ ả

o Background-position:bottom left( đ nh v góc trái phía dị ị ở ưới)

background-position:right bottom;

 background: cyan url(dinhan.jpg) no-repeat fixed right bottom;

 C u trúc khái quát rút g n cho nhóm background ấ ọ

background:<background-color>|<background-image>|<background-repeat> |

<background-attachment>|background-position>

 2 Thu c tính font ộ

3.Thu c tính text ộ

3.Thu c tính text ộ

 Ví du1:

text-transform: none;

text-transform: uppercase; /*in hoa*/

text-transform: lowercase; /*in thường*/

text-transform: capitalize;

text-transform: inherit; /*k th a*/ế ừ

3.Thu c tính text ộ

 Ví du2:

body{color:#000}

h1{color:#0000FF}/*xanh da tr i*/ờh2{color:#00FF00}/*xanh lá*/

p{text-indent:30px}/*th t đ u dòng cho dong đ u tiên trong văn b n*/ụ ầ ầ ảh1,h2{text-align:right}

p{text-align:justify}/*canh đ u*/ềh1,h2{letter-spacing:7px}

h1{text-decoration:blink}/*hi u ng nh p nháy*/ệ ứ ấh1{text-transform:capitalize}/*in hoa kí t đ u tiên trong m i t */ở ự ầ ỗ ừ

4.Thu c tính pseudo-classes for ộ links

 Cho phép b n xác đ nh hi u ng đ nh d ng cho m t đ i tạ ị ệ ứ ị ạ ộ ố ượng liên k t m t ế ở ộ

tr ng thái xác đ nh ạ ị

4.Thu c tính pseudo-classes for ộ

<li class=“tp”> Hà N i</li>ộ

<li class=“tp”> TP.HCM</li>

<li class=“tp”> Đà N ng</li>ẵ

<li class=“tinh”> Bình Đinh</li>

<li class=“tinh”> Khánh Hòa</li>

<li class=“tinh”> Th a Thiên Hu </li>ừ ế

</ul>

Trong CSS nh sau:ư

<li id=“hanoi”> Hà N i</li>ộ

<li id=“hcm”> TP.HCM</li>

<li class=“tinh”> Bình Đinh</li>

<li class=“tinh”> Khánh Hòa</li>

5.Class & ID

nó có th đ ể ượ ử ụ c s d ng nhi u l n ề ầ

 ID: dùng đ nh n d ng m t đ i t ể ậ ạ ộ ố ượ ng đ c tr ng ,id có tính duy nh t ặ ư ấ

không làm vi c v i firefox ệ ớ

6.Span và div trong HTML

 Nhóm ph n t v i th <Span>: ầ ử ớ ẻ

 Th trung hòa không thêm hay b t b t c th gì trong html Mà nó là công c ẻ ớ ấ ứ ứ ụ

đánh d u đ qua đó ta vi t CSS đ nh d ng cho ph n t mong mu n.ấ ể ế ị ạ ầ ử ố

 Ví du:

 Trong html: <p>khong co gi quy hon <span class="nhanmanh">doc

lap</span>,<span class="nhanmanh"> tu do</span></p>

 Trong CSS:

.nhanmanh{font-style:italic ; font-weight:bold ; font-size: 40px;}

6.Span và div trong HTML

7.Thu c tính border ộ

 Là thành ph n quan tr ng trong m t trang web.nó dùng trang trí ,đóng khung cho ầ ọ ộ

m t đ i tộ ố ượng c n nh n m nh ,phân cách các đ i tầ ấ ạ ố ượng giúp trang web trông d ễnhìn h n,….ơ

7.Thu c tính border ộ

7.Thu c tính border ộ

 Ví d :ụ

h1{border-width:thin; border-color:#ff0000; border-style:solid}

p{border-width:5px; border-color:#ff00ff; border-style:double}

h1{border-top-width: medium;

border-top-color:#ff0000;border-top-style:dotted}

 Css cung c p các ki u vi n nh sau: ấ ể ề ư

8.Thu c tính margin ộ

 Dùng đ canh l cho trang web hay m t thành ph n web này v i thành ph n web ể ề ộ ầ ớ ầkhác hay vi n trang.ề

9.Thu c tính padding ộ

9.Thu c tính padding ộ

10.Box Model

Mô t cách mà css đ nh d ng kh i không gian bao quanh m t thành ph n ả ị ạ ố ộ ầ

Mô hình h p c a đ i t ộ ủ ố ượ ng web c th : ụ ể

11.Height & width

11.Height & width

 Ví du:

p {width: 700px}

p{height: 300px}

12.Float và clear

 Float (theo nh nghĩa ti ng Vi t là th trôi) là m t thu c tính CSS dùng đ c ư ế ệ ả ộ ộ ể ố

đ nh m t thành ph n web v bên trái hay bên ph i không gian bao quanh nó.ị ộ ầ ề ả

 Thu c tính float có 3 giá tr : ộ ị

+ Left: C đ nh ph n t v bên trái.ố ị ầ ử ề

+ Right: C đ nh ph n t v bên ph i.ố ị ầ ử ề ả

+ None: Bình thường

 Clear :

13.Thu c tính layout ộ Position

13.Thu c tính layout Position ộ

#hinh2{

position: absolute;

top:0px;

right:0px }

#hinh3{

position: absolute;

bottom:0px;

left:0px }

#hinh4{

13.Thu c tính layout Position ộ

Ví d : ụ #hinh1{

position: relative;

top:50px;

left:20px }

#hinh2{

position: relative;

top:0px;

right:0px }

#hinh3{

position: relative;

bottom:0px;

left:0px }

#hinh4{

position: relative;

bottom:20px;

right:50px }

Cách đ t các thành ph n web các l p khác nhau Hay nói d hi u làc ách đ t ặ ầ ở ớ ễ ể ặ

m t thành ph n này lên m t thành ph n khác thông qua thu c tính z-index V i ộ ầ ộ ầ ộ ớ

m c đíc này, ta gán cho m i ph n t m t con s Ph n t có s cao h n s ụ ỗ ầ ử ộ ố ầ ử ố ơ ẽ

#hinh2{

position: absolute;

top:140px;

left:100px;

16.Thu c tính clip ộ