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ị
- Một tài sản [
height
vàwidth
trong ví dụ trên] - 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