Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Các lệnh thường dùng trong CSS

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi springriver, 5/2/15.

Lượt xem: 5,517

  1. springriver Thành viên cấp 1

    Việc đầu tiên cần phải quan tâm đối với CSS đó chính là sự tương thích với các trình duyệt web. Hiện nay có rất nhiều trình duyệt khác nhau, nhưng có lẽ dùng nhiều nhất là Chrome và Mozila . Vì vậy mà viết các đoạn mã CSS sao cho tất cả các trình duyệt đều hiểu được không phải là dễ, nhưng cũng không phải là quá khó
    [​IMG]

    1. Lệnh margin
    gồm có:

    .ClassName{

    margin-left:20px ;

    margin-right:20px ;

    margin-top:20px ;

    margin-bottom:20px ;

    }

    ta có thể viết gộp lại như sau:

    .ClassName{

    margin: 20px;

    }

    hoặc

    .ClassName{

    margin: 20px 30px;

    }

    căn lề trên và dưới 20px, lề trái và phải là 30px.

    hoặc:

    .ClassName{

    margin: 20px 30px 50px;

    }

    lề trên căn 20px, lề trái và phải căn 30px, lề dưới căn 50px;

    hoặc:

    .ClassName{

    margin: 20px 30px 40px 50px;

    }

    sẽ có thứ tự là margin: top right bottom left;
    2. Lệnh padding.
    Cũng có các thành phần và cách viết gộp như margin nên mình không nhắc lại nữa.

    Sự khác nhau giữa lệnh padding và lệnh margin là:

    – Khi dùng margin để căn lề thì kích thước của khung nội dung được giữ nguyên.

    – Khi dùng padding thì kích thước nội dung sẽ thay đổi. Ví dụ: khung nội dung có độ rộng 200px, dùng dùng căn lề trái là padding-left: 20px, khu sẽ bị dịch sang phải 20px đồng thời độ rộng của khung sẽ được cộng thêm 20px thành 220px.
    3. Lệnh background.
    .ClassName{

    background-color: transparent; // làm trong nền trong suốt
    background-image: url(‘/image.jpg’); // ảnh nền
    background-repeat: no-repeat; // thuộc tính lặp lại
    background-position: top right; // vị trí nền
    background-attachment: scroll; // nền trượt

    }

    – ví dụ như bạn muốn tạo ảnh nền trong suốt, nằm trên cùng bên phải, không lặp lại, và di chuyển theo chuột, lệnh sẽ là:

    CODE .ClassName {
    background: transparent url(‘image.jpg’) no-repeat top right scroll;
    }
    4. Lệnh font:
    .ClassName {
    font-variant:-small-caps;
    font-weight:bold;
    font-size:1em;
    line-height:1.4em;
    font-family:Georgia, serif;
    }

    5.Lệnh cho list (ul):

    ul {
    list-style-type: decimal-leading-zero;
    list-style-position:inside;
    list-style-image: none; // sử dụng ảnh, nếu muốn sử dụng ảnh cho list, bạn chỉ việc thay none bằng url(‘link ảnh’)
    }

    để đơn giản ta gộp các thuộc tính chung lại:

    ul {
    list-style: decimal-leading-zero inside url(‘image.jpg’);
    }

    6.lệnh Border- đường bao)

    .ClassName {
    border-width:2px; // độ rộng đường bao
    border-style: solid; // kiểu
    border-color: #333FFF; // màu có thể thay bằng rgb()

    }

    đơn giản có thể viết

    .ClassName {
    border: 2px solid #333FFF;

    }

    7.Lệnh màu : có thể sử dụng 1 trong các cách dưới đều được

    .ClassName {
    color: #FFFFFF;
    }
    .ClassName {
    color: #FFF;
    }
    .ClassName {
    color: #fff;
    }
    .ClassName {
    color: rgb(255, 255, 255);
    }

    joomla minify css xin giới thiệu thêm một số lệnh nâng cao hơn 1 chút:
    8. Cross browser transparency: – thiết lập cho từng trình duyệt
    .ClassName {
    filter:alpha(opacity=50); // trình duyệt IE
    -moz-opacity:0.5; // trình duyệt mozilla
    -khtml-opacity: 0.5; // trình duyệt Safari
    opacity: 0.5; // hầu hết các trình duyệt, nhưng IE thì không.
    }
    9. First-child selectors
    Ví dụ bên dưới tạo màu chữ riêng cho lớp đầu tiên thẻ p

    .p:first-child {
    color:#fff;
    }
    10. Drop shadow (tạo bóng đổ)
    .your_shadow {
    width:400px;
    height:200px;
    background-color:#000;
    -webkit-box-shadow: 5px 5px 2px #ccc;
    }
    11. Resize
    .ClassName{
    min-width:100px;
    min-height:100px;
    max-width:900px;
    max-height:900px;
    resize:both;
    background-color:#ccc;
    border:2px solid #666;
    overflow:auto;
    }
    12.dùng dấu “,” để gộp chung các class khi có cùng thuộc tính:
    h1, h2, h3, h4, h5, h6 {
    font-family: ‘Arial';
    }

    ...
    Phạm Hữu DưBluesky012 thích bài viết này.
  2. Bluesky012

    Bluesky012 Mới đăng kí

    Bài viết chi tiết quá. Cách đây hơn 1 năm mình có học cắt css một chút, cắt được xong sản phẩm đầu tiên thì chuyển qua việc khác. Hjc chắc ra tết qua đây cày lại mới được. có gì mọi người giúp đỡ nhé.

    mình cần các thẻ chi tiết thế này và giải thích từng giá trị cũng như ý nghĩa từng thẻ kiểu này. Thanks nhìu nhé ^^
  3. lucyenhd

    lucyenhd Thành viên cấp 2

    Cảm ơn thớt, mình thấy có vài lệnh mình chưa biết, đánh dấu để ghi chú, thansk thớt nhé. :x:x:x
  4. cjhobabe

    cjhobabe Mới đăng kí

    Hiện mình có trang này hay rất muốn chia sẻ với các bạn:
    toolwebmega.net/

    Nếu bạn nào tìm được thêm trang hay khác hãy comments cho mọi người biết nhé.
Từ khóa:

Ủng hộ diễn đàn