Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Một Số Thuộc Tính CSS Dành Cho Bạn Mới(2020)

Một Số Thuộc Tính CSS Dành Cho Bạn Mới(2020)


Ngày 12 Tháng 8 Năm 2020

Một Số Thuộc Tính CSS Dành Cho Bạn Mới(2020)

Trong bài viết hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu một số thuộc tính CSS quan trọng cũng như hữu ích để giúp việc học CSS của bạn được dễ dàng và thuận lợi hơn nhé!

Tạo Style cho Placeholder bằng CSS

Khi bạn tạo một ô input trong form thì màu mặc định của thuộc tính placeholder sẽ là màu đen. Vậy để thiết lập màu cho placeholder trong CSS thì chúng ta sẽ gọi ::placeholder và sau đó bạn chỉ cần chọn màu mình muốn thông qua thuộc tính color. Để hiểu rõ hơn bạn xem đoạn mã sau nhé:

HTML

 <h1>Niềm Vui Lập Trình</h1>
<input type="text" placeholder="Xin Chào Các Bạn" />

CSS

 ::placeholder {
  color: DeepSkyBlue;
  font-size: 15px;
}

Tới đây là chúng ta đã thực hiện thêm màu xong cho thuộc tính placeholder. Tuy nhiên để áp dụng được nhiều trình duyệt khác nhau thì bạn nên gọi thuộc tính này với các tiền tố khác như là ::-webkit, ::-moz, :-ms. Và để hiểu rõ hơn bạn xem đoạn code sau nhé:

::-webkit-input-placeholder {
  color: DeepSkyBlue;
  font-size: 15px;
}
::-moz-placeholder {
  color: DeepSkyBlue;
  font-size: 15px;
}
:-ms-input-placeholder {
  color: DeepSkyBlue;
  font-size: 15px;
}
::placeholder {
  color: DeepSkyBlue;
  font-size: 15px;
}

Và kết quả cuối cùng bạn xem dưới đây nhé:

See the Pen thiet lap mau cho placeholder by haycuoilennao19 (@haycuoilennao19) on CodePen.

Sẵn đây mình giới thiệu thêm đến bạn cách thiết lập màu chữ trong ô input bằng cách gọi input[type="text"] trong CSS. Và để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen mau cho chu trong o input by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Tạo Border Image Bằng CSS

Phần tiếp theo chúng ta sẽ đi vào tìm hiểu cách tạo border cho phần tử trong trang web bằng hình ảnh nhé. Đầu tiên ta sẽ đi vào tạo cấu trúc phần tử HTML:

HTML:

<div class="container noidung">Niềm Vui Lập Trình!</div>

CSS:

.container {
  width: 400px;
  height: 200px;
  max-width: 100%;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.noidung {
  border: 20px solid;
  border-image-source: url(https://res.cloudinary.com/dn4nxz7f0/image/upload/v1597201924/nhung-thuoc-tinh-css-ban-nen-biet/pexels-oleg-magni-1040473_1_cb5zkg.jpg);
  border-image-slice: 80 40;
}

Và kết quả cuối cùng bạn xem ở dưới đây nhé:

See the Pen thiet lap border image bằng CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở đây mình xin giải thích một tý là :

  • border: 20px solid;: thiết lập độ dày của đường viền với kiểu là solid.
  • border-image-source: thiết lập nơi địa chỉ hình ảnh mà bạn muốn làm border.
  • border-image-slice: xác định cách chúng ta sẽ cắt hình ảnh để làm border image. Và nếu bạn muốn tham khảo thêm về thuộc tính này thì có thể xem ở đây nhé!

Nếu bạn thấy cách trên hơi dài thì bạn có thể sử dụng phương pháp gọi ngắn hơn như đoạn mã sau đây:

.noidung {
   border: 20px solid;
   border-image: url(Địa Chỉ Hình Ảnh) 80 40;
}

Tiếp theo chúng ta sẽ đi vào tìm hiểu cách thiết kế border-image với giá trị linear-gradient nhé!

HTML

<div class="container noidung">Niềm Vui Lập Trình!</div>

CSS

.container {
  width: 400px;
  height: 200px;
  max-width: 100%;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.noidung {
  border: 20px solid;
  border-image-source: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
  border-image-slice: 80 40;
}

Và kết quả cuối cùng bạn xem dưới đây nhé:

See the Pen thiet lap border voi linear gradient by haycuoilennao19 (@haycuoilennao19) on CodePen.

Sử Dụng Border Radius Trong CSS

Phần này chúng ta sẽ đi vào tìm hiểu cách sử dụng thuộc tính border-radius trong CSS để bo góc phần tử trong HTML nhé. Đầu tiên chúng ta sẽ thực hiện border-radius cho tất cả các góc của phần tử thông qua đoạn mã sau đây nha:

HTML

<div class="bo_goc"></div>

CSS

 .bo_goc{
  width:200px;
  height:200px;
  background-color: DodgerBlue;
  border-radius: 16px;
}

Và kết quả cuối cùng bạn xem dưới đây nhé:

See the Pen thuc hien border radius by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tiếp theo chúng ta sẽ thiết lập thuộc tính border-radius cho hai góc trong phần tử để xem kết quả sao nhé:

See the Pen thuc hiện border radius cho hai goc by haycuoilennao19 (@haycuoilennao19) on CodePen.

Chức năng cuối cùng mình muốn giới thiệu đến bạn là thiết lập hình tròn bằng thuộc tính border-radius. Và để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

See the Pen tạo hình tròn bằng border-radius by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Sử Dụng Thuộc Tính shape-outside

Thuộc tính shape-outside giúp chúng ta có thể xác định cách mà nội dung sẽ được hiển thị xung quanh hình ảnh. Nó chia làm 4 giá trị chính là margin-box, padding-box, content-boxborder-box. Và để dễ hình dung bạn xem ví dụ sau đây nhé:

See the Pen su dung shape outside by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở ví dụ trên mình sử dụng giá trị là margin-box. Bạn hãy thử thay đổi giá trị trên để thấy những kết quả khác nhé!

Sử dụng shape-outside function

Hàm shape-outside trong CSS sẽ giúp bạn có thể thay đổi cách hiển thị nội dung theo hình dạng cụ thể với 4 giá trị chính là circle(), ellipse(), polygon()inset(). Bây giờ chúng ta sẽ thử đi vào ví dụ với việc hiển thị nội dụng theo dạng hình tròn circle() nhé.

See the Pen su dung shape outside funtion circle by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để tham khảo thêm các ví dụ về giá trị hàm khác của shape-outside thì bạn xem ở đây nhé!

Một Số Phương Pháp Viết Tắt Trong CSS

Box-Shadow

Đầu tiên chúng ta sẽ đi vào xem đoạn mã CSS viết tắt của box shadow đã nhé!

box-shadow: 5px 4px 3px 2px rgba(0,0,0,0.8);

Ở đây giá trị từ trái sang phải sẽ là offset-x, offset-y, blur-radius, spread-radiuscolor.

Border

Chúng ta sẽ đi vào xem đoạn mã CSS viết tắt của border đã nhé!

border: 5px solid #000;

Ở đây giá trị từ trái sang phải sẽ là border-width(độ rộng của đường viền), border-style(kiểu đường viền), border-color(Màu sắc của đường viền) .

Transition

Chúng ta sẽ đi vào xem đoạn mã CSS viết tắt của transition đã nhé!

transition: margin-top 1s ease-in-out 0.5s

Ở đây giá trị từ trái sang phải sẽ là transition-property, transition-duration, transition-timing-functiontransition-delay.

Font CSS

Chúng ta sẽ đi vào xem đoạn mã CSS viết tắt của cách thiết lập font CSS đã nhé!

font: italic small-caps bold 16px/110% "Roboto", sans-serif;

Ở đây giá trị từ trái sang phải sẽ là
font-style:italic,
font-variant:small-caps,
font-weight:bold,
font-size:16px,
line-height:110%
font-family:"Roboto", sans-serif;.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!