Tôi Viết Code

Welcome to ToiVietCode

Chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé! hihi...
Hiển thị các bài đăng có nhãn css. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn css. Hiển thị tất cả bài đăng
Tôi Viết Code

Thuộc tính border là gì, cách sử dụng ra sao?

Chào các bạn, đã lâu rồi mình không ra bài rồi nhỉ, công một số lý do về công việc thôi, mong các bạn thông cảm.
Ở bài viết hôm nay mình sẽ giới thiệu cho các bạn newbie về thuộc tính border và cách sử dụng của nó, các bạn nhớ ủng hộ nhé!

Border là gì?

Border hiểu đơn giản là một thuộc tính cơ bản trong CSS được sử dụng để tạo viền cho phần tử được chọn.

Border sử dụng như thế nào?

Để thêm đường viền cho phần tử, bạn cần chỉ ra các tham số: size độ rộng đường viền, style kiểu đường viền (nét liền, đứt, chấm ...) và color màu đường.

Thuộc tính border

Sử dụng 3 tham số size, style, color trên có thể được viết trên một dòng CSS với thuộc tính border
Ví dụ:
<style>
.vidu1{padding:15px;border:2px solid #069999}
</style>
<p class="vidu1">Ví dụ về đường viền</p>
Kết quả:

Ví dụ về đường viền

Ở ví dụ đoạn CSS border:2px solid #069999 đã hiện ra đường viềnn có độ rộng 5px, kiểu đường liền, với mã màu là #069999.

Thuộc tính border-width, border-color, border-style

Ngoài cách viết đường viền theo thuộc tính border như trên, còn có thể sử dụng ba thuộc tính border-width, border-style, border-color để chỉ ra độ rộng, kiểu đường và màu sắc.

Độ rộng đường là giá trị theo đơn vị px, em...

Màu sắc là các màu theo quy tắc CSS như màu theo tên, màu hash, màu RGB, rgba

Kiểu đường nhận các giá trị: none, dotted, dashed, double, groove, ridge, inset, outset, hidden
Ví dụ:
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;border-color: orangered;}
p.dashed {border-width: 5px;border-color: green;border-style: dashed;}
p.double {border-style: double;border-color: red;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
<p class="none">Không kẻ khung.</p>
<p class="dotted">Kiểu dotted.</p>
<p class="dashed">Kiểu dashed.</p>
<p class="double">Kiểu double.</p>
<p class="groove">Kiểu grooved.</p>
<p class="ridge">Kiểu ridged.</p>
<p class="inset">Kiểu inset.</p>
<p class="outset">Kiểu outset.</p>
<p class="hidden">Ẩn kẻ khung (khung không kẻ nhưng độ rộng phần tử vẫn có khung).</p>
Kết quả:

Không kẻ khung.

Kiểu dotted.

Kiểu dashed.

Kiểu double.

Kiểu grooved.

Kiểu ridged.

Kiểu inset.

Kiểu outset.

Đường viền theo từng cạnh

Cách viết ở phần trên tác động nên cả bốn cảnh của box, nếu muốn thiết lập cho từng cạnh của box bạn có thể sử dụng thêm thuộc tính.
Thiết lập độ rộng, kiểu đường, màu sắc cho các thuộc tính: border-top, border-right, border-bottom, border-left.
Ví dụ:
<style>
.vidu2 {border-top: 1px solid green;border-bottom: 2px dotted red;}
</style>
<p class="vidu2">Ví dụ kể viền trên dưới</p>

Ví dụ kể viền trên dưới

Tương tự như border-color, border-width, boder-style bạn cũng định nghĩa từng tham số màu, độ rộng, kiểu đường một cách riêng biệt cho từng cạnh với, với các thuộc tính:
  • border-left-width





  • border-left-style





  • border-left-color





  • border-top-width





  • border-top-style





  • border-top-color





  • border-right-width





  • border-right-style





  • border-right-color





  • border-bottom-width





  • border-bottom-style





  • border-bottom-color





  • Tổng kết

    Vậy là mình đã chỉ ra những thông tin về border và cách sử dụng của nó rồi. Chúc các bạn có một ngày vui vẻ, thanks for watching!
    Code được tham khảo từ một số nguồn khác nhau
    css
    N
    Tôi Viết Code

    Sử dụng CSS @media để responsive website

    Xin chào tất cả các bạn đã đến với Tôi Viết Code!
    Như mình biết hiện nay thì trừ một số nhỏ những bạn làm blog về chủ đề tin tức báo chí ra thì đa số tất cả các bạn sử dụng blogger đều muốn blog mình vừa nhẹ, đẹp mà không cần sử dụng nhiều đoạn code hay javascript.
    Thì hôm nay, mình sẽ hướng dẫn các bạn sử dụng CSS @media để tùy chỉnh một số thuộc tính của giao diện cho phù hợp nhé.

    Bắt đầu nào:

    Cũng khá đơn giản thôi nên mình không viết quá dài dòng tránh tình trạng bị nhàm chán khi đọc. Các bạn chèn đoạn css dưới vào trong template của mình:
    @media screen and (max-width: số phần trăm độ rộng) 
    { 
    vùng chọn{thuộc tính; thuộc tính} 
    }
    Phần trên là phần chính của css, các bạn đem về tự tùy biến theo ý thích của các bạn nhé, ví dụ các bạn muốn thumbnail bài viết ngoài trang chủ ẩn hiển thị khi sử dụng thiết bị có màn hình với width là 500px, các bạn sẽ tùy chỉnh lại CSS như sau:
    @media screen and (max-width: 500px){ 
    .block-image{display:none!important} 
    }
    Vì class của thumbnail bài viết ngoài trang chủ trong template của mình đang xài là block-image nên khi viết vùng chọn vào css sẽ là .block-image, nếu như các bạn sử dụng class khác thì có thể thay vào, hoặc các bạn sử dụng id thay cho class thì thay dấu "." trước tên vùng chọn thành dấu "#" .

    Phía trên là mình hướng dẫn cho các bạn đơn giản hóa nhất và cũng là cơ bản nhất để responsive bằng CSS @media, ở những bài sau sẽ còn chuyên sâu về các kiểu của loại CSS này nữa, các bạn nhớ ủng hộ nha.

    Hãy tùy chỉnh CSS phù hợp để giúp cho giao diện của bạn trở nên hoàn hảo nhé, chúc các bạn thành công!
    css
    N
    Tôi Viết Code

    Button tuyệt đẹp chỉ bằng html và css

    Chào các bạn, đã lâu mình không có viết bài rồi nhỉ, cũng tại mình khá bận về việc học (sắp thi học kỳ I đó mấy man) nên mình không có thời gian. Để bù đắp thì hôm nay mình sẽ chia sẻ cho các bạn một thủ thuật hay hơn nữa nè!
    Mình sẽ share cho các bạn một loại button khá là đẹp mà mình cũng vừa mới nghịch ra nhé.

    Bước 1: Thêm đoạn css này vào thẻ style

    buttonsb{float:left;width:100%;margin:10px 0 15px 0}
    #buttonsb .btn{background:#e70000;-webkit-box-shadow:0 2px 5px rgba(52, 152, 219, 0.15);box-shadow:0 2px 5px rgba(52, 152, 219, 0.15);float:left;width:auto;margin:0 1.5%;padding:8px 25px;text-align:center;border-radius:20px;color:#fff;text-transform:capitalize;display:inline-block;box-sizing:border-box;text-transform:uppercase}
    #buttonsb .btn:nth-child(1){margin-left:0!important}
    #buttonsb .btn:nth-child(n){margin-right:0!important}
    #buttonsb br{display:none!important}
    #buttonsb a.btn:before{content:'';margin-right:5px;font-family:"Font Awesome 5 Pro"}
    #buttonsb a.btn.btn-lh:before{content:'\f658'}
    #buttonsb a.btn.btn-download:before{content:'\f381'}
    #buttonsb a.btn.btn-read:before{content:'\f109'}
    #buttonsb a.btn.btn-lam:before{content:'\f1aa'}
    #buttonsb a.btn.btn-visit:before{content:'\f135'}
    .buttonblog{float:left;width:100%;box-sizing:border-box}

    Bước 2: Thêm đoạn html này vào nơi bạn muốn đặt button

    <div id="buttonsb">
    <a class="btn btn-download" href="https://www.blogger.com/null">Button Download</a>
    <a class="btn btn-read" href="https://www.blogger.com/null">Button Demo</a></div>
    
    Các icon fontawesome được sử dụng là font v5 pro, các bạn có thể thay bằng phien bản mình muốn nhé.
    Chúc các bạn thành công!

    Designed code by Tôi Share
    html
    N
    Tôi Viết Code

    Sử dụng thuộc tính transition cho css hover

    Hello xin chào tất cả các bạn, chào mừng các bạn đã trở lại với blog Tôi Viết Code.
    Bài trước mình đã giới thiệu cho các bạn cách sử dụng css hover rồi, cũng như đã nói ở cuối bài thì bài này mình sẽ hướng dẫn các bạn sử dụng thuộc tính transition dành cho hover.
    Thuộc tính này sẽ giúp phần tử hover trở nên "uyển chuyển" và chuyên nghiệp hơn.
    Sử dụng thuộc tính transition cho css hover - Tôi Viết Code

    Các bước thực hiện

    Bước 1: Viết một đoạn css cho vùng chọn phần tử như bài trước mình đã giới thiệu.
    Bước 2: thêm thuộc tính như dưới vào vùng chọn trong vùng chọn{...}.
    vùng chọn{transition: số thời gian}
    Trong đó: Số thời gian có thể thay thế bằng giây. VD: transition: .3s
    Bước 3: Các bạn có thể chỉnh sửa & lưu lại.

    Tổng kết

    Ok vậy là đã hướng dẫn các bạn xong cách sử dụng thộc tính transition cho hover.
    Sắp tới mình sẽ ra mắt thêm nhiều kiến thức hay nữa về css.
    Nếu không hiểu thì bình luận bên dưới để mình giúp.
    Chúc các bạn thành công.
    css
    N
    Tôi Viết Code

    Viết CSS hover cho phần tử trong website

    Xin chào tất cả các bạn đã quay trở lại với Tôi Viết Code
    Nếu như các bạn có lướt qua một số blog chia sẻ thì có lẽ các bạn đã biết, họ rất thường xuyên sử dụng hover cho blog mình để tặng độ sống động và chuyên nghiệp cho blog.
    Vậy thì làm thế nào để viết được css hover giống như vậy? Mình sẽ hướng dẫn các bạn ở trong bài viết ngày hôm nay.





    BƯỚC 1: VIẾT CSS TÙY CHỈNH BAN ĐẦU.



    Ví dụ mình có một cặp thẻ <div>...</div> có class là "box":
    <div class="box"></div> 

    Tiếp theo chúng ta sẽ biết css tùy chỉnh ban đầu như sau:
    .box {   width: 100px;   height: 100px;   background-color: red; }

    Và cuối cùng chúng ta sẽ viết css hover như sau:
    .box:hover {   background: green; }

     Khi ta sử dụng ":hover" nghĩa là ta chọn các liên kết sẽ được di chuyển. Nếu ta sử dụng một thuộc tính khác định dạng trong vùng được chọn liên kết thì khi rê chuột (hover) thì ta sẽ được định dạng của thuộc tính sử dụng ở vùng chọn được liên kết.
    Nếu như sử dụng thêm một số hiệu ứng chuyển động, đơn giản nhất là hiệu ứng transition thì hiệu ứng hover sẽ trở nên hoàn hảo. Ở bài sau mình sẽ hướng dẫn thêm cho các bạn cách sử dụng hover với hiệu ứng transition.
    Nếu hay hãy để lại một bình luận dưới bài viết để mình có động lực nhé!
    css
    N

    Nội quy chung Tôi Viết Code

    1. Bài viết đều tự tay tác giả viết nên nếu có ý định copy xin hãy ghi nguồn bài viết đó.
    2. Không được spam dưới mọi hình thức và đưa ra những bình luận xúc phạm đến danh dự và nhân phẩm của người khác (những bình luận vi phạm sẽ bị xóa).

    Đang cập nhật thêm nội quy...

    - Blog: Tôi Viết Code - Life Is Share
    - Thành lập: 22/09/2017
    - Nội dung: Blog chủ yếu viết về những tâm tư, tình cảm và những điều xung quanh cuộc sống của tác giả. Ngoài ra, blog thi thoảng còn chia sẻ một vài thủ thuật về Blogspot, share ảnh đẹp, tin tức về Công nghệ...
    - Tác giả blog: Trịnh Công Sơn hiện đang là một học sinh trung học.

    Lời cuối chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé!