hitechfocus

Học HTML Từ Đầu - Bài 4 - Thuộc Tính Css

Discussion in 'HTML' started by Maskters, May 21, 2015. Lượt xem: 1,363

  1. Maskters

    Maskters Administrator Staff Member

    [​IMG]
    1. Thẻ HTML có thể chứa một hoặc nhiều thuộc tính khác nhau để hiển thị trên trình duyệt những giao diện website đẹp mắt ( như màu sắc, bố cục, hình ảnh động, ánh sáng...). Ở bài học này chúng ta cùng tìm hiểu một số thuộc tính cơ bản nhưng được sử dụng nhiều nhất trong website.

    Thuộc tính css nền Tảng

    Một ví dụ nhỏ
    [​IMG]
    HTML:
    <p style="background-color:orange;">Do you like my background color?</p>
    OK, chúng ta đã thấy các thẻ <p> trong các bài 1,2 nhưng lần này chúng ta thấy rằng một thuôc tính css đã được thêm vào thẻ <p>
    HTML:
    <p style="background-color: orange;">
    .
    Thuộc tính này có ý nghĩ toàn bộ thẻ <p> sẽ có màu nền là màu cam (tất nhiên chúng ta sẽ sẽ phải ghi nhớ các mã màu để điền vào thích hợp). Kết quả trình duyệt sẽ hiển thị toàn bộ thẻ <p> sẽ có màu nền làm màu orange(cam).
    Các trình duyệt sẽ biết cách để làm thế nào để cho thẻ p có màu nền là màu da cam bởi vì chúng ta đang sử dụng các thẻ HTML, thuộc tính chuẩn ngôn ngữ website (tiêu chuẩn Cascading Style Sheets code).
    Các bạn thấy đó chúng ta có thể khai báo thuộc tính trực tiếp trên các thẻ bằng cách sử dụng một phần tử "style" được viết như sau: style="thuộc tính css bạn muốn gắn vào thẻ".
    Ví dụ nhỏ
    HTML:
    <p style="background: #000">Nội dung bên trong thẻ P </p>
    Bạn thử chạy kết quả này trên trình duyệt xem, kết quả toàn bộ thẻ <p> sẽ có màu nền là màu đen
    Một ví dụ khác
    Dưới đây là một ví dụ khác về việc thêm thuộc tính cho thẻ HTML. Trong ví dụ này, chúng tôi sử dụng thẻ <a> để tạo ra một liên kết đến một trang web khác( đối với link liên kết ta sử dụng phần tử href, cái này bạn phải ghi nhớ)
    HTML:
    <a href="http://www.html.am/html-codes/links/">HTML links</a>
    [​IMG]
    Rất nhiều thuộc tính có sẵn cho các thẻ (thành phần) trong HTML. Tôi sẽ hướng dẫn ở phần tiếp của bài
    Trong HTML, màu sắc có thể được bổ sung bằng cách sử dụng các thuộc tính css. Bạn có thể chọn cho nó một màu sắc mình thích bằng tên của nó
    (ví dụ, màu xanh), giá trị thập lục phân của nó là (#0000FF), giá trị RGB (ví dụ: rgb (0,0,255))hoặc giá trị HSL của nó là (240.100%, 100%) ).
    Mình nhắc lại bạn sẽ chọn giá trị màu thập lục phân để khai báo thuộc tính cho nó bằng khách như sau
    HTML:
    <p style="background: #0000FF> nội dung trong thẻ p </p>
    Kết quả chúng ta sẽ có màu nên là màu xanh
    Để biết được các giá trị màu rất đơn giản, bạn chỉ việt mở photoshop lên
    [​IMG]
    Để thêm màu sắc cho một phần tử HTML, bạn sử dụng style = "color: {color}", trong đó {color} là giá trị màu. Ví dụ như:
    [​IMG]
    a.Màu Nền
    Để thêm một màu nền cho một phần tử HTML, bạn sử dụng style = "background-color: {color}", trong đó {color} là giá trị màu. Ví dụ như:
    [​IMG]
    b.Border Color
    Để thêm một đường viền màu cho một phần tử HTML, bạn sử dụng style = "border: {width} {color} {style}", trong đó {width} là chiều rộng của biên giới, {color} là màu của border và {style} thuộc tính của thẻ đó. Ví dụ như:
    [​IMG]
    c. Tên màu
    Mã màu thập lục phân là một sự kết hợp của các chữ cái và số. Các con số đi 0-9 và các dòng chữ chạy từ A đến F. Khi sử dụng các giá trị màu thập lục phân trong HTML và thuộc tính CSS, bạn thêm dấu (#) vào trước ( ví dụ: #564665). Mới học các bạn sẽ thấy rất lạ về các dãy hệ màu thập lục phân này nhưng dần dần các bạn sẽ thấy rất quen thuộc, vì các hệ màu dùng trong website thường lặp đi lặp lại

    Biểu đồ dưới đây cho chúng ta biết được tên 17 màu bao gồm các quy định và đặc điểm kỹ thuật CSS 2.1, cùng với hệ thập lục phân RGB và các giá trị tường ứng.

    Bảng hệ số màu sắc này là một ví dụ nhỏ

    [​IMG]
    Bạn có thể tạo nên màu sắc riêng cho mình bằng cách chỉ cần nhập bất kỳ giá trị thập lục phân sáu chữ số (và thêm dấu # ở đầu. ví dụ: #ffffff - > đây chính là màu trắng). Trong ví dụ sau, tôi đang sử dụng mã tương tự trong bảng màu ở trên.
    [​IMG]
    Nếu chúng ta muốn đổi thành một màu xanh đậm hơn, vậy ta sẽ thay đổi giá trị thập lục phân một chút, như thế này:
    [​IMG]
    Bạn cũng có thể sử dụng alpha để xác định mức độ opacity (mờ màu sắc). Điều này chỉ có trên hệ màu RGB và HSL. Để làm điều đó ta thêm chữ "a" để ký hiệu chức năng của nó là làm opacity (mờ màu sắc) (tức là RGBA và HSLA). Ví dụ, rgba (0,0,255,0.5) kết quả ta chỉ có được 1 nữa màu xanh, khi sử dung HSLA (240, 100%, 50%, 0,5) cũng như vậy

    Dưới đây là một ví dụ của việc sử dụng RGBA để thay đổi opacity (mờ màu sắc).
    [​IMG]
    Dưới đây là một ví dụ của việc sử dụng HSLA để thay đổi opacity (mờ màu sắc).
    [​IMG]

    2. Bằng cách sử dụng hệ thập lục phân, RGB, hoặc ký hiệu HSL, bạn có một lựa chọn của hơn 16 triệu màu sắc khác nhau. Ví dụ, bạn có thể bắt đầu bằng 000000 và tăng bởi một giá trị tất cả các con đường lên đến FFFFFF. Mỗi giá trị khác nhau đại diện cho một màu khác nhau.

    Nhưng đừng lo lắng - bạn sẽ không cần phải nhớ mỗi giá trị màu thập lục phân này chi cho rắc rối! Việc chọn lựa màu sắc đã có những công cụ của ADOBE như photoshop, AI, Color Cop...
    Cũng hơi dài rồi, nên mình sẽ dừng tại đây. Ở bài học tiếp theo "học từ đầu html bài 5" chúng ta sẽ cùng tìm hiểu về thẻ <a> (liên kết website).
    author

    About the author

    Hey, my name is Maskters (T.A). I´m a Web Developer but love graphic design from KHANH HOA and I'm the creator of Hitechfocus.com .
    Last edited: Jul 4, 2015

Share This Page