Daothithem Css

BÁO CÁO TÌM HIỂU VỀ CSS
I. Giới thiệu về CSS.

1. Css là gì?
CSS: Cascading Style Sheet. Css cho phép bạn định dạng(font chữ, kích thước,
màu sắc ....) của các đối tượng sử dụng css đó.Ưu điểm của css là tách riêng
phần định dạng ra riêng khỏi phần nội dung do đó rất tiện khi bạn muốn thay đổi
giao diện của một website.
2. Các cách sử dụng CSS
Có 2 cách sử dụng CSS, :

-Cách 1: khai báo CSS trong file HTML
<head>
<title></title>
<style type="text/css">
nội dung các css
</style>
</head>
<body>
nội dung của web và sử dụng các định dạng của CSS
</body>
- sử dụng CSS được định nghĩa từ một file riêng:
<head>
<title><title>
<link rel="stylesheet" type="text/css"href="style.css" />
</head>
<body>
Đào Thị Thêm- K56A- CNTT 1

hoặc
<head>
<title><title>
<style type="text/css"> @import url(Path To stylesheet.css) </style>
</head>
<body>
3. Cú pháp của một css:
tên_css { thuộc_tính: giá_trị_của_thuộc_tính; }
ví dụ:
body {
background: #336699;
font-family: Verdana, Arial, serif;
}
- Chú thích
các đoạn chú thích trong CSS được đặt trong dấu
/* Chú thích */

II. Thuộc tính cơ bản của CSS.
1. CSS Class:
Cho phép định dạng style của các đối tượng(table,td,div,span...) Bạn có thể
sử dụng lặp đi lặp lại nhiều lần trong cùng một file HTML
Ví dụ:
<html>
<head>
</style>
</head>
<body>
<p><b>Lop K56A</b></p>
<span class="php">Lop K56A</span>
<div class="php">Lop K56A</div>
</body>
</html>
Kết quả:
2. CSS Margin:
Dùng để xác định khoảng cách giữa nó và đối tượng bao quanh nó
ta có thể sử dụng 4 thuộc tính của margin :
- margin-left: length/percent/auto;
- margin-right: length/percent/auto;
- margin-top: length/percent/auto;
- margin-bottom: length/percent/auto;
Trong đó:
- length (px,pt)
- percent (%)
- auto (auto)

Ví dụ 1:
<html>
<head>
p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
<p>Lop K56A - CNTT - ĐHSPHN </p>
<p class="topmargin">Lop K56A - CNTT - ĐHSPHN</p>
</body>
</html>
Kết Qủa:

Ví dụ 2:
<html>
<head>
p.topmargin
{
margin-top: 25%
}
</style>
</head>
<body>
<p>Lop K56A - CNTT - ĐHSPHN</p>

<p class="topmargin">Lop K56A - CNTT - ĐHSPHN</p>
</body>
</html>
Kết Qủa:

3. CSS Padding:
Dùng để xác định khoảng cách giữa nó với đối tượng bao quanh nằm trong nó.
Ta có thể sử dụng 4 thuộc tính của padding
- padding-left: length/percent;
- padding-right: length/percent;
- padding-top: length/percent;
- padding-bottom: length/percent;
Để định khoảng cách cho left,right,top,bottom
Có thể sử dụng một trong 2

- length (px,pt)
- percent (%)
Ví Dụ:
<html>
<head>
td {padding-left: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
Lop K56A - CNTT - ĐHSPHN
</td>
</tr>
</table>
</body>
</html>
Kết quả:

4. Một số định dạng cho Text:
- color: định dạng mẫu cho text

color: values;
trong đó values có thể là :
+ dạng tên: red,white...
+ dạng hex: #000000,#ff00cc,...
+ dạng rbg: rgb(255, 0, 0), rgb(0, 0, 0)...
Ví dụ:
<html>
<head>
h1 {color: red}
h2 {color: #336699}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1>K56A - CNTT</h1>
<p>K56A - CNTT</p>
</body>
</html>
Kết quả:

- Letter Spacing: khoảng cách giữa các ký tự
letter-spacing: value;
trong đó value có thể là :
+ normal(normal)
+ length(1px,1pt...)
Ví dụ:
<span style="letter-spacing:5px;">ABC</span>
kết quả:
ABC
- Text Align: canh lề khối văn bản

text-align: value;
trong đó values có thể là :
+ left
+ right
+ center
+ justify
Ví dụ:
<html>
<head>
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
</body>
</html>

Kết quả:
- Text Decoration
text-decoration: value;
trong đó value có thể là 1 trong các giá trị sau
+ none
+ underline (gạch chân)
+ overline (gạch trên đầu)
+ line through (gạch xuyên chữ)
+ blink
Ví dụ:
<html>
<head>
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}
</style>
</head>
<body>
<p><a href="http://www.w3schools.com/default.asp">This is a
link</a></p>
</body>
</html>

Kết quả:
- Text-indent: định dạng thụt đầu dòng cho dòng đầu tiên trong một đoạn văn
text-indent: value;
trong đó value có các giá trị :
+ length : 1px,1pt..
+ percentage: 5%,10%..
Ví dụ:
<html>
<head>
p {text-indent: 1cm}
</style>
</head>
<body>
<p>
Co nhung luc toi lang thang tim den
Noi nao do thua thieu cua rieng toi
Nhung tat ca deu voi cang ne tranh
Chi con minh toi tro troi giua dong doi
</p>
</body>
</html>

Kết quả:
- Text Transform: định dạng chữ hoa chữ thường

text-transform: value;
trong đó value gồm các giá trị:
+ none
+ capitalize
+ lowercase
+ lowercase
Ví dụ:
<html>
<head>
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>
<body>
<p class="uppercase">K56A - CNTT</p>
<p class="lowercase">K56A - CNTT</p>
<p class="capitalize">K56A - CNTT</p>

</body>
</html>

Kết quả:
- White Space:
white-space: value;
+ normal
+ pre
+ nowrap
Ví dụ:
<html>
<head>
p
{
word-spacing: 30px
}
</style>
</head>
<body>
<p>
K56A - CNTT - DHSPHN.
</p>
</body>
</html>

Kết quả:
- Word Spacing
word-spacing: value;
trong đó valu gồm các giá trị
+ normal
+ length (1,2...)
Ví dụ:
<span style="word-spacing: 5px;">These words are spaced </span>
Kết quả: These words are spaced
5. CSS Font Properties:

Định dạng style của text như: font,size,color,.....
- font-family: định dạng font

font-family: Verdana, sans-serif; : set font Verdana là font mặc định, nếu không
có font Verdana trên máy thì sử dụng font sans-serif
- Font Size: định kích thước cho text

font-size: value;
trong đó value có thể là :
+ xx-large
+ x-large
+ larger
+ large
+ medium
+ small
+ smaller
+ x-small
+ xx-small
+ length ( như: px,pt,in,cm,mm,...)
+ % (percent)
- Font Style: định dạng in đậm,in nghiêng...

font-style: value;

trong đó value bao gồm:
+ normal
+ itailc
+ oblique
- Font Weight: định dạng độ lớn của text

font-weight: value;
+ lighter
+ normal
+ 100
+ 200
+ 300
+ 400
+ 500
+ 600
+ 700
+ 800
+ 900
+ bold
+ bolder
Ví dụ:
<html>
<head>
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
</style>
</head>
<body>
<p>K56A - CNTT</p>
<p class="sansserif">K56A - CNTT</p>
</body>
</html>

Kết quả:
6.CSS Links:
Cho toàn bộ trang web:
- a: link { properties: value; } /* tác dụng khi không có bất kỳ sự kiện gì xảy ra*/
- a: visited { properties: value; }/* tác dụng khi link náy được click và back trở
lại*/
- a: active { properties: value; }/* khi click chuôt lên link và chưa buông ra*/
- a: hover { properties: value; }/*khi đưa chuột ngang qua link*/
- a: focus { properties: value; }/* khi user dùng phím tab để đưa con trỏ đến
link(không dùng mouse)*/
Cho một vùng của web, thông qua một class:
.class_namea: link { properties: value; }

.class_namea: visited{ properties: value; }
.class_namea: active { properties: value; }
.class_namea: hover { properties: value; }
.class_namea: focus { properties: value; }

hoặc
a.class_name: link { properties: value; }
a.class_name: visited{ properties: value; }
a.class_name: active { properties: value; }
a.class_name: hover { properties: value; }
a.class_name: focus { properties: value; }
các định dạng thẻ a này chỉ có ảnh hưởng trong các đối tượng sử dụng css
class_name
và áp dụng tương tự cho trường hợp nếu sử dụng id (#)
7. CSS Background:
Background định dạng background, các thuộc tính:
- background-attachment: value;
value:
+ scroll
+ fixed
- background-color: value; /* giá trị màu */
Ví dụ:
<html>
<head>
body {background-color: #336699}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<p>K56A - CNTT</p>
</body>
</html>

Kết quả:
- background-image: url(path_to_image);
Ví dụ:
<html>
<head>
body
{
background-image:
url('019861869177.jpg')
}
</style>
</head>
<body>
</body>
</html>

Kết quả:
- background-position: value; vị trí bắt đầu của background

value:
+ top left
+ top center
+ top right
+ center left
+ center center
+ center right
+ bottom left
+ bottom center
+ bottom right
+ x-% y-%
+ x-pos y-pos
- background-repeat: value; điều khiển quá trình lặp lại của image
value:
repeat (lặp theo tất cả cách hướng)
Ví dụ:
<html>
<head>

body
{
background-image:
url('019861869177.jpg');
background-repeat: repeat
}
</style>
</head>
<body>
</body>
</html>
Kết quả:

no-repeat ( không lặp)
Ví dụ:
<html>
<head>
body
{
background-image:
url('019861869177.jpg');
background-repeat: no-repeat
}
</style>
</head>
<body>
</body>
</html>
Kết quả:

repeat-x (chỉ lặp theo trục x)
Ví dụ:
<html>
<head>
body
{
background-image:
url('019861869177.jpg');
background-repeat: repeat-x
}
</style>
</head>
<body>
</body>
</html>
Kết quả:

repeat-y (chỉ lặp theo trục y)
Ví dụ:
<html>
<head>
body
{
background-image:
url('019861869177.jpg');
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
Kết quả:

8. Border
Thuộc tính ngắn cho tất cả các thiết lập border cho một thành phần:
- Border – width: Thiết lập độ rộng đường viền:
Thin
Medium
Thick
<length>
Ví dụ:
<html>
<head>
p.one
{
border-style: solid;
border-width: 5px
}
p.two
{
border-width: thick
}
p.three
{
border-width: 5px 10px
}
p.four
{
border-width: 5px 10px 1px
}
p.five
{
border-width: 5px 10px 1px medium
}
</style>
</head>
<body>

<p class="one">K56A - CNTT</p>
<p class="two">K56A - CNTT</p>
<p class="three">K56A - CNTT</p>
<p class="four">K56A - CNTT</p>
<p class="five">K56A - CNTT</p>
</body>
</html>
Kết quả:
- Borde – color: Thiết lập màu cho đường viền:

<color>
Ví dụ:
<html>
<head>
p.one
{
border-color: #0000ff
}
p.two
{

border-color: #ff0000 #0000ff
}
p.three
{
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
</style>
</head>
<body>
<p class="one">K56A - CNTT</p>
<p class="two">K56A - CNTT</p>
<p class="three">K56A - CNTT</p>
<p class="four">K56A - CNTT</p>
</body>
</html>
Kết quả:

- Borde – style: Thiết lập kiểu đường viền
None
Hidden
Solid
Dotted
Dashed
Double
Groove
Ridge
Inset
Outset
Ví dụ:
<html>
<head>
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>
<body>
<p class="dotted">K56A - CNTT</p>
<p class="dashed">K56A - CNTT</p>
<p class="solid">K56A - CNTT</p>
<p class="double">K56A - CNTT</p>
<p class="groove">K56A - CNTT</p>
<p class="ridge">K56A - CNTT</p>
<p class="inset">K56A - CNTT</p>

<p class="outset">K56A - CNTT</p></body>
</html>
Kết quả:

Daothithem Css

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Daothithem Css

Uploaded by

Copyright:

Available Formats

BÁO CÁO TÌM HIỂU VỀ CSS

I. Giới thiệu về CSS.

2. Các cách sử dụng CSS

Có 2 cách sử dụng CSS, :

- sử dụng CSS được định nghĩa từ một file riêng:

Đào Thị Thêm- K56A- CNTT 1

3. Cú pháp của một css:

tên_css { thuộc_tính: giá_trị_của_thuộc_tính; }

Đào Thị Thêm- K56A- CNTT 2

Đào Thị Thêm- K56A- CNTT 3

Đào Thị Thêm- K56A- CNTT 4

<p>Lop K56A - CNTT - ĐHSPHN</p>

Đào Thị Thêm- K56A- CNTT 5

Để định khoảng cách cho left,right,top,bottom

Có thể sử dụng một trong 2

Đào Thị Thêm- K56A- CNTT 6

- color: định dạng mẫu cho text

Đào Thị Thêm- K56A- CNTT 7

- Text Align: canh lề khối văn bản

Đào Thị Thêm- K56A- CNTT 8

Đào Thị Thêm- K56A- CNTT 9

Đào Thị Thêm- K56A- CNTT 10

- Text Transform: định dạng chữ hoa chữ thường

<p class="lowercase">K56A - CNTT</p>

<p class="capitalize">K56A - CNTT</p>

Đào Thị Thêm- K56A- CNTT 11

Đào Thị Thêm- K56A- CNTT 12

5. CSS Font Properties:

- font-family: định dạng font

- Font Size: định kích thước cho text

- Font Style: định dạng in đậm,in nghiêng...

Đào Thị Thêm- K56A- CNTT 13

- Font Weight: định dạng độ lớn của text

Đào Thị Thêm- K56A- CNTT 14

Cho toàn bộ trang web:

Cho một vùng của web, thông qua một class:

.class_namea: link { properties: value; }

Đào Thị Thêm- K56A- CNTT 15

Đào Thị Thêm- K56A- CNTT 16

Đào Thị Thêm- K56A- CNTT 17

- background-position: value; vị trí bắt đầu của background

Đào Thị Thêm- K56A- CNTT 18

Đào Thị Thêm- K56A- CNTT 19

Đào Thị Thêm- K56A- CNTT 20

Đào Thị Thêm- K56A- CNTT 21

Đào Thị Thêm- K56A- CNTT 22

Đào Thị Thêm- K56A- CNTT 23

- Borde – color: Thiết lập màu cho đường viền:

Đào Thị Thêm- K56A- CNTT 24

<p class="one">K56A - CNTT</p>

<p class="two">K56A - CNTT</p>

<p class="three">K56A - CNTT</p>

<p class="four">K56A - CNTT</p>

Đào Thị Thêm- K56A- CNTT 25

<p class="dashed">K56A - CNTT</p>

<p class="solid">K56A - CNTT</p>

<p class="double">K56A - CNTT</p>

<p class="groove">K56A - CNTT</p>

<p class="ridge">K56A - CNTT</p>

<p class="inset">K56A - CNTT</p>

Đào Thị Thêm- K56A- CNTT 26

Đào Thị Thêm- K56A- CNTT 27

You might also like