04/10/2018, 17:07

Cùng tìm hiểu vệ Css ngôn ngữ hỗ trợ làm web đẹp hơn

Nếu như các bạn đã có kiến thức cơ bản về HTML rồi thì nên tìm hiểu thêm về Css để hoàn thiện được khả năng lập trình web của mình bằng các thuộc tính Css. Vậy để tìm hiểu về Css thì các bạn cần biết css là gì và làm nó như thế nào.Css giúp cho bạn có thể làm đẹp trang web.Khi mà bạn lên HTML ...

Nếu như các bạn đã có kiến thức cơ bản về HTML rồi thì nên tìm hiểu thêm về Css để hoàn thiện được khả năng lập trình web của mình bằng các thuộc tính Css.

Vậy để tìm hiểu về Css thì các bạn cần biết css là gì và làm nó như thế nào.Css giúp cho bạn có thể làm đẹp trang web.Khi mà bạn lên HTML xong thì web của bạn nhìn sẽ rất xấu để có thể giúp nó đẹp hơn thì Css đã ra đời nó như là một công cụ làm đẹp cho web.VD như web như một người con gái vậy còn Css là 1 chuyên gia makeup cho người con gái đó thêm môi đỏ, tóc xoăn, má hồng ….

css-icon

Giới thiệu cú pháp của CSS

Khi sử dụng Css với HTML: <body color=’red’></body>

Sử dụng css trong file css: body {color: red;}

Ở 2 ví dụ trên thì chúng ta sẽ thấy được mối tương đồng giữa HTML và CSS những ai đã làm quen với HTML rồi thì sẽ dễ dàng học hơn với CSS.

Cú pháp css: Phần từ {thuộc tính: giá trị;}

Trong cú pháp trên thì phần tử là các thẻ html như thẻ: <a>, <b>, <h1>,<h2>….

còn thuộc tính là thuộc tính quy định màu của web hay các cách tạo kiểu khác cho web còn phần giá trị chính là giá trị của các thuộc tính của css đặt cho web

Xem thêm: Bộ tài liệu hướng dẫn lập trình android cơ bản

Bạn cũng có thể sử dụng thuộc tính css thành từng dòng như thế này cho dễ nhìn:

.menu {

background:#000;

color:#FFFF00; font-size:13px;

font-weight:bold;

}

Những nếu là như thế các bạn sẽ bị ảnh hưởng về sau về mặt tốn giữ liệu về sau khi seo web sẽ phải tối ưu rất nhiều.

-Đối với một trang web mà có nhiều thẻ hay class, id thì chúng ta có thể viết gọn lại như sau cho CSS được tối ưu :

.header { color:#0000FF;

text-transform:uppercase;

}

.content{

color:#0000FF;

text-transform:uppercase;

}

.footer {

color:#0000FF;

text-transform:uppercase;

}

=>Ta sẽ viết 1 cách ngắn ngọn nhất :

   .header, .content, .footer{

color:#0000FF;

text-transform:uppercase;

}

Có 3 cách đặt CSS trong văn bản HTML

Cách 1: Css Inline css trên cùng 1 tag nghĩa là bạn đặt luôn CSS trong thẻ để định dạng.Nhưng cách này sẽ không hữu ích cho bạn.Nếu sử dụng nhiều Css inline chúng ta sẽ phải sử dụng nhiều thẻ style.

Cách 2: Chúng ta Css bên trong thẻ nhưng không trên cùng dòng mà chúng ta css ở phần thẻ head của trang HTML.Với cách này thì cũng không đem lại hiệu quả nhiều vì nếu css trên phần HTML thì nhìn sẽ rất tối mắt.

Cách 3: Chúng ta Css ở bên ngoài văn bản HTML nó là cách css hiệu quả và được nhiều lập trình viên sử dụng nhất. giúp giảm thiểu dung lượng của html trên web.Cú pháp css external cũng rất dễ bạn chỉ cần chèn thêm dòng lệnh <link rel=”stylesheet” type=”text/css” href”style.css” />

Gợi ý xem thêm:

  • Tài liệu lập trình ứng dụng ios
  • Mở lớp khoa hoc lap trinh php
0