/ / Html & Css / Comment (0)

Tổng quan về css

Ở những bài học trước đã giúp các cách để xây dựng một trang web bằng html. Nhưng nếu một trang web chỉ sử dụng html thì trang web đó sẽ không đẹp hay nói cách khác trang web đó có tính thẩm mỹ không cao.Các bạn hãy liên tưởng html nó như là khung chứa dữ liệu trong website còn css nó như là chiếc áo.Những gì liên quan tới giao diện của website thì đó chính là công việc của css

1. Tổng quan về css

– CSS là viết tắt của cụm từ “Cascading Style Sheet” , nó là một ngôn ngữ quy định cách trình bày của các thẻ HTML trên trang web

– CSS quy định cách hiển thị nội dung của các thẻ HTML trên các trình duyệt gần như giống nhau,bằng cách quy định các thuộc tính cho thẻ HTML đó.

– Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v..

2 .Tại sao lại sử dụng css trong thiết kế website

– Css có thể tùy chỉnh bố cục định dạng hiển thị nội dung,màu sắc căn chỉnh màu nền,đường viền,đổ bóng… cho các thẻ html.Nếu 1 website mà chỉ làm bằng html không sử dụng css thì website đó nhìn sẽ rất thô xơ.Bạn có thể tưởng tượng nó như 1 chiếc xe máy mà bỏ hết lớp sơn và áo bên ngoài chỉ còn lại mỗi bộ khung và máy.

– CSS cung cấp cho bạn hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả

– Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt khác nhau

3. Cách chèn css vào website

– Trên thực tế thì chúng ta có tới 3 cách hay được sử dụng chèn css và website

+ Cách 1: Chèn nội dung CSS vào trong cặp thẻ <style> </style> trong phần <head></head> của trang web


<html>
    <head>
         <title>Tổng quan về css</title>
         <style>
             body{  background:red;    }    
             h1{ color:blue; font-size:18px;  }        
         </style>
    </head>   
    <body>
        <h1>Bài học Tổng quan về css tại hocphp.info</h1>
    </body>              
</html>

+ Cách 2: Chèn nội dung CSS vào trực tiếp vào thẻ mở html thông qua thuộc tính style

<html>
    <head>
         <title>Tổng quan về css</title>
    </head>   
    <body>
        <h1 style="color:blue; font-size:18px;">Bài học Tổng quan về css tại hocphp.info</h1>
    </body>              
</html>

+ Cách 3: Lưu nội dung css ra 1 file riêng có phần mở rộng là .css và chèn file này vào website thông tin thẻ <link>,thường file css được chèn trong cặp thẻ <head></head>

Sau khi tạo file có tên style.css với nội dung ví dụ như sau:

body{  background:red;    }    
 h1{ color:blue; font-size:18px;  }

Lúc này chúng ta sẽ chèn file này vào website như sau

<html>
    <head>
         <title>Tổng quan về css</title></pre>
         <link rel="stylesheet" href=“style.css" type="text/css" />
    </head>
   <body>
        <h1>Bài học Tổng quan về css tại hocphp.info</h1>
    </body>              
</html>

Chú ý: Theo mình thì chúng ta lên sử dụng theo các thư 3,vì như vậy sẽ dễ quản lý code dễ hơn,sau này có chỉnh sửa chỉ cần vào file này sửa là ok.Bài sau mình sẽ hướng dẫn các bạn các thuộc tính quan trọng trong css



31/08/2014
Tags:
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL