Bài giảng Thiết kế và lập trình web: Bài 3 - Viện Công nghệ thông tin và truyền thông

Bài giảng Thiết kế và lập trình web - Bài 3: CSS – Casscading Style Sheets cung cấp cho người học các kiến thức: Giới thiệu CSS, định nghĩa Style, sử dụng và phân loại CSS, Selector trong CSS và phạm vi ảnh hưởng. Mời các bạn cùng tham khảo.

Thiết kế lập trình Web Bài CSS – Casscading Style Sheets Viện CNTT & TT Thiết kế lập trình Web Nội dung  Giới thiệu CSS  Định nghĩa Style  Sử dụng Phân loại CSS  Selector CSS phạm vi ảnh hưởng Thiết kế lập trình Web Nội dung  Giới thiệu CSS  Định nghĩa Style  Sử dụng Phân loại CSS  Selector CSS phạm vi ảnh hưởng Thiết kế lập trình Web Giới thiệu CSS  CSS = Casscading Style Sheets  Dùng để mô tả cách hiển thị thành phần trang WEB  Ban đầu HMTL – Tập quy tắc cho phép NSD xem trang Web – Không hỗ trợ nhà thiết kế có nhiều quyền chi phối thiết kế => Các trình duyệt bổ sung thêm thẻ HTML riêng, không theo chuẩn  W3C (World Wide Web Consortium) đời CSS cho phép hỗ trợ nhà thiết kế Thiết kế lập trình Web Giới thiệu CSS  Style tiết kiệm thời gian  CSS dễ thay đổi  Sự quán  Khả chi phối đa dạng  Tạo định dạng chung cho tồn Web Thiết kế lập trình Web Giới thiệu CSS – Ví dụ Without CSS With CSS Thiết kế lập trình Web Nội dung  Giới thiệu CSS  Định nghĩa Style  Sử dụng Phân loại CSS  Selector CSS phạm vi ảnh hưởng Thiết kế lập trình Web Định nghĩa Style Kiểu Kiểu … SelectorName { property1:value1; property2:value2; ……… propertyN:valueN;} ……… Ví dụ: Ví dụ: DHKHTN TieuDe1 { color: red; font-family: Verdana, sans-serif; } DHBKHN Thiết kế lập trình Web Định nghĩa Style – Ghi  Giống Ghi C++  Sử dung /*Ghi chú*/  Ví dụ :  SelectorName { property1:value1; /*Ghi chu 1*/ property2:value2; /*Ghi chu 2*/ ……… propertyN:valueN;} Thiết kế lập trình Web Nội dung  Giới thiệu CSS  Định nghĩa Style  Sử dụng Phân loại CSS  Selector CSS phạm vi ảnh hưởng Thiết kế lập trình Web 5.1 Relative positioning Thuộc tính clear:  Thuộc tính clear thuộc tính thường gán vào phần tử liên quan tới phần tử float để định hướng xử phần tử  Ở ví dụ trên, float ảnh qua trái văn tràn lên để lắp vào chỗ trống Nhưng đặt vào văn thuộc tính clear có quyền định xem phần văn có tràn lên hay khơng Thiết kế lập trình Web 5.1 Relative positioning Thuộc tính clear:  Thuộc tính clear có tất thuộc tính: – left (tràn bên trái), – right (tràn bên phải), – both (không tràn) – none Thiết kế lập trình Web 5.2 Absolute positioning  Một phần tử vị trị tuyết đối bố trí liên quan đến cha có vị trí gần  Nội dung phần tử định vị tuyệt đối không bị ảnh hưởng box  Sử dụng giá trị absolute fixed thuộc tính position  Giả sử muốn định vị ảnh vị trí 70px cách đỉnh 90px từ bên trái tài liệu, viết CSS sau: img { position:absolute; top:70px; left:90px } Thiết kế lập trình Web 5.2 Absolute positioning  Ví dụ: đặt bốn ảnh bốn góc tài liệu định vị tuyệt đối #logo1 { position:absolute; top:50px; left:70px } #logo2 { position:absolute; top:0; right:0 } #logo3 { position:absolute; bottom:0; left:0 } #logo4 { position:absolute; bottom:70px; right:50px } Thiết kế lập trình Web 5.3 Layer  Cách đặt thành phần web lớp khác với thuộc tính z-index  Nói đơn giản cách đặt thành phần lên thành phần khác  Với mục đích này, gán cho phần tử số Theo đó, phần tử có số cao nằm trên, phần tử có số thấp nằm Thiết kế lập trình Web 5.3 Layer  Ví dụ: #apples { #oranges { position: absolute; position: absolute; top: 20px; top: 50px: left: 20px; left: 50px: width: 200px; width: 200px; z-index: 1; z-index: 2; } } Thiết kế lập trình Web Ví dụ xây dựng layout web đơn giản với thẻ div  Bố cục trang gồm phần – header, sidebar, main, footer  Mỗi phần xác định bẳng thẻ div thuộc tính id

Header content

Sidebar content

Main content

Footer content

Trang Web ban đầu header main sidebar footer Thiết kế lập trình Web Layout (1): header  margin padding thiết lập (reset CSS)  Xác định CSS chung trang cho phần header *{ margin: 0; padding: 0; } body { background-color: white; color: black; } div#header { background-color: red; color: white; } header main sidebar footer Thiết kế lập trình Web Layout (2): main  Xác định CSS cho phần main div#main { float: left; height: 400px; } header sidebar footer main Thiết kế lập trình Web Layout (3): sidebar  Xác định CSS cho phần sidebar – Thiết lập chiều cao đẩy sang bên phải – Giới hạn chiều rộng sidebar 25% phần chứa header div#sidebar { float: right; height: 400px; width: 25%; background-color: yellow; color: black; } main footer footer sidebar Thiết kế lập trình Web Layout (4): footer  Xác định CSS cho phần footer  Sử dụng “clear: both;” div#footer { clear: both; background-color: blue; color: white; } header main footer sidebar Thiết kế lập trình Web Bài tập  Bạn viết đoạn mã CSS để trình bày style mơ tả đây: – Màu cho trang: #99CC66 – Font chữ: Arial – Tiêu đề bảng: chữ in nghiêng, màu chữ màu xanh, màu #CCCCFF Thiết kế lập trình Web Bài tập  Sửa lại CSS cho phù hợp Thiết kế lập trình Web Bài tập  Hồn thiện CSS CT 310 Final, Question - Style 1 John Paul George Ringo Thiết kế lập trình Web Bài tập ... div.borderwidth { border-width: 2px; }  Giá trị STT thin medium thick length 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', 'border-width' Thiết kế lập trình Web 4.4... background-color:#645eff; } body{ } background-image:url('tree.png'); background-repeat:no-repeat; background-position:top right; background-attachment:fixed; margin-right :30 0px; Thiết kế lập trình. .. Browser Default Thiết kế lập trình Web Thiết kế lập trình Web Nội dung  Giới thiệu CSS  Định nghĩa Style  Sử dụng Phân loại CSS  Selector CSS phạm vi ảnh hưởng Thiết kế lập trình Web Selector