Học CSS Cơ bản

Để thiết kế được 1 website, thì kiến thức đầu tiên phải nắm vững, đó là html và css. Đối với css, cần phải nắm vững các thuộc tính cơ bản, như màu sắc, hình ảnh… cho đến kiến thức chia bố cục trong thiết kế.

 

học css cơ bản
Học css cơ bản

1. Màu

color: thuộc tính.

2. Màu  nền

background-color: màu

3. TEXT

a. Text-align: Canh lề văn bản

text-align: left: Canh lề trái;

Text-align: Right: Canh lề phải;

Text-align: Canh lề giữa;

Text-align: justify: Canh đều 2 bên;

b.Text-decoration: Hiển thị một số kiểu văn bản
Text-decoration: overline –> gạch trên chữ. Text-decoration: underline–> gạch dưới chữ. Text-decoration: line-throught –> gạch ngang chữ. Text-decoration: none –> không gạch gì cả.

c. Text-index: tạo ra khoảng trắng phần bên trái.
Text-index: 20px –> tạo 20 px khoảng trắng

d. Text-shadow: thêm bóng đổ cho văn bản.
Text-shadow: [màu sắc] [tọa độ x y] [độ mờ]

e. Text-transform: Chuyển in hoa sang in thường.
Text-transform: capitalize –> chuyển sang in hoa chữ cái đầu tiên. Text-transform: uppercase –> Chuyển in hoa đoạn văn bản. Text-transform: lowercase –> chuyển in thường đoạn văn bản.

f. Font-family/size/style/weight: Thiết lập font chữ.
font-family: font –> thiết lập font chữ. font-style: nomal/italic/oblique–> thiết lập dưới dạng in nghiêng hoặc thường. font-weight: normal/bold: –> in đậm. font-size: 16px; –> thay đổi kích thước chữ.

4. Box model
a. Padding: khoảng cách từ content trở ra viền của phần tử.
Padding: Top right bottom left. Padding: 20px 10px –> top, bottom=20px; left, right=10px; padding: 10px –> top=bottom=left=right=10px;
b. Margin: khoảng cách từ border ra bên ngoài.
Margin: Top right bottom left.
c. Border: đường viền.
border: 1px solid red.

5. Tùy chỉnh kích thước
a. Height: Chiều cao phần tử. height: auto: Định chiều cao tự động. height: 20px; max-height: chiều cao tối đa. min-height: chiều cao tối thiểu. line-height:
b. Width: Chiều rộng phần tử.
Width:20px; max-width: chiều rộng tối đa. min-width: chiều rộng tối thiểu

6. Box-sizing: Tính toán, làm chủ được kích thước bên trong dựa vào width và height.
box-sizing: boder-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;

7. Màu và ảnh nền.

a. Màu nền
background-color: tên màu;

b. ảnh nền.
background-image: ur(‘ảnh 1’)
c. Lặp ảnh nền.
background-repeat: repeat-x/repeat-y/no-repeat/repeat/space/round.
d. Đổi vị trí ảnh nền.
background-position: top/bottom/left/right/center/y-x

8. Tùy biến hiển thị danh sách. list-style.
list-style: <list-style-type> <list-style-position> <list-style-image>;
a. list-style-type: Thay đổi loại hiển thị của danh sách.
disc: Kiểu nút tròn có nền bên trong, circle: Kiểu nút tròn nhưng có viền nhưng không có nền. squre: Kiểu ô vuông có nền. decimal: Kiểu số thứ tự. lower-roman: Kiểu số La Mã in thường. upper-roman: Kiểu số La Mã in hoa. none: Xóa các dấu đầu dòng.

b. list-style-position:  Tùy chỉnh vị trí hiển thị các dấu đầu dòng của mục con nằm bên trong danh sách hoặc bên ngoài danh sách.
inside: Hiển thị dấu đầu dòng bên trong block. outside: Hiển thị dấu đầu dòng bên ngoài block.

c. list-style-image: Sử dụng hình ảnh làm các dấu đầu dòng cho danh sách.
list-style-image: url(‘link ảnh’);

9. display: Chuyển inline sang block
inline: Chuyển phần tử về hiển thị trên cùng một hàng. inline-block: Chuyển phần tử về hiển thị trên cùng một hàng nhưng nó vẫn thừa hưởng các đặc tính của block như có thể tùy chỉnh kích thước, thêm background,… cố định bao quanh phần tử block: Chuyển phần tử về hiển thị kiểu block, sở hữu một hàng riêng. list-item: Chuyển phần tử về hiển thị như một mục danh sách, để có thể sử dụng thuộc tính list-style. none: Đơn giản là ẩn phần tử đó đi không cho hiển thị nữa, nó cũng sẽ ẩn luôn toàn bộ các khoảng trống mà nó sở hữu. Nếu bạn muốn ẩn đi mà vẫn đề lại “dấu vết” thì có thể sử dụng visibility: hidden.
:before :after :hover ntd last-child first-child

10. position: tùy chỉnh khu vực và không làm thay đổi khu vực khác.
relative: Dùng để thiết lập một phần tử sử dụng các thuộc tính position (xem ở dưới) mà không làm ảnh hưởng đến việc hiển thị ban đầu. absolute: Dùng để thiết lập vị trí của một phần tử nhưng nó sẽ luôn nằm trong một phần tử mẹ đang là relative. fixed: Hiển thị luôn đi theo trình duyệt khi cuộn trang. static: Đưa phần tử về hiển thị theo kiểu mặc định.

11. Pseudo class
:hover – Chọn trạng thái khi rê chuột vào một phần tử. :visited – Được sử dụng cho liên kết, chọn liên kết khi đã được truy cập (dựa vào History trên trình duyệt). :link – Được sử dụng cho liên kết, chọn liên kết khi chưa nhấp vào. :active – Chọn phần tử khi họ chọn/nhấp vào.
12. Tạo chuyển động với transition
transition: [thuộc tính chuyển động] [thời gian chuyển động] [thời gian delay] [kiểu chuyển động]
#box {  transition: margin-left 2s 0.5s ease-in-out;  -moz-transition: margin-left 2s 0.5s ease-in-out;  -webkit-transition: margin-left 2s 0.5s ease-in-out; }
13. Thay đổi hình dạng với transform. transform: function( value ); -moz-transform: function( value ); -webkit-transform: function( value );
14. Lệnh !important: Thay đổi thứ tự ưu tiên
15. Thuộc tính overflow dùng để quy định cách thức hiển thị khi kích thước nội dung lớn hơn kích thước box chứa nội dung đó. overflow: visible: Trường hợp mặc định, nếu text có kích thước > box thì sẽ tràn ra ngoài. Overflow: scroll: Xuất hiện thanh cuộn Overflow: auto: Xuất hiện thanh cuộn khi kích thước text>box Overflow: hidden: Ẩn nếu thừa

Bình Luận

comments