thuyết trình về css

CSS gì? CSS ngôn ngữ quy định cách trình bày cho tài liệu viết HTML, XHTML, XML, SVG, hay UML,…HTML hỗ trợ số thuộc tính định dạng cho text, picture, table, … không thật phong phú CSS cung cấp cho bạn thuộc tính trình bày dành cho đối tượng html nhằm mang lại hiệu tốt (Trông đẹp hơn) Quy Ước Về Cách Viết CSS Cú pháp CSS bản: Selector { property:value; } VD: body { background-color:#00BFF3; } h1 { color:#FFFFFF; } a{ background-color:#0000FF; } Selector Selector: Các đối tượng mà áp dụng thuộc tính trình bày Nó tag HTML, class hay id (chúng ta coi thành phần slide sau) Ví dụ: body, h2, p, img, #title, #content, username,… Selector tag HTML Các tag html bao gồm số sau: … Cách áp dụng css cho tag html sau: têntag{ property:value;} VD: body{ color:#00FF00;} Selector id Khi khai báo tag html ta bổ sung thêm id vào thành phần tag sau: Khi trình duyệt đọc file css tìm đến tag có id giống khai báo để áp dụng định dạng tương ứng Selector id Cách khai báo css cho tag có id sau: # id_name{property:value;} VD: #myID1{color:#FF00FF;} #myID2{color:#FF00FF;} #myID3{color:#FF00FF;} Selector class Tương tự id ta sửa lại tag html sau: Và khai báo css củng tương tự thay đổi ký tự nhận diện class lúc dấu chấm (“.”) Selector class Khai báo class css sau: class_name{property:value;} VD: myClass{color:#ff00ff;} Phân biệt class id Trong trang html tag có id, có nhiểu tag có class Điểm thú vị tag có nhiều class cách khoản trắng VD: Ta quay lại phần sau Property Property: Chính thuộc tính quy định cách trình bày Ví dụ: background-color, fontfamily, color, padding, margin,… Mỗi thuộc tính CSS phải gán giá trị Nếu có nhiều thuộc tính selector phải dùng dấu ; (chấm phẩy) để phân cách thuộc tính Tất thuộc tính selector đặt cặp ngoặc nhọn sau selector Font Chữ Kích thước font định thuộc tính fontsize Thuộc tính nhận giá trị đơn vị đo hỗ trợ CSS bên cạnh giá trị xx-small, x-small, small, medium, large,x-large, xx-large, smaller, larger Tùy theo mục đích sử dụng website bạn lựa chon đơn vị phù hợp VD: body { font-size:20px } Font Chữ Cấu trúc rút gọn cho thuộc tính nhóm font: Font : | |< font-family> vd: h1 { font: italic 35px arial,verdana,sans-serif; } Text Để định màu chữ cho thành phần trang web sử dụng thuộc tính color Giá trị thuộc tính giá trị màu CSS hỗ trợ ● Vd: body { color:#000 } Text Thuộc tính text-align giúp bạn thêm canh chỉnh văn cho thành phần trang web Cũng tương tự lựa chọn canh chỉnh văn trình soạn thảo văn thông dụng MS Word, thuộc tính có tất giá trị : left (canh trái – mặc định), right (canh phải), center (canh giữa) justify (canh đều) Text Thuộc tính text-decoration giúp bạn thêm hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), hiệu ứng đặc biệt văn nhấp nháy (blink) Vd: h1 { text-decoration:underline } Pseudo-classes For Links Pseudo-classes cho phép bạn xác định hiệu ứng định dạng cho đối tượng liên kết trạng thái xác định liên kết chưa thăm (a:link), rê chuột lên liên kết (a:hover), liên kết thăm (a:visited) hay liên kết kích hoạt – giữ nhấn chuột (a:active).Vd: a:link { color:#00FF00 } a:hover { color:#FF00FF } a:visited { color:#FF0000 } a:active { color:# 662D91 } Margin margin CSS dùng để canh lề ( xác định khoản cách)cho trang web hay thành phần web với thành phần web khác hay với viền trang.Vd: body { margin-top:80px; margin-bottom:40px; margin-left:50px; margin-right:30px; } Hoặc :body { margin:80px 30px 40px 50px; } Theo thứ tự : top-right-bottom-left Padding ● ● ● ● Padding hiểu thuộc tính đệm Padding không ảnh hưởng tới khoảng các đối tượng margin mà quy định khoảng cách phần nội dung viền đối tượng Cú pháp: Tương tự margin Padding: | | | Các bạn thử thực lại ví dụ phần margin, thay margin padding, nhớ quan sát vị trí đường viền Border Border-width thuộc tính CSS quy định độ rộng cho viền đối tượng web Thuộc tính có giá trị: thin (mảnh), medium (vừa), thick (dày), giá trị đo cụ thể pixels Border-color thuộc tính CSS quy định màu viền cho đối tượng web Thuộc tính nhận tất đơn vị màu CSS hỗ trợ Border Border-style thuộc tính CSS quy định kiểu viền thể đối tượng web CSS cung cấp tất kiểu viền tương ứng với giá trị: dotted, dashed, solid,double, groove, ridge, inset outset Ngoài ra, hai giá trị none hay hidden dùng để ẩn đường viền Để hiểu rõ hơn, bạn tự demo kiểm tra kết !!! Border Để dễ nhớ sử dụng cấu trúc rút gọn CSS sau: Border: | | vd: h1{ border: 1px solid #00ff00; } Height & Width ● ● ● Width thuộc tính CSS dùng để quy định chiều rộng cho thành phần web Height thuộc tính CSS dùng để quy định chiều cao cho thành phần web Vd: p{ width:700px; height:300px } Position ● Thuộc tính position mang lại nhiều khả để tạo cách trình bày tiên tiến xác cho trang web Hãy tưởng tượng cửa sổ trình duyệt bạn giống hệ tọa độ với position bạn đặt đối tượng web vị trí hệ tọa độ Position Định vị tuyệt đối định vị mà thành phần định vị không để lại khoảng trống tài liệu Một thành phần định vị tuyệt đối nhận giá trị position absolute Các đối tượng định vị tuyệt đối dùng kết hợp với thuộc tính top, left, right, bottom để xác định tọa độ ● Vd: #logo1 { position:absolute; top:50px; left:70px } THE END Để biết thêm property khác css bạn lên w3schools.com để tham khảo !!! [...]... padding:1px;} Cách chèn css vào file html Có 3 cách làm: 1)Chèn trực tiếp trong tag html: 2)Khai báo css trong 2 tag html trong phần head của trang 3)Khai báo id & class trong file zzZ .CSS và khai báo đường dẫn đến file trong html Cách chèn css vào file html VD cách 2: #myID{ } myClass{ } Cách chèn css vào file... một thuộc tính CSS quy định độ rộng cho viền của một đối tượng web Thuộc tính này có các giá trị: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels Border-color là thuộc tính CSS quy định màu viền cho một đối tượng web Thuộc tính này nhận tất cả đơn vị màu CSS hỗ trợ Border Border-style là thuộc tính CSS quy định kiểu viền thể hiện của một đối tượng web CSS cung cấp tất... trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web Background Khi sử dụng quá nhiều thuộc tính CSS sẽ gây khó khăn cho người đọc, công tác chỉnh sửa cũng như tốn nhiều dung lượng ổ cứng cho nên CSS đưa ra một cấu trúc rút gọn cho các thuộc tính cùng nhóm Ví dụ: Chúng ta có thể nhóm lại đoạn CSS sau : background-color:transparent; background-image: url(logo.png); background-repeat: no-repeat;... html VD cách 2: #myID{ } myClass{ } Cách chèn css vào file html VD cách 3: Ta có file zzZZ .css đặt cùng thư mục với file html Ta thêm đoạn code sau vào phần head: Thứ tự ưu tiên Với cùng 1 tag ta khai báo = 3 cách trên, cùng thuộc tính color, khác giá trị thì nó nhận của thằng nào ?... nào đó trên trang web chúng ta sử dụng thuộc tính color Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ ● Vd: body { color:#000 } Text Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bản cho các thành phần trong trang web Cũng tương tự như các lựa chọn canh chỉnh văn bản trong các trình soạn thảo văn bản thông dụng như MS Word, thuộc tính này có tất cả 4 giá trị : left (canh trái –... background-image:url(logo.png) } Background Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh nền Thuộc tính này có 4 giá trị: ● repeat-x: Chỉ lặp lại ảnh theo phương ngang ● repeat-y: Chỉ lặp lại... hay khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active).Vd: a:link { color:#00FF00 } a:hover { color:#FF00FF } a:visited { color:#FF0000 } a:active { color:# 662D91 } Margin margin trong CSS được dùng để canh lề ( xác định khoản cách)cho cả trang web hay một thành phần web này với các thành phần web khác hay với viền trang.Vd: body { margin-top:80px; margin-bottom:40px; margin-left:50px;... các thành phần trang web VD: h1 { font-style:italic; h2 { font-style:oblique; } } Font Chữ Kích thước của một font được định bởi thuộc tính fontsize Thuộc tính này nhận các giá trị đơn vị đo hỗ trợ bởi CSS bên cạnh các giá trị xx-small, x-small, small, medium, large,x-large, xx-large, smaller, larger Tùy theo mục đích sử dụng của website bạn có thể lựa chon những đơn vị phù hợp VD: body { font-size:20px