Thuộc tính và giá trị CSS là gì

dễ. Thuộc tính giống như màu sắc, cỡ chữ, họ phông chữ. Trong cuộc sống thực, hãy tưởng tượng tài sản giống như bạn sở hữu một chiếc ô tô. Nó có màu sắc, kích thước, nhãn hiệu, v.v. Vì vậy, chúng ta có thể gọi nó là thuộc tính hoặc khía cạnh của bộ chọn (xe hơi)

Giá trị giống như giá trị bạn sẽ cung cấp cho tài sản. Ví dụ. đối với họ phông chữ, bạn sẽ cung cấp arial hoặc futura làm giá trị. Hoặc màu đỏ cho màu sắc. Trong cuộc sống thực, bạn sẽ đánh giá cho màu sắc như xanh dương, giá trị cho thương hiệu như toyota hay giá trị cho kích thước nhỏ gọn. Đây là giá trị cho mỗi tài sản

Xin lỗi, nếu bạn không thể hiểu lời giải thích của tôi. Tôi hy vọng bạn đã nhận được điều này. =)

Trong bài học trước, chúng ta đã xem lại kiến ​​thức về bộ chọn CSS. Nhưng chúng tôi chỉ chọn các phần tử HTML trong CSS khi chúng tôi muốn làm gì đó với các phần tử đó. Giống như, bạn biết đấy, phong cách cho họ

Trong bài học này, chúng ta sẽ xem xét cách bộ chọn hoạt động với các thuộc tính và giá trị để tạo các quy tắc và khai báo kiểu. Phần lớn nội dung này có thể được xem lại, nhưng hãy dành thời gian để đảm bảo sự hiểu biết và từ vựng của bạn là đúng và chính xác (chúng ta sẽ sử dụng các khái niệm này trong phần còn lại của khóa học. )

Từ vựng kiểu CSS

Sau khi chọn một phần tử HTML bằng bộ chọn CSS, như đã thấy trong bài học trước, chúng ta có thể mô tả các kiểu được áp dụng cho phần tử đó bằng các khai báo kiểu. Xem xét ví dụ này từ bài học trước

#kitten-picture {
  height: 100px;
  width: 100px;
}

Ở đây, các dòng đọc height: 100px; và width: 100px; là các khai báo kiểu. Mọi khai báo đều có hai phần, được định dạng dưới dạng cặp khóa-giá trị

1. Một tài sản (height và width trong ví dụ trên)
2. Một giá trị (trong ví dụ, cả hai đều sử dụng 100px)

Nhiều khai báo được nhóm lại với nhau dưới một bộ chọn được gọi là khối khai báo

...
  height: 100px;
  width: 100px;
...

Các khai báo kiểu trong một khối phải kết thúc bằng dấu chấm phẩy, nếu không trình duyệt sẽ không hiểu nơi nào kết thúc và nơi nào bắt đầu

Một khối khai báo được bắt đầu bằng một bộ chọn cho trình duyệt biết (các) thành phần nào mà các khai báo kiểu sẽ áp dụng cho

#kitten-picture {
  ...
}

Sự kết hợp giữa khối khai báo và bộ chọn với nhau được gọi là quy tắc

#kitten-picture {
  height: 100px;
  width: 100px;
}

Nhiều quy tắc được nhóm lại với nhau trong một tệp được gọi là biểu định kiểu

Video bắt buộc. Tài sản và Giá trị

Hãy xem một video dài khoảng 4 phút khác từ sê-ri YouTube Cơ bản về CSS của DevTip thảo luận về các thuộc tính và giá trị CSS

Chúng tôi sẽ không sử dụng trình chỉnh sửa mã Espresso được thấy ở đây (bạn có thể tự khám phá nó), nhưng hãy chú ý đến các kiểu mà Travis tạo bằng cách sử dụng Espresso và cách chúng thay đổi DOM

Các giá trị CSS được đặt theo Thuộc tính CSS và nằm trong khối khai báo CSS, đây là một phần của quy tắc/câu lệnh CSS

CSS2. 1 cho phép các loại giá trị sau. Số nguyên và số thực, Độ dài, Tỷ lệ phần trăm, URL và URI, Bộ đếm, Màu sắc,
Chuỗi, Giá trị không được hỗ trợ

Số nguyên và số thực

Số nguyên và số thực có thể được sử dụng làm giá trị CSS. Khi được sử dụng, chúng có thể được đặt trước dấu + hoặc -. Số thập phân cũng được phép

Được sử dụng trong các thuộc tính CSS sau

z-index, line-height, counter-increment. Ngoài ra, có thể được sử dụng làm giá trị màu CSS

độ dài

Độ dài có thể được sử dụng để chỉ định các phép đo ngang hoặc dọc

