Giới thiệu về CSS

15
873

Để thiết kế theme hay chỉnh sửa lại theme cho blog thì bạn nhất thiết phải biết về CSS. Nhưng nói là biết về CSS thì rộng quá nên bây giờ chúng ta sẽ bắt đầu từ từ tìm hiểu và chinh phục CSS. Để chinh phục thành công một điều gì đó trước tiên bạn cần biết nó là gì đã. Nào, chúng ta hãy bắt đầu.

CSS là gì?

CSS là chữ viết tắt của cụm từ tiếng Anh “Cascading Style Sheet”, là kiểu thiết kế sử dụng nhiều lớp định dạng chồng lên nhau. CSS được tổ chức World Wide Web (W3C) giới thiệu vào năm 1996. Cách đơn giản nhất để hiểu CSS là hãy coi nó như một phần mở rộng của HTML để giúp đơn giản hóa và cải tiến việc thiết kế cho các trang web.

Một tiện ích của CSS là bạn chỉ phải định nghĩa các Style (kiểu dáng, định dạng, v.v..) một lần và các trình duyệt có thể áp dụng các Style này nhiều lần trong một văn bản. Ví dụ: nếu bạn muốn một số Tiêu đề của bài viết trên blog của bạn có nét Chữ đậmMàu xanh, thì thay vì phải lập lại các giá trị Chữ đậmMàu xanh  này cho từng tiêu đề, bạn chỉ cần định nghĩa Chứ đậmMàu xanh thành một Style và Style này sẽ được áp dụng cho tất cả các tiêu đề mà bạn muốn.

Ưu điểm của CSS

– CSS có thể tách riêng phần định dạng ra khỏi nội dung một trang web, do đó nó sẽ rất thuận tiện khi bạn muốn thay đổi giao diện của một trang web.

– CSS là một sợi chỉ xuyên suốt trong quá trình thiết kế một website bởi vì nó cho phép nhà thiết kế kiểm soát toàn bộ giao diện, kiểu cách và sự sắp đặt của nhiều trang hay nhiều đối trong một lần định nghĩa. Để thay đổi tổng thể hay nhiều đối tượng có cùng Style, bạn chỉ cần thay đổi Style đó và lập tức tất cả các thành phần áp dụng Style đó sẽ thay đổi theo. Nó giúp bạn tiết kiệm công sức rất nhiều.

– Do định nghĩa các Style có thể được tách riêng ra khỏi nội dung của trang web, chúng được các trình duyệt load một lần và sử dụng cho nhiều lần, do đó nó giúp các trang web nhẹ hơn và chạy nhanh hơn.

Các đặc tính cơ bản của CSS

– CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó (font chữ, màu sắc). Để cho thuận tiện bạn có thể đặt toàn bộ các thuộc tính của thẻ vào trong một file riêng có phần mở rộng là “.css”, thường người ta hay đặt tên nó là stylesheet.css.

CSS nó phá vỡ giới hạn trong thiết kế Web, bởi chỉ cần một file CSS có thể cho phép bạn quản lí định dạng và layout trên nhiều trang khác nhau. Các nhà phát triển Web có thể định nghĩa sẵn thuộc tính của một số thẻ HTML nào đó và sau đó nó có thể dùng lại trên nhiều trang khác.

– Có thể khai báo CSS bằng nhiều cách khác nhau. Bạn có thể đặt đoạn CSS của bạn phía trong thẻ <Head>…</Head>, hoặc ghi nó ra một file riêng với phần mở rộng “.css”, ngoài ra bạn còn có thể đặt chúng trong từng thẻ HTML riêng biệt.

Thứ tự xếp lớp

Style nào sẽ được áp dụng khi có nhiều hơn một style được chỉ định cho một thành phần HTML? Tùy vào từng cách đặt khác nhau mà mức độ ưu tiên cho nó cũng khác nhau. Mức độ ưu tiên này tuân theo thứ tự sau:

1. Style nội tuyến – Style đặt trong từng thẻ HTML riêng biệt.

2. Stylet bên trong – Style đặt bên trong cặp thẻ <Head> … </Head>.

3. Style bên ngoài – Style đặt trong các file riêng có đuôi “.css”.

4. Style theo mặc định của trình duyệt.

– CSS có tính kế thừa và tính kết hợp

Tính kế thừa

Giả sử rằng ở đầu file styleshet.css  bạn khai báo cho Body có các thuộc tính sau:

body {

                font: Arial, Verdana;

                background: #FF6600;

}

Nhưng trong trường hợp bạn muốn khai báo cho các đối tượng nhỏ hơn nằm trong đó như Sidebar:

#sidebar {

                with: 300px;

                padding: 10px;

                font: Tahoma, Verdana;

}

Sau đoạn khai báo này thì Sidebar sẽ có thuộc tính:

#sidebar {

                background: #FF6600;

                with: 300px;

                padding: 10px;

                font: Tahoma, Verdana;

}

Như vậy, Sidebar đã kế thừa thuộc tính background của Body, và trong đó thuộc tính font là Tahoma đã đè lên thuộc tính font Arial ở lần khai báo trước.

Tính kết hợp

Có thể định nghĩa nhiều CSS cùng một thuộc tính thay vì phải định nghĩa riêng lẻ từng cái một.

Ví dụ:

h1, h2, h3, h4 {

Font-family: Tahoma, arial;

Color: #D4D4D4;

}

Thay cho việc định nghĩa riêng biệt cho từng cái.

h1{

Font-family: Tahoma, arial;

Color: #D4D4D4;

}

 

h2 {

Font-family: Tahoma, arial;

Color: #D4D4D4;

}

……………………………

h4 {

Font-family: Tahoma, arial;

Color: #D4D4D4;

}

15 BÌNH LUẬN

  1. Bên dưới Style this Profile, bạn sẽ thấy có chữ “Show advance CSS”, click vào đó nó sẽ chuyển sang chế độ giúp bạn điền CSS vào.

  2. Xin hỏi 1 chút ngoài lề mong các bạn giúp:
    Mỗi khi Post 1 bài mới trong blogger.com làm sao để cho nó chỉ hiện thị 1 phần dầu của baì thôi, giống phamen.com vậy.

    Xin cám ơn

  3. Xin nói rõ cho bạn biêt, Phamen đang sử dụng platform của WordPress.org chứ không sử dụng Blogger.com. WordPress có rất nhiều ưu điểm vượt trội so với blogger.com.
    Bạn có thể tìm hiểu thêm tại đây:
    https://www.phamen.com/lua-chon-blog-platform/

    Còn cách tạo các phần >>đọc tiếp, Phamen xin mời bạn vào đây để tham khảo:
    http://www.vietwebguide.com/2007/10/to-read-more-cho-mi-bi-vit.html

  4. Anh ơi cho em hỏi làm sao cho font chữ wp to ra chút. them em thay chữ nó nhỏ quá.tìm trong css nhưng em ko biét
    chỉ em nah

  5. Xin chào Anh Tuấn,

    Thật sự rất muốn giúp bạn, nhưng để chỉnh font chữ thì có rất nhiều có có thể chỉnh: ở Header, ở Footer, ở Sidebar, ở Content….

    Thường thì tất cả các định dạng này sẽ nằm ở file style.css ở trong theme.

    Nhưng mỗi nhà thiết kế lại có cách viết, cách sắp xếp vị trí của những chỗ định nghĩa kích cỡ font ở một chỗ khác nhau. Nên nếu không trực tiếp đọc được file Style.css này thì Phamen không thể giúp bạn được.

    NHưng Phamen có thể gợi ý cho bạn như sau:

    – Chỉnh kích cỡ của font ở Header, thường thì chúng sẽ nằm trong các Class là header (viết là .Header) hoặc là các ID Header (viết là #Header.
    – Tương tự, ở Footer là .Footer hoặc #Footer.
    – Ở Sidebar, .Sidebar hoặc #Sidebar.
    – Ở Content (ở phần nội dung các bài viết), thường là .Content hoặc #Content.

    Và phần định nghĩa kích cỡ font chữ thường được định nghĩa bằng cụm từ: font-side

    Ví dụ: font-side: 12px; hoặc font-side: 12em;

    Bạn chỉ cần tìm các cụm từ này và tăng hoặc giảm theo ý của bạn là được.

    Chúc bạn thành công!

  6. xin chào Phần mềm, em không có kinh nghiệm nhiều lắm về CSS,cho em hỏi về cách bố trí các mục như content,slidebar,… trên một trang web khi sử dụng width. Thật khó để xác định vị trí của các đối tượng trên web. Em xin cảm ơn phần mềm, Web của anh thật hay

  7. Vòa cái thời đại này có cần phải cố gắng bưng bít, chặn, xóa các nguồn thông tin như thế không vậy? và quan trọng hơn họ có thể làm đc điều đó không ?

  8. Nghe từ bưng bít có vẻ nặng nề, nhưng chắc chắn sẽ không thể ngăn chặn hoặc hạn chế thông tin bằng cách này hay cách khác. yêu cầu trở lại chủ đề chính của phần mềm : Giới thiệu về CSS 😀 Chúc vui!