Ads Banner Header
  1. Ban quản trị chúng tôi sẽ tiến hành rà soát Spamer và các bài viết không đúng Box sẽ bị xóa sạch, Các spamer cố tình sẽ bị Block IP vĩnh viễn . Xin cảm ơn bạn Khách đã đọc. List Ban
    icon-thietkeweb Công ty thiết kế website chuyên nghiệp Megaweb
    icon-thietkeweb Dịch vụ thiết kế website chuyên nghiệp tại Hà Nội
    icon-thietkeweb Dịch vụ thiết kế website bán hàng chuyên nghiệp
    icon-thietkeweb Dịch vụ thiết kế website bất động sản chuyên nghiệp
    icon-thietkewebhaiphong Làm dịch vụ thiết kế website theo yêu cầu

Các lệnh hay dùng trong css

Thảo luận trong 'Dich vụ Website' bắt đầu bởi xuanha, 16/01/2015.

  1. xuanha

    xuanha Thành viên mới

    Bài viết:
    28
    Đã được thích:
    0
    Giới tính:
    Nam
    joomla compress css xin giới thiệu tới các bạn các lệnh thường dùng trong CSS. 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';
    }
     
  2. vanthai

    vanthai Thành viên mới

    Bài viết:
    17
    Đã được thích:
    0
    Giới tính:
    Nam
    Hay nhất ở chỗ chỉ ra khác nhau giữa margin và padding, trước đây mình chưa phân biệt được khi dùng nên thường xảy ra hiện tượng xô lệch do khi dùng padding, như vậy ta padding bao nhiêu thì sẽ cộng thêm vào chiều rông cũ bấy nhiêu để tạo thành một chiều rộng mới.
     
Đang tải...