top
 0982.566.782
Thiet ke web hai phong chuyen nghiep
Thiết kế website, quảng cáo trực tuyến, xây dựng phần mềm, dịch vụ domain-hosting

Thiết kế web - Tài liệu CSS (Phần 2)

Ngày đăng: 22 - 08 - 2011

Thiết kế web - Tài liệu CSS (Phần 2) SỬ DỤNG CSS VỚI HTML, CSS có thể áp dụng với tài liệu HTML ở 3 cấp độ

Đăng bởi: Thiết kế web Hải Phòng - HPSOFT
 

SỬ DỤNG CSS VỚI HTML

 

CSS có thể áp dụng với tài liệu HTML ở 3 cấp độ

 

  1. CSS tại chỗ (inline CSS)

Với cách sử dụng này ta định nghĩa luôn qui tắc CSS cho một phần tử HTML tại điểm khai báo phần tử HTML đó với thẻ style

Ví dụ:

                                              

                                                                  Nội dung của phần tử này

                                   

         

 

Cách sử dụng này nói chung là thô thiển và chỉ được sử dụng trong các cánh huống đặc biệt cần thiết (style sheet chỉ áp dụng duy nhất cho một phần tử mà nó đặc tả) vì nó làm trộn lẫn mã trình diễn với nội dung của tài liệu -> Tài liệu gây rối mắt, khó bảo trì 

 

  1. CSS nội (internal CSS)    

Với cách sử dụng này, ta khai báo thẻ

                       

             

  1. CSS ngoại (external CSS)

Cách sử dụng này là hay được áp dụng nhất – ta tạo một file ngoại riêng (với phần mở rộng là .css). Sau đó, bên trong các trang Web ta sử dụng thẻ

để liên kết trang Web với file CSS đó

 

Như vậy có thể dùng các file ngoài CSS để dùng chung cho các trang Web, hoặc cho tất cả các trang trong Website

 

Ví dụ: Ta tạo một file ngoài có tên là myStyle.css như sau

 

          Body {

                   Background-color:  red;

                   Color: black;

                   Margin: 4px;

                   Border: 2px;

                   ..

}

 

p {

          align: center;

          color: red;

}

           

Để áp dụng style trong file myStyle.css cho trang Web thì trong trang Web đó ta sử dụng thẻ

để liên kết với file CSS

Ví dụ:

         

        

                  

                            

                            

                  

 

         

 

         

         

                                  THAM KHẢO CSS

Vì CSS cho phép áp đặt các qui tắc định dạng cho tất cả các phần tử HTML, và vì lớp các khía cạnh của định dạng là hết sức phong phú. Do đó, trong CSS người ta phân loại định dạng như sau

  1. CSS Background:

Quan tâm đến cac thuộc tính nền của một phần tử: Màu nền, ảnh nền, vị trí của ảnh trong một trang Web

        Sau đây là bảng tóm tắt các thuộc tính của CSS Background

 

Thuộc tính

Các giá trị có thể nhận

Mô tả

Background-attachment

Scroll, fixed

Ảnh nền là cố định hay bị cuốn theo tài liệu

Background-color

#value, RGB(c1, c2, c3), hoặc tên màu

Xác định màu nền

Background-image

url, none

Ảnh nền ở đâu, có hay ko

Background-position

Top-left, top-center, bottom-right, ..,

(%x, %y) hoặc (x, y)

Vị trí đặt ảnh nền

Background-repeat

Repeat, Repeat-x, repeat-y,

No-repeat

Ảnh có lặp lại ko, nếu lặp thì theo chiều ngang hay dọc, hay cả hai

background

 

Là bộ 5 các thuộc tính kể trên

 

  1. CSS Text

CSS Text cho phép đặc tả chính xác phần thể hiện định dạng cho văn bản: màu của văn bản

 

Thuộc tính

Các giá trị có thể nhận

Mô tả

color

RGB, name, #value

Màu của văn bản

direction

Ltr, rtl

Từ trái <-> phải

Letter-spacing

Normal, length

Khoảng cách ký tự

Text-align

Left, right, center, justify

Gióng cột

Text-decoration

Underline, overline, none,..

Gạch chân,..

Text-indent

Length, %

Thụt dòng đầu

Word-spacing

Normal, length

Khoảng trống từ

Text-transform

Capital, upper, lower, none

Dạng chữ thường, hoa,..

 

 

 

 

  1. CSS Font

CSS Font quan tâm việc định nghĩa Font cho văn  bản: họ font, kích thước, và kiểu dáng cho font

 

Bảng thuộc tính Font

Thuộc tính

Các giá trị có thể nhận

Mô tả

Font-family

name

Họ font: arial, Tahoma,.

Font-size

Smalll, mdium, large,..

Kích thước font

font-style

Normal, italic, oblique

Kiếu dáng font

Font-variant

Normal, small-caps

Biến thể font

Font-weight

Normal, bold, number

Trọng số font

..

 

 

 

 

 

 

  1. CSS Border

Quan tâm đến thuộc tính đường viền của phần tử: Độ rộng, màu sắc,..

  1. CSS Margin – Canh lề
  2. CSS Padding – Định nghĩa khoảng trống giữa phần tử với Border của nó
  3. CSS List - Định  dạng cho các phần tử List

 

(Tham khảo chi tiết tại Website: www.w3schools.com)

 ------------------------------------------------------------

CÔNG TY CỔ PHẦN GIẢI PHÁP PHẦN MỀM HẢI PHÒNG - HPSOFT.VN




Chia sẻ
Share on Facebook


.: Các tin thiết kế web khác :.

thiet ke web Hai Phong123

Tư vấn thiết kế web
Thiet ke web Hai Phong ho tro
Tư vần thiết kế website, hỗ trợ trực tuyến

     Hotline: 0982.566.782

   Kinh Doanh     Thiet ke website Hai Phong yahoo   Thiết kế web Hải Phòng Skype     Email tu van thiet ke web




Khách hàng nói về chúng tôi
Công ty thiết kế web Hải Phòng

CEO Nguyễn Văn Công

Công ty TNHH TMDV Trường Hưng. Tel: 0936 847 357

CEO Hà Thị Thanh Xuân

Công ty TNHH Cửa Cuốn Đại Phúc. Tel: 0912.665.189

CEO Tạ Thị Hương

Công ty In Phi Long. Tel: 0936.434.222

CEO Nguyễn Tuấn Dũng

Chủ tịch hệ thống Yoga Vàng Việt Nam. Tel: 0968.25.6868