Hiển thị các bài đăng có nhãn Hoc-CSS. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Hoc-CSS. Hiển thị tất cả bài đăng
Bo góc với thuộc tính border radius trong css

Bo góc với thuộc tính border radius trong css

Bo góc với thuộc tính border radius trong css


Thuộc tính border-radius trong css3 được dùng để định dạng bo góc cho border (đường viền), được sử dụng để làm tròn một hoặc nhiều góc áp dụng đối với các tag div, hình ảnh...

thuộc tính border radius trong css

Thuộc tính border radius trong css



Cấu trúc của thuộc tính border-radius (bo góc)


border-radius: giá trị

Để được hỗ trợ hiển thị tốt trên các trình duyệt như Chrome, Opera, IE, Firefox...chúng ta cần đặt trước các code khác nhau

Đối với các trình duyệt:

  • Trình duyệt Chrome: -webkit-border-radius
  • Trình duyệt Firefox: -moz-border-radius
  • Trình duyệt IE: -ms-border-radius
  • Trình duyệt Opera: -o-border-radius
Ta có ví dụ:

<html>
    <head>
        <title> Ví dụ thuộc tính border-radius </title>
        <style>
            #vidu {
                border-radius: 20px;
                -webkit-border-radius: 20px;
                -moz-border-radius: 20px;
                -ms-border-radius: 20px;
                -o-border-radius: 20px;
            }
        </style>
    </head>
<body>
    <div id="vidu"> Ví dụ bo góc đường viền </div>
</body>
</html>

Cách bo góc các góc khác nhau trong css


- Bo góc trên - bên trái:

  • Một giá trị: border-top-left-radius: 5px; 
  • Hai giá trị: border-top-left-radius: 5px 10px;
- Bo góc trên - bên phải:

  • Một giá trị: border-top-right-radius: 5px;
  • Hai giá trị: border-top-right-radius: 5px 10px;
- Bo góc dưới - bên trái:

  • Một giá trị: border-bottom-left-radius: 5px;
  • Hai giá trị: border-bottom-left-radius: 5px 10px;
- Bo góc dưới - bên phải:

  • border-bottom-right-radius: 5px;
  • border-bottom-right-radius: 5px 10px;

Cách viết rút gọn bo 4 góc bằng css

  • border-radius: 5px 3px 10px 15px;

Trên đây là bài viết hướng dẫn các bạn cách sử dụng thuộc tính border-radius để bo góc cho đối tượng trong css, các bạn có thể đọc thêm bài viết Các thuộc tính border (đường viền) trong css
Các thuộc tính border (đường viền) trong css

Các thuộc tính border (đường viền) trong css

Thuộc tính border là gì?


Thuộc tính border dùng để định dạng đường viền cho thành phần trong css. Đương viền trong css có 3 kiểu để định dạng border color, border style và border width. Dưới đây sẽ giới thiệu cùng các bạn tổng hợp các thuộc tính border trong css.

Thuộc tính border là gì?

Thuộc tính border là gì trong css



Cấu trúc chung:

tag { Thuộc tính: giá trị; } 


Thuộc tính Border Color

Định dạng màu sắc cho đường viền

Ví dụ:

<html>
    <head>
<style>
    h1 { border-color: #000000;}
    h2 { border-color: rgb(255,0,0);}
    h3 { border-color: red;}
</style>
<body>
    <h1> ví dụ về thuộc tính Border Color </h1><br/>
    <h2> ví dụ về thuộc tính Border Color </h2><br/>
    <h3> ví dụ về thuộc tính Border Color </h3><br/>
</body>
</html>

Border Style


Định dạng hiển thị kiểu đường viền

Ví dụ cụ thể

    <!DOCTYPE html><html>
    <head>
    <style>
        .vidu1 { border: none;}
        .vidu2 { border: hidden;}
        .vidu3 { border: dotted;}
        .vidu4 { border: dashed;}
        .vidu5 { border: solid;}
        .vidu6 { border: double;}
        .vidu7 { border: groove;}
        .vidu8 { border: ridge;}
        .vidu9 { border: inset;}
        .vidu10 { border: outset;}
        .vidu11 { border: inherit;}
    </style>
    <body>
        <p class="vidu1"> Xác định thành phần sẽ không có đường viền. </p><br/>
        <p class="vidu2"> Giống như giá trị none, nhưng được dùng cho table. </p><br/>
        <p class="vidu3"> Xác định đường viền cho thành phần là dấu chấm (dotted). </p><br/>
        <p class="vidu4"> Xác định đường viền cho thành phần là gạch ngang (dashed). </p><br/>
        <p class="vidu5"> Xác định đường viền cho thành phần là đường thẳng nét (solid). </p><br/>
        <p class="vidu6"> Xác định đường viền cho thành phần là 2 đường thẳng nét (double). </p><br/>
        <p class="vidu7"> Xác định đường viền cho thành phần là đường rãnh (groove). </p><br/>
        <p class="vidu8"> Xác định đường viền cho thành phần là đường chóp (ridge). </p><br/>
        <p class="vidu9">  Xác định đường viền cho thành phần là đường bóng bên trong (inset). </p><br/>
        <p class="vidu10"> Xác định đường viền cho thành phần là đường bóng bên ngoài (outset). </p><br/>
        <p class="vidu11">  Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). </p><br/>
    </body>
    </html>


Thuộc tính border width


 Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style>
        #vidu { border-width: 5px; border-color: #000000; border-style: solid}
    </style> </head>
<body>
        <p id="vidu"> Xác định bề dày của đường viền. </p><br/>
</body>
</html>

Khai báo tắt và kết hợp giữa border color, border style, border width


Cách viết thông thường

 .vidu { border-color: #000000; border-style: solid; border-width: 5px}

Bạn có thể viết gọn hơn lại như sau:

.vidu { border: 5px solid #000}

Định dạng border (Đường viền) trên, dưới, phải, trái



- Đường viền trên: border-top
- Đường viền dưới: border-bottom
- Đường viền trái: border-left
- Đường viền phải: border-right

Ví dụ cụ thể: 

<!DOCTYPE html>
<html>
<head>
    <style>
        #duongvientren { border-top: 2px solid #ff0000;}
        #duongvienduoi { border-bottom: 2px solid #ff0000;}
        #duongvientrai { border-left: 2px solid #ff0000;}
        #duongvienphai { border-right: 2px solid #ff0000;}
    </style>
</head>
<body>
        <p id="duongvientren"> Đường viền trên </p><br/>
        <p id="duongvienduoi"> Đường viền dưới </p><br/>
        <p id="duongvientrai"> Đường viền trái </p><br/>
        <p id="duongvienphai"> Đường viền phải </p><br/>
</body>
</html>

Trên đây là các thuộc tính border (đường viền) trong css cụ thể nhất chúc các bạn học thành công css nhé.
10 lời khuyên viết CSS cho người mới bắt đầu

10 lời khuyên viết CSS cho người mới bắt đầu


css_tips_tricks

Cascading Style Sheets (CSS) là phong cách trang sử dụng để xác định các yếu tố HTML. Điều này cũng có thể được áp dụng cho bất kỳ loại tài liệu XML, bao gồm cả đồng bằng XML, SVG và XUL. Những phong cách thường được lưu trong file .css bên ngoài. Những tấm phong cách bên ngoài có thể tiết kiệm rất nhiều thời gian của bạn trong khi chỉnh sửa các bố trí của tất cả các trang trong website.

 Dưới đây là một số mẹo CSS quan trọng và hữu ích và thủ thuật mà có thể hữu ích cho các nhà phát triển.

1. Sử dụng reset.Css


Khi nói đến việc diễn tả phong cách CSS, các trình duyệt như Firefox và Internet Explorer đều có những cách xử lý khác nhau cho họ. reset.css reset tất cả các phong cách cơ bản, do đó, bạn bắt đầu với một stylesheets mới trống.

2. Sử dụng CSS Shorthand

 
Shorthand CSS cung cấp cho bạn một cách ngắn hơn của việc viết mã CSS của bạn, và quan trọng nhất của tất cả - nó làm cho mã rõ ràng và dễ hiểu hơn.
Thay vì tạo ra CSS như thế này
.header {  
      background-color: #fff;
      background-image: url(image.gif);
      background-repeat: no-repeat;
      background-position: top left;  
    }
Nó có thể là viết gọn lại như sau:
.header { background: #fff url(image.gif) no-repeat top left    }

3. Hiểu Lớp Và ID


Hai bộ chọn thường nhầm lẫn người mới bắt đầu. Trong CSS, lớp được biểu diễn bằng một dấu chấm "." Trong khi id là một hash "#". Trong một nutshell id được sử dụng vào phong cách đó là duy nhất và không lặp lại chính nó, lớp ở phía bên kia, có thể được tái sử dụng.

4. Quên <Table>, Hãy thử <Div>


Một trong những lợi thế lớn nhất của CSS là việc sử dụng <div> để đạt được tổng số linh hoạt về kiểu dáng. <div> là không giống như <table>, nơi mà nội dung được 'nhốt' trong một <td> 's cell. Nó là an toàn để nói rằng hầu hết <table> bố trí này là có thể đạt được với việc sử dụng <div> và tạo kiểu tóc thích hợp, cũng có thể trừ các nội dung bảng lớn.

5. CSS Debugging Công cụ


Nó luôn luôn tốt để có được xem trước tức thì của bố trí trong khi tinh chỉnh các CSS, nó giúp phong cách hiểu và gỡ lỗi CSS tốt hơn. Dưới đây là một số công cụ gỡ lỗi CSS miễn phí, bạn có thể cài đặt trên trình duyệt của bạn: FireFox Web Developer, DOM Inspector, Developer Toolbar Internet Explorer, và Firebug.

6. Biết! Quan trọng


Bất kỳ phong cách đánh dấu bằng! Quan trọng sẽ được đưa vào sử dụng regardlessly nếu có một quy tắc ghi đè dưới nó.
.page {background-color:blue !important;   background-color:red;}
Trong ví dụ trên, background-color: màu xanh sẽ được điều chỉnh bởi vì nó đánh dấu quan trọng, ngay cả khi có một background-color: red;! dưới nó. ! Quan trọng được sử dụng trong các tình huống mà bạn muốn ép buộc một phong cách mà không một cái gì đó ghi đè lên nó, tuy nhiên nó có thể không làm việc trong Internet Explorer.

7. CSSimport Vs <Link>


Có 2 cách để gọi một file CSS bên ngoài - tương ứng sử dụngimport và <link>. Nếu bạn không chắc chắn những phương pháp để sử dụng, đây là vài bài viết để giúp bạn quyết định.

8. Typography Đo lường: Px Vs Em


Có vấn đề lựa chọn khi sử dụng đơn vị đo lường px hoặc em? Những điều sau đây có thể cung cấp cho bạn một sự hiểu biết tốt hơn về các đơn vị typography.

9. Các loại phương tiện hiểu biết


Có vài loại phương tiện truyền thông khi bạn khai báo CSS với <link>. in, máy chiếu và màn hình là vài trong số những loại thường được sử dụng. Hiểu và sử dụng chúng trong những cách thích hợp cho phép người dùng tốt hơn khả năng tiếp cận. 

10. Giữ CSS Codes sạch


Chúng tôi có một số CSS đó đã lẻn vào của bạn <head>. Đây là lỗi đau thương vì nó không chỉ đánh dấu bùn của chúng tôi nhưng nó chỉ có thể áp dụng cho các trang HTML đơn này. Giữ CSS của bạn tập tin phương tiện riêng biệt mà các trang trong tương lai có thể liên kết với họ và sử dụng mã tương tự, do thay đổi thiết kế trên nhiều trang trở nên dễ dàng.
Phân biệt thẻ ID và CLASS trong CSS

Phân biệt thẻ ID và CLASS trong CSS

https://mahaveersingh.files.wordpress.com/2010/06/classes-ids3.jpg

Phân biệt thẻ ID và CLASS trong CSS


Trong CSS việc phân biệt giữa id và class thường gây nhầm lẫn cho các bạn mới học, hai thuộc tính này có sự khác biệt rõ rệt. Bài viết phân biệt thuộc tính id và class giúp bạn biết cách nhận biết sự khác nhau của hai thẻ này.

Phân biệt thẻ ID và CLASS trong CSS


Thuộc tính ID trong HTML


Thuộc tính id trong css chỉ được sử dụng để định dạng cho một đối tượng riêng và duy nhất. Ví dụ sinh viên khi vào trường học cần có một thẻ sinh viên, thẻ này không thể trùng với các thẻ khác, id cũng vậy.

Thuộc tính id được dùng để định dạng nội dung bằng css được bắt đầu bằng dấu "#"

Chú ý: Id không được viết quá dài, không dùng ký tự đặc biệt như @, %, ^... và không được bắt đầu bằng con số.

Cấu trúc thuộc tính id


Viết trong HTML

Bạn có thể đặt id trong các tag như h1, h2, h3, h4, h5, h6, div, button, textarea...

<tag id="vidu"></tag>

Viết trong css

#vidu {thuộc tính: giá trị}

 Ví dụ thuoc tinh id

<html>
    <head>
        <title> Bài ví dụ </title>
    </head>
<style>
*{margin:0; padding:0}
h1.mot {background: red; color: #fff}
a.hai{background: green; color: red}
div.ba {background: black; color: #fff}
</style>
<body>
    <h1 id="mot">Thuộc tính id trong thẻ h1</h1>
    <a id="hai">Thuộc tính id trong thẻ a</a>
    <div id="ba">Thuộc tính id trong thẻ div</div>
</body>
</html>

Thuộc tính Class trong HTML


Thuộc tính class được dùng chung cho nhóm đối tượng, các thành phần giống nhau trong html. Ví dụ về thuộc tính class rất nhiều như trong một lớp học thầy giáo sẽ nhóm các bạn có cùng tên giống nhau lại với nhau, hoặc có chiều cao bằng nhau...Việc nhóm các thành phần giống nhau sẽ thuận tiện cho việc chỉnh sửa css sau này.

Giống như id bạn cũng không được đặt chữ số, ký tự đặc biệt và cũng không nên viết quá dài.

Cấu trúc thuộc tính clas 


- Viết trong html

<tag class="vidu"><tag>

- Viết trong css

.vidu {thuộc tính: giá trị}

Ví dụ nhiều thẻ tag cho một class

<html>
    <head>
        <title> Bài ví dụ </title>
    </head>
<style>
*{margin:0; padding:0}
h1.vidu {background: red; color: #fff}
a.vidu {background: green; color: red}
div.vidu {background: black; color: #fff}
</style>
<body>
    <h1 class="vidu">Thuộc tính class trong thẻ h1</h1>
    <a class="vidu">Thuộc tính class trong thẻ a</a>
    <div class="vidu">Thuộc tính class trong thẻ div</div>
</body>
</html>

Với các so sánh trên sẽ giúp bạn phân biệt tốt id và class trong html css, chúc bạn học tốt css