When used, is followed immediately by a unit. There should not be any space between the number and the unit. For certain properties, negative lengths are allowed , but for certain properties using a negative value results from an error.

Được sử dụng trong các thuộc tính CSS sau

chiều rộng, lề, phần đệm, cỡ chữ, độ rộng đường viền, bóng văn bản, v.v.

Các đơn vị

Có hai loại đơn vị được sử dụng trong CSS, Tương đối và Tuyệt đối

Các đơn vị tương đối có liên quan đến độ dài khác. Nếu được sử dụng, chúng có thể tạo đầu ra linh hoạt trên nhiều phương tiện khác nhau ( e. màn hình g, in ). Các đơn vị tuyệt đối được sử dụng để chỉ định chiều rộng cố định bất kể khu vực xem. Hữu ích khi đã biết độ dài của môi trường đầu ra

Đơn vị tương đối được sử dụng trong CSS

UnitSign usedDescriptionPixelpxPixel của thiết bị xem. ememKích thước phông chữ phù hợp. exex 'chiều cao x' của phông chữ có liên quan

Đơn vị tuyệt đối được sử dụng trong CSS

UnitSign usedDescriptionInchesin1 inch bằng 2. 54 cm và khoảng 96 pixel. centimetcmĐơn vị đo đã biết. 100 cm = 1 mét. MilimétmmĐơn vị đo đã biết. 1000 mm = 1 métPointspt1 pt = 1/72 nd pf một inch. Picaspc1 pica = 12 điểm

tỷ lệ phần trăm

Tỷ lệ phần trăm có thể được sử dụng bằng cách chỉ định một số theo sau là "%"

Được sử dụng trong các thuộc tính CSS sau

chiều rộng, lề trên và cỡ chữ, v.v.

URL và URI

URL và URI được sử dụng làm giá trị CSS để trỏ đến tài nguyên ( e. g. một tấm ảnh ). Định dạng của một giá trị URI là url("URL"). Trích dẫn xung quanh URL là tùy chọn. Bạn cũng có thể sử dụng URI tương đối

Được sử dụng trong các thuộc tính CSS sau

hình nền, con trỏ, kiểu danh sách, v.v.

quầy

Bộ đếm được biểu thị bằng mã định danh phân biệt chữ hoa chữ thường. Định dạng sử dụng bộ đếm là bộ đếm (số nhận dạng bộ đếm). Một ví dụ phổ biến về số nhận dạng bộ đếm là per-num

Được dùng trong

Có thể được sử dụng với hầu hết các bộ chọn phần tử và bộ chọn giả

Màu sắc

Một màu là một từ khóa hoặc một thông số kỹ thuật RGB số hoặc một giá trị màu thập lục phân. Nó được sử dụng để đặt màu của văn bản được viết trong tài liệu HTML

Được dùng trong

màu sắc, nền, đường viền hoặc bóng hộp là những ví dụ phổ biến về các thuộc tính CSS sử dụng màu sắc làm giá trị. Hầu hết các thuộc tính CSS chấp nhận màu làm giá trị

Các đơn vị

KeywordsRGBHexa decimalaqua0,25,255#00ffffblack0,0,0#000000blue0,0,255#0000fffuchsia255,0,255#ff00ffgray128,128,128#808080green0,128,0#008000lime0,255,0#00ff00maroon128,0,0#800000navy0,0,128#000080olive128,128,0

Dây

Định dạng viết xâu có thể là dấu ngoặc kép hoặc dấu nháy đơn

Được dùng trong

Hầu hết các thuộc tính CSS chấp nhận chuỗi làm giá trị

Tự động

Tự động là một giá trị được tính toán tự động bởi tác nhân người dùng ( e. g. trình duyệt)

Được sử dụng trong các thuộc tính CSS sau

tràn, con trỏ, chiều rộng, độ lệch của điểm đánh dấu, lề, dưới cùng, bên trái, bố cục bảng, chỉ mục z

Thừa kế

Phần tử chứa giá trị kế thừa, thừa nhận giá trị của cùng một thuộc tính CSS của phần tử cha của nó

Được sử dụng trong các thuộc tính CSS sau

Tất cả các thuộc tính CSS có thể chấp nhận kế thừa

Ban đầu

Nếu được sử dụng, phần tử tương ứng chấp nhận giá trị ban đầu/mặc định (ví dụ: giá trị ban đầu của thuộc tính color CSS là màu đen)

Được sử dụng trong các thuộc tính CSS sau

Hầu như tất cả các thuộc tính CSS có thể chấp nhận ban đầu

Không có

Nếu được chỉ định, không có giá trị nào được gắn vào phần tử tương ứng, thường làm cho phần tử bị ẩn

Thuộc tính trong CSS là gì?

Các giá trị CSS là gì?

Có bao nhiêu thuộc tính CSS?