Ai học CSS vô đây!

Thảo luận trong 'Ngôn ngữ lập trình web' bắt đầu bởi ngoisaobang, 23 Tháng ba 2011.

  1. Offline

    ngoisaobang

    • Friends

    Số bài viết:
    558
    Đã được thích:
    614
    Điểm thành tích:
    560
    Bài 1: Giới thiệu về css

    1.1. CSS là gì?
    Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm
    mỹ - làm đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng
    ta có CSS. Đây chỉ là một định nghĩa giàu hình ảnh của Pearl thôi (nhưng cũng
    thực tế nhỉ (smile). Còn CSS (Cascading Style Sheets mà Pearl tạm dịch là tờ mẫu
    theo Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết
    bằng HTML, XHTML, XML, SVG, hay UML,…

    1.2. Tại sao CSS?

    Nếu bạn đã từng học qua HTML thì cũng biết HTML cũng hỗ trợ một số
    thuộc tính định dạng cơ bản cho text, picture, table, … nhưng nó không thật sự
    phong phú và chính xác như nhau trên mọi hệ thống. 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, nên bạn hoàn toàn có thể tự tin trang web của mình có thể hiển
    thị hầu như “như nhau” dù trên một hệ thống sử dụng Windows, Linux hay trên
    một máy Mac miễn là bạn đang sử dụng một phiên bản trình duyệt mới nhất.
    Sử dụng các mã định dạng trực tiếp trong HTML tốn hao nhiều thời gian
    thiết kế cũng như dung lượng lưu trữ trên đĩa cứng. Trong khi đó CSS đưa ra
    phương thức “tờ mẫu ngoại” giúp áp dụng một khuôn mẫu chuẩn từ một file CSS ở
    ngoài. Nó thật sự có hiệu quả đồng bộ khi bạn tạo một website có hàng trăm trang
    hay cả khi bạn muốn thay đổi một thuộc tính trình bày nào đó. Hãy thử tưởng
    tượng bạn có một website với hàng trăm trang và bạn muốn thay đổi font chữ hay
    màu chữ cho một thành phần nào đó. Đó thật sự sẽ là một công việc buồn chán và
    tốn nhiều thời gian. Nhưng với việc sử dụng CSS việc đó là hoàn toàn đơn giản
    cũng như là bạn có một trò ma thuật nào đó.
    Ngoài ra, CSS còn cho phép bạn áp đặt những kiểu trình bày thích hợp hơn
    cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại,…
    CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.
    1.3. Học CSS cần những gì?

    Thật sự không có một điều kiện gì được quy định khi học CSS. Nhưng ở
    một khía cạnh nào đó thì một sự chuẩn bị cho một cuộc hành trình dù là dễ nhất
    vẫn không thừa vì ít nhất nó sẽ giúp bạn làm tốt hơn.
    Hành trang thứ nhất mà bạn nên có là một kiến thức về HTML, nó không
    thật sự cần thiết nếu bạn chỉ dùng CSS để trình bày cho một trang HTML có sẵn
    (như làm skin cho blog chẳng hạn), nhưng bạn vẫn cần biết ý nghĩa một số thẻ
    HTML, nó sẽ có ích khi bạn viết CSS. Tuy nhiên, nếu bạn muốn tự thiết kế, trình
    bày một trang web của riêng mình thì tùy theo quy mô trang web, bạn cần phải học
    thêm cả HTML, XHMTL, Javascript và một số ngôn ngữ lập trình web khác.
    Hành trang thứ hai chính là một trình soạn thảo văn bản để bạn có thể viết
    mã CSS. Ở đây, Pearl khuyên bạn nên sử dụng một trình soạn thảo đơn giản như
    Notepad, Wordpad trong Windows hay Pico trong Linux, Simple Text trong Mac.
    Nó sẽ giúp bạn chắc là code là của bạn và không có bất kỳ một sự can thiệt nào từ
    chương trình như khi dùng DreamWeaver, FrontPage, Golive,…
    Hành trang thứ ba của bạn chính lả một phiên bản mới nhất của trình duyệt
    mà bạn thường dùng.
    Và một điều nữa mà Pearl muốn đề nghị đó là các bạn hãy dành một ít thời
    gian để thực hành CSS sau mỗi bài học nó sẽ thật sự có ích cho bạn. Thực hành
    chẳng những giúp bạn vận dụng nhuần nhuyễn các bài học mà còn có tác dụng
    explain ngược lại những lý thuyết mà bạn chưa hiểu.
    Bây giờ nếu bạn đã thật sự chuẩn bị chúng ta hãy chuyển qua chương tiếp
    theo để thật sự bước chân vào thế giới CSS.




    Bai 2: Một số quy ước về cách viết css
    2.1. Cú pháp CSS:
    Để tìm hiểu cú pháp CSS chúng ta hãy thử xem một ví dụ sau.
    Ví dụ: Để định màu nền cho một trang web là xanh nhạt (light cyan) chúng ta dùng
    code sau:
    + Trong HTML: <body bgcolor=”#00BFF3”>
    + Trong CSS: body { background-color:#00BFF3; }
    Nhìn qua ví dụ trên ít nhiều chúng ta cũng thấy được mối tương đồng giữa
    các thuộc tính trong HTML và CSS cho nên nếu bạn đã học qua HTML thì cũng sẽ
    rất dễ dàng tiếp thu CSS. Đó là một chút lợi thế của câu chuyện hành trình mà
    Pearl đã nói ở bài trước. Nhưng không sao cả, bây giờ hãy nhìn vào ví dụ của
    chúng ta và các bạn xem nó có giống với cấu trúc sau không nhé.
    Cú pháp CSS cơ bản:

    HTML Code:
    Selector { property:value; }
    Trong đó:

    + Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Nó là

    các tag HTML, class hay id (chúng ta sẽ học về 2 thành phần này ở bài học sau).
    Ví dụ: body, h2, p, img, #title, #content, .username,…
    Trong CSS ngoài viết tên selector theo tên tag, class, id. Chúng ta còn có thể
    viết tên selector theo phân cấp như để chỉ các ảnh ở trong #entry, chúng ta viết
    selector là #entry img, như vậy thì các thuộc tính chỉ định sẽ chỉ áp dụng riêng cho
    các ảnh nằm trong #entry.
    Khi viết tên cho class, đôi khi sẽ có nhiều thành phần có cùng class đó, ví dụ
    như thẻ img và thẻ a cùng có class tên vistors nhưng đây lại là hai đối tượng khác
    nhau, 1 cái là ảnh của người thăm, 1 cái là liên kết tới trang người thăm. Nên nếu
    khi viết CSS ta ghi là .visitors { width:50 } thì sẽ ảnh hưởng tới cả hai thành phần.
    Nên trong trường hợp này, nếu bạn có ý dùng CSS đó chỉ riêng phần ảnh thì chỉ
    nền ghi là img .visitors thôi.
    Một lối viết tên selector nữa đó là dựa trên tên các thuộc tính có trong
    HTML. Ví dụ trong HTML ta có đoạn mã như vầy:

    HTML Code:
    <input name=”Search”

    type=”Text” value=”Key Word”>

    . Để áp dụng thuộc tính CSS cho riêng ô tìm
    kiếm này chúng ta sẽ dùng selector input[name=”Search”].
    Ngoài việc viết tên selector cụ thể, chúng ta cũng có thể dùng một selector
    đại diện như * { color:red } sẽ tác động đến tất cả các thành phần có trên trang web
    làm cho chúng có text màu đỏ.
    + Property: Chính là các thuộc tính quy định cách trình bày. Ví dụ: background-
    color, font-family, color, padding, margin,…
    Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một thuộc
    tính cho một selector thì chúng ta phải dùng một dấu ; (chấm phẩy) để phân cách
    các thuộc tính. Tất cả các thuộc tính trong một selector sẽ được đặt trong một cặp
    ngoặc nhọn sau selector.
    Ví dụ:

    HTML Code:
    body { background:#FFF; color:#FF0000; font-size:14pt }
    Để dễ đọc hơn, bạn nên viết mỗi thuộc tính CSS ở một dòng. Tuy nhiên, nó
    sẽ làm tăng dung lượng lưu trữ CSS của bạn.
    Ví dụ:

    HTML Code:
    body {

    background:#FFF;

    bolor:#FF0000;

    font-size:14pt

    }

    Đối với một trang web có nhiều thành phần có cùng một số thuộc tính,
    chúng ta có thể thực hiện gom gọn lại như sau:

    HTML Code:
    h1 { color:#0000FF;

    text-transform:uppercase }

    h2 {

    color:#0000FF;

    text-transform:uppercase;

    }

    h3 {

    color:#0000FF;

    text-transform:uppercase;

    }

    => h1, h2, h3 {

    color:#0000FF;

    text-transform:uppercase;

    }

    + Value: Giá trị của thuộc tính. Ví dụ: như ví dụ trên value chính là #FFF dùng để
    định màu trắng cho nền trang.
    Đối với một giá trị có khoảng trắng, bạn nên đặt tất cả trong một dấu ngoặc
    kép. Ví dụ: font-family:”Times New Roman”
    Đối với các giá trị là đơn vị đo, không nên đặt một khoảng cách giữa số đo
    với đơn vị của nó. Ví dụ: width:100 px. Nó sẽ làm CSS của bạn bị vô hiệu trên
    Mozilla/Firefox hay Netscape.
    Chú thích trong CSS:
    Cũng như nhiều ngôn ngữ web khác. Trong CSS, chúng ta cũng có thể viết chú
    thích cho các đoạn code để dễ dàng tìm, sửa chữa trong những lần cập nhật sau.
    Chú thích trong CSS được viết như sau /* Nội dung chú thích */
    Ví dụ:

    HTML Code:
    /* Màu chữ cho trang web */

    body {

    color:red

    }

    2.2. Đơn vị CSS:
    Trong CSS2 hỗ trợ các loại đơn vị là đơn vị đo chiều dài và đơn vị đo góc,
    thời gian, cường độ âm thanh và màu sắc. Tuy nhiên, sử dụng phổ biến nhất vẫn là
    đơn vị đo chiều dài và màu sắc. Sau đây là bảng liệt kê các đơn vị chiều dài và màu
    sắc dùng trong CSS.
    Đơn vị chiều dài

    [IMG]


    2.3. Vị trí đặt CSS:

    Ở trên chúng ta đã tìm hiểu về cú pháp viết CSS, nhưng còn đặt nó ở đâu
    trong tài liệu HTML? Trong phần này, Pearl xin giới thiệu với các bạn về vấn đề
    này.
    Chúng ta có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML
    + Cách 1: Nội tuyến (kiểu thuộc tính)
    Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu
    HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng. Và dĩ nhiên trong
    trường hợp này chúng ta sẽ không cần selector trong cú pháp.
    Lưu ý: Nếu bạn muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì
    không nên dùng cách này.
    Ở ví dụ sau chúng ta sẽ tiến hành định nền màu trắng cho trang và màu chữ xanh lá
    cho đoạn văn bản như sau:

    HTML Code:
    <html>

    <head>

    <title>Ví dụ</title>

    </head>

    <body style=”background-color=#FFF;”>

    <p style=”color:green”>^_^ Welcome To WallPearl’s Blog ^_^</p>

    </body>

    </html>

    + Cách 2: Bên trong (thẻ style)
    Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay
    thế cách thứ nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style (để
    tiện cho công tác bảo trì, sửa chữa ấy mà).
    Cũng ví dụ làm trang web có màu nền trắng, đoạn văn bản chữ xanh lá, chúng ta sẽ
    thể hiện như sau:

    HTML Code:
    <html>

    <head>

    <title>Ví dụ</title>

    <style type=”text/css”>

    body { background-color:#FFF }

    p { color:#00FF00 }

    </style>

    </head>

    <body>

    <p>^_^ Welcome To WallPearl’s Blog ^_^</p>

    </body>

    </html>

    Lưu ý: Thẻ style nên đặt trong thẻ head.
    Đối với những trình duyệt cũ, không thể nhận ra thẻ <style>. Theo mặc định, thì
    khi một trình duyệt không nhận ra một thẻ thì nó sẽ hiện ra phần nội dung chứa
    trong thẻ. Như ở ví dụ trên, nếu trình duyệt không hỗ trợ thẻ style thì 2 dòng CSS:
    body {background-color:#FFF } p { color:#00FF00 } sẽ hiện ra trên trình duyệt.
    Để tránh tình trạng này, bạn nên đưa vào thêm dấu <!-- ở trước và --> ở sau khối
    code CSS. Như ví dụ trên sẽ viết lại là:

    HTML Code:
    <style type=”text/css”>

    <!-- body { background-color:#FFF }

    p { color:#00FF00 } -->


    </style>

    + Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài)
    Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style
    chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css) bên ngoài và
    liên kết nó vào trang web bằng thuộc tính href trong thẻ link.
    Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay
    bảo trì một website lớn sử dụng cùng một kiểu mẫu. Các ví dụ trong sách này cũng
    được trình bày theo kiểu này.


    [IMG]


    Nào bây giờ chúng ta hãy mở Notepad lên và thử thực hiện theo ví dụ sau:
    Đầu tiên chúng ta sẽ tạo ra một file vidu.html có nội dung như sau:

    HTML Code:
    <html>

    <head>

    <title>Ví dụ</title>

    <link rel=”stylesheet” type=”text/css” href=”style.css” />

    </head>

    <body>

    <p>^_^ Welcome To WallPearl’s Blog ^_^</p>

    </body>

    </html>

    Sau đó hãy tạo một file style.css với nội dung:
    HTML Code:
    body {

    background-color:#FFF

    }

    p {

    color:#00FF00

    }

    Hãy đặt 2 file này vào cùng một thư mục, mở file vidu.html trong trình duyệt của
    bạn và xem thành quả.
    Lưu ý:
    Để lưu 1 file với 1 đuôi khác .txt trong Notepad chúng ta chọn Save as type
    là All Files. Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng
    Việt.
    Trong CSS chúng ta còn có thể sử dụng thuộc tính @import để nhập một file
    CSS vào CSS hiện hành. Cú pháp: @import url(link)
    2.4. Sự ưu tiên:

    Trước khi thực thi CSS cho một trang web. Trình duyệt sẽ đọc toàn bộ CSS
    mà trang web có thể được áp dụng, bao gồm: CSS mặc định của trình duyệt, file
    CSS bên ngoài liên kết vào trang web, CSS nhúng trong thẻ <style> và các CSS
    nội tuyến. Sau đó, trình duyệt sẽ tổng hợp toàn bộ CSS này vào một CSS ảo, và
    nếu có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau sẽ được ưu
    tiên sử dụng (cái này cũng giống như chương trình “Ai Là Triệu Phú” trên truyền
    hình vậy, chỉ câu trả lời sau cùng mới được chấp nhận (smile)). Theo nguyên tắc
    đó trình duyệt của bạn sẽ ưu tiên cho các CSS nội tuyến > CSS bên trong > CSS
    bên ngoài > CSS mặc định của trình duyệt.
    Ví dụ:
    Trong một trang web có liên kết tới file style.css có nội dung như sau:

    HTML Code:
    p {

    color:#333;

    text-align:left;

    width:500px

    }

    trong thẻ <style> giữa thẻ <head> cũng có một đoạn CSS liên quan:
    HTML Code:
    p {

    background-color:#FF00FF;

    text-align:right;

    width:100%;

    height:150px

    }

    trong phần nội dung trang web đó cũng có sử dụng CSS nội tuyến:
    <p style=”height:200px; text-align:center; border:1px solid #FF0000; color:#000” }
    Khi thực thi CSS trình duyệt sẽ đọc hết tất cả các nguồn chứa style rồi sẽ tổng hợp
    lại vào một CSS ảo và nếu có sự trùng lắp các thuộc tính CSS thì nó sẽ lấy thuộc
    tính CSS có mức ưu tiên cao hơn. Như ví dụ trên chúng ta sẽ thấy CSS cuối cùng
    mà phần tử p nhận được là:

    HTML Code:
    p {

    background-color:#FF00FF;

    width:100%;

    height:200px;

    text-align:center;

    border:1px solid #FF0000;

    color:#000

    }

    Vậy có cách nào để thay đổi độ ưu tiên cho một thuộc tính nào đó? Thật ra thì
    trong CSS đã có sẵn một thuộc tính giúp chúng ta thực hiện điều này, đó chính là
    thuộc tính !important. Chỉ cần bạn đặt thuộc tính này sau một thuộc tính nào đó
    theo cú pháp selector { property:value !important } thì trình duyệt sẽ hiểu đây là
    một thuộc tính được ưu tiên. Bây giờ, chúng ta cùng xét lại ví dụ trên nhưng có đặt
    thêm một số thuộc tính !important vào xem kết quả như thế nào nhé.

    HTML Code:
    p {

    width:500px;

    text-align:left !important;

    color:#333 !important

    }

    p {

    background-color:#FF00FF;

    width:100%;

    height:150px !important;

    text-align:right;

    }

    <p style=”text-align:center; height:200px; border:1px solid #FF0000; color:#000” }
    Phần CSS sẽ tác động lên thuộc tính p là:

    HTML Code:
    p {

    background-color:#FF0000;

    width:100%;

    height:150px !important;

    text-align:left !important;

    border:1px solid #FF0000;

    color:#333 !important

    }








    hongoctrien, sunboyhaihung_9x thích bài này.
  2. Offline

    Vitamin.A

    • Semi Late

    • À ha À Há À HÁ HÁ...
    Số bài viết:
    645
    Đã được thích:
    213
    Điểm thành tích:
    320
    lần sau đưa slide là đủ rồi

    Nếu ở đây có nhiều bạn cần bài tập về mảng này thì mình sẽ up mbook hướng dẫn css
    integersunboy thích bài này.
  3. Offline

    ngoisaobang

    • Friends

    Số bài viết:
    558
    Đã được thích:
    614
    Điểm thành tích:
    560
    Up lên cho cộng đồng ng học tại đây luôn chứ hè...! Ok! Và đây là
    Bài 3: Background


    Trong bài học này chúng ta sẽ được học về cách định màu nền/ảnh nền cho một
    trang web cũng như các kỹ thuật định vị, điều chỉnh ảnh nền.
    3.1. Màu nền (thuộc tính background-color):

    Thuộc tính background-color giúp định màu nền cho một thành phần trên
    trang web. Các giá trị mã màu của background-color cũng giống như color nhưng
    có thêm giá trị transparent để tạo nền trong suốt.
    Ví dụ sau đây sẽ chỉ cho chúng ta biết cách sử dụng thuộc tính background-color
    để định màu nền cho cả trang web, các thành phần h1, h2 lần lượt là xanh lơ, đỏ
    và cam.

    HTML Code:

    body {
    background-color:cyan
    }

    h1 {

    background-color:red
    }
    h2 {
    background-color:eek:range
    }
    3.2. Ảnh nền (thuộc tính background-image):

    Việc sử dụng ảnh nền giúp trang web trông sinh động và bắt mắt hơn. Để
    chèn ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính
    background-image.
    Bây giờ chúng ta sẽ cùng làm một ví dụ minh họa
    để xem thuộc tính background-image sẽ hoạt động
    ra sao. Đầu tiên hãy tìm một tấm ảnh mà bạn thích,
    ở đây Pearl sẽ lấy tấm ảnh logo của blog Pearl
    [IMG]

    Sau đó, chúng ta sẽ viết CSS để đặt logo này làm
    ảnh nền trang web như sau:
    HTML Code:
    body {
    background-image:url(logo.png)
    }
    h1 {
    background-color:red
    }
    h2 {
    background-color:eek:range
    }
    p {
    background-color: FDC689
    }
    Như các bạn đã thấy chúng ta sẽ phải chỉ định đường dẫn của ảnh trong cặp ngoặc
    đơn sau url. Do ảnh đặt trong cùng thư mục với file style3.css nên chúng ta chỉ cần
    ghi abc.jpg. Nhưng nếu chúng ta tạo thêm một thư mục img trong thư mục thì
    chúng ta sẽ phải ghi là background-image:url(img/abc.jpg). Đôi khi nếu không
    chắc lắm bạn có thể dùng đường dẫn tuyệt đối cho ảnh.
    3.3. Lặp lại ảnh nền (thuộc tính background-repeat):

    Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng
    lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn
    thừa. Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp
    kiểm soát trình trạng lặp lại của ảnh nền. Thuộc tính này có 4 giá trị:
    + repeat-x: Chỉ lặp lại ảnh theo phương ngang.
    + repeat-y: Chỉ lặp lại ảnh theo phương dọc.
    + repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
    + no-repeat: Không lặp lại ảnh.
    Bây giờ, chúng ta hãy thêm thuộc tính background-repeat này vào ví dụ trên thử
    xem sao.
    HTML Code:
    body {
    background-image:url(logo.png);
    background-repeat:no-repeat;
    }
    Các bạn xem, có phải ảnh nền đã không bị lặp lại như trong ví dụ trước, hãy thử
    thay đổi qua lại giữa các giá trị và xem kết quả tạo ra.
    3.4. Khóa ảnh nền (thuộc tính background-attachment):

    Background-attachment là một thuộc tính cho phép bạn xác định tính cố
    định của ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị:
    + scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.
    + fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh
    nền sẽ đứng yên khi bạn đang cuộn trang web.
    3.5. Định vị ảnh nền (thuộc tính background-position):

    Theo mặc định ảnh nền khi được chèn sẽ nằm ở góc trên, bên trái màn hình.
    Tuy nhiên với thuộc tính background-position bạn sẽ có thể đặt ảnh nền ở bất cứ vị
    trí nào (trong không gian của thành phần mà nó làm nền).
    Background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có
    khá nhiều kiểu giá trị cho thuộc tính position. Như đơn vị chính xác như
    centimeters, pixels, inches,… hay các đơn vị qui đổi như %, hoặc các vị trí đặt biệt
    như top, bottom, left, right.
    [IMG]
    Hình ảnh này đã bị thay đổi kích thước nhằm tránh làm vỡ giao diện. Bấm vào đây để xem ảnh ở kích thước đầy đủ ( 652x178 )[IMG]
    Ví dụ:
    [IMG]
    Hình ảnh này đã bị thay đổi kích thước nhằm tránh làm vỡ giao diện. Bấm vào đây để xem ảnh ở kích thước đầy đủ ( 649x141 )[IMG]
    Thuộc tính background rút gọn
    Khi sử dụng quá nhiều thuộc tính CSS sẽ gây khó khăn cho người đọc, công tác
    chỉnh sửa cũng như tốn nhiều dung lượng ổ cứng cho nên CSS đưa ra một cấu trúc
    rút gọn cho các thuộc tính cùng nhóm.
    Ví dụ: Chúng ta có thể nhóm lại đoạn CSS sau
    HTML Code:
    background-color:transparent;
    background-image: url(logo.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right bottom;
    thành một dòng ngắn gọn:
    HTML Code:
    background:transparent url(logo.png) no-repeat fixed right bottom;
    Từ ví dụ trên chúng ta có thể khái quát cấu trúc rút gọn cho nhóm background:
    Code:
    background:<background-color> | <background-image> | <background-repeat> |
    <background-attachment> | <background-position>
    Theo mặc định thì các thuộc tính không được đề cập sẽ nhận các giá trị mặc định.
    Ví dụ: Chúng ta sẽ bỏ qua hai thuộc tính background-attachment và background-
    position ở dòng mã trên đi:
    HTML Code:
    background:transparent url(logo.png) no-repeat;
    Hai thuộc tính không được chỉ định sẽ đơn thuần được thiết lập tới giá trị mặc định
    mà chúng ta điều biết là scroll và top left.



    Hihi! Nội dung tóm lược Những Bài tiếp theo! Để tránh cho mọi ng nhàm chán vì dài dòng.Có thể tải về học tại đây!
    Nội dung:
    Bài 1: Giới thiệu về css
    Bài 2 Một số quy ước về cách viết css
    Bài 3: Background
    Bài 4: Font chữ
    Bài 5: Text
    Bài 6: Pseudo-classes For Links
    Bai 7: Class & Id
    Bài 8: Span & Div
    Bài 9: Box model
    bài 10: Margin & Padding


    http://www.mediafire.com/?jmtad2e0gj0se0w

    Hoặc tài liệu giáo trình css tham khảo:http://www.mediafire.com/?kmxcp4brlk5oiw4
    Nhân tiện luôn! Ai có tài liệu chi về css hay Javascrip cứ up lên tham khảo! HI

    IME, longcx, integer1 người khác thích bài này.
  4. Offline

    zphuoocm

    • Thành Viên Mới

    Số bài viết:
    434
    Đã được thích:
    85
    Điểm thành tích:
    0
    post thêm reset css nữa đi pa.
  5. Offline

    thisicodon

    • ai mua trăng không!!!

    Số bài viết:
    367
    Đã được thích:
    269
    Điểm thành tích:
    320
    chao!!!bạn nào muốn tìm hiểu,học css tốt nhất hãy liên hệ qua yahoo mình:hanthiendinh11
  6. Offline

    SPD

    • Windows 98

    • Ngông cuồng, ngang tàng, phách lối
    Số bài viết:
    225
    Đã được thích:
    83
    Điểm thành tích:
    190
    Của bạn nè
    Mã:
    /*
    *  html5 doctor css reset | http://html5doctor.com/html-5-reset-stylesheet
    */
    html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
    body{line-height:1}
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
    nav ul{list-style:none}
    blockquote,q{quotes:none}
    blockquote:before,blockquote:after,q:before,q:after{content:none}
    a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
    ins{background-color:#ff9;color:#000;text-decoration:none}
    mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
    del{text-decoration:line-through}
    abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
    table{border-collapse:collapse;border-spacing:0}
    hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
    input,select{vertical-align:middle}
    
  7. Offline

    hoiuc

    • Windows 95

    • từ khi khi anh ý lên , mình đã hối hận khi vào đây /
    Số bài viết:
    26
    Đã được thích:
    15
    Điểm thành tích:
    110
    Ai có tài liệu HTML5+ CSS3 bằng tiếng việt thì share cho với.....
  8. Offline

    IME

    • Quy ẩn giang hồ

    Số bài viết:
    219
    Đã được thích:
    196
    Điểm thành tích:
    240

Chia sẻ trang này

Advertising: Linux system admin | nukeviet | nukeviet 4 | Upload ảnh miễn phí