Bài giảng Lập trình web toàn tập với HTML, CSS, Jquery, Responsive, Bootstrap - Chương 5.1: CSS

Chia sẻ: ViDoraemon2711 ViDoraemon2711 | Ngày: | Loại File: PDF | Số trang:14

Thêm vào BST

Báo xấu

116
lượt xem 18
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Lập trình web toàn tập với HTML, CSS, Jquery, Responsive, Bootstrap - Chương 5.1: CSS trình bày các nội dung chính sau: Cách phân loại CSS, thuộc tính “name” trong thẻ input, một số selector trên thẻ. Mời các bạn cùng tham khảo để nắm nội dung chi tiết.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Lập trình web toàn tập với HTML, CSS, Jquery, Responsive, Bootstrap - Chương 5.1: CSS

Download miễn phí gì cũng có tại ilook.asia CSS |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Download miễn phí gì cũng có tại ilook.asia |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 1
Download miễn phí gì cũng có tại ilook.asia Phân loại CSS 1. Inline Style Sheet (Nhúng CSS vào tag HTML) 2. Internal Style Sheet (Nhúng CSS vào trang web) 3. Linking Style Sheet (External) (Liên kết CSS với trang web) |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Download Học lập miễn trình phítrựcgìtuyến cũng có tạitại ilook.asia myclass.vn |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 2
Download miễn phí gì cũng có tại ilook.asia Inline Style Sheet Inline Inline StyleStyle SheetSheet Inline CSS !  Định nghĩa style trong thuộc tính style của từng !  Định !  Định nghĩa nghĩastyle trongtrong style thuộcthuộc tính style củastyle tính từngcủa từng thẻthẻ HTML. HTML. thẻ ….…. …. Chỉ ! !  ảnhảnh Chỉ hưởng trongtrong hưởng phạm phạm vi của thẻ vi của thẻ !  Chỉ Ví ! !  dụ:ảnh Ví dụ: hưởng trong phạm vi của thẻ Ví STYLE="color: !  STYLE="color: This is yellow |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Download Học lập miễn trình phítrựcgìtuyến cũng có tạitại ilook.asia myclass.vn |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 3
Download miễn phí gì cũng có tại ilook.asia Internal CSS Internal Style Sheet !  Còn gọi là Embedding Style Sheet !  Định nghĩa nhúng trong thẻ của trang HTML !  Có khả năng ảnh hưởng trong phạm vi của trang HTML |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Download Học lập miễn trình phítrựcgìtuyến cũng có tạitại ilook.asia myclass.vn |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 4
Download miễn phí gì cũng có tại ilook.asia Internal Style Sheet – Ví dụ Internal Style Sheet – Ví dụ Internal Style Sheet – Ví dụ TML> Internal Style Internal CSS Sheet – Ví dụ EAD> Embedded Style Sheet Embedded Style Sheet Embedded Style Sheet Embedded green;} H2 {color: green;} --> font-size: 12pt; --> font-family: Arial;} H2 {color: green;} --> HEAD> ODY BGCOLOR="#FFFFFF"> This This isThis green This is red, is is red,1212 This Garamond. pt. and pt. and green Garamond. This is red, 12 pt. is This and red, Garamond. 12 pt. and Garamond. BODY> |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Download Học lập miễn trình phítrựcgìtuyến cũng có tạitại ilook.asia myclass.vn |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 5 HTML>
Download miễn phí gì cũng có tại ilook.asia Linking CSS -‐ External CSS Linking Style Sheet !  Còn được gọi là External Style Sheet !  Định nghĩa style trong file có phần mở rộng là *.CSS !  Có khả năng ảnh hưởng trong phạm vi nhiều trang HTML có liên kết tới nó !  Trang HTML : Liên kết bằng tag style với @import url. Cú pháp @import url(URL); |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Download Học lập miễn trình phítrựcgìtuyến cũng có tạitại ilook.asia myclass.vn |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 6
H2 { Download miễn phí gì cũng có tại ilook.asia FONT-WEIGHT: bold; Cass……… FONT-SIZE: 16pt; Linking CSS -‐ External CSS -‐ FONT-STYLE: italic; FONT-FAMILY: Arial; Ví dụ This is an H2 BACKGROUND-COLOR: Trong!tập!Dn!MyStyle.CSS$ red; Trong!trang!Web!:!demo.htm$ Trong!tập!Dn!MyStyle.CSS$ Trong!tập!Dn!MyStyle.CSS$ Trong!trang!Web!:!demo.htm$ Trong!trang!Web!:!demo.htm$ H2 } H2 H2 { { { FONT-WEIGHT: bold; FONT-WEIGHT: bold; Cass……… Cass……… FONT-SIZE: 16pt; FONT-SIZE: 16pt; COLOR: white; REL="stylesheet" COLOR: white; FONT-SIZE: 16pt; COLOR: white;Arial; FONT-FAMILY: FONT-FAMILY: Arial; isisananH2H2 This This FONT-STYLE: italic; BACKGROUND-COLOR: BACKGROUND-COLOR: red; red; } } FONT-FAMILY: Arial; This is an H2 BACKGROUND-COLOR: red; } |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Download Học lập miễn trình phítrựcgìtuyến cũng có tạitại ilook.asia myclass.vn |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 7
Download miễn phí gì cũng có tại ilook.asia Thuộc tính “value” sẽ xác định giá trị của thẻ input Nó được sử dụng trong những loại thẻ input khác nhau: Đối với type là “button”, “reset”, “submit” thì nó xác định là text hiể thị trên button Đối với type là “text”, “password” và “hidden” thì nó xác định đó là giá trị khởi tạo hay giá trị mặc định ban đầu của trường input này. Đối với type là “checkbox”, “radio”, “image”, nó sẽ xác định giá trị tương ứng cho các thẻ input và các giá trị này cũng sẽ được gởi khi nhấn submit. |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Download Học lập miễn trình phítrựcgìtuyến cũng có tạitại ilook.asia myclass.vn |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 8
Download miễn phí gì cũng có tại ilook.asia Thuộc ?nh “value” trong thẻ input -‐ Ví dụ Nhập tên: Nhập họ |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Download Học lập miễn trình phítrựcgìtuyến cũng có tạitại ilook.asia myclass.vn |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 9
Download miễn phí gì cũng có tại ilook.asia Thuộc ?nh “name” trong thẻ input Thuộc tính “name” dùng để chỉ định tên cho thẻ input Được sử dụng trong việc xử lý Javascript và dùng để tham chiếu nhận dữ liệu trong form sau khi submit |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Download Học lập miễn trình phítrựcgìtuyến cũng có tạitại ilook.asia myclass.vn |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 10
Download miễn phí gì cũng có tại ilook.asia Thuộc ?nh “name” trong thẻ input -‐ Ví dụ Tên: Email: |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Download Học lập miễn trình phítrựcgìtuyến cũng có tạitại ilook.asia myclass.vn |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 11
Download miễn phí gì cũng có tại ilook.asia CSS Selector phần 2 -‐ Độ ưu Hên Độ ưu tiên của các loại CSS !  Thứ tự ưu tiên áp dụng định dạng khi sử dụng các loại CSS (độ ưu tiên giảm dần) : 1.  Inline Style Sheet 2.  Internal & Import Style Sheet 3.  Linking Style Sheet 4.  Browser Default |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Download Học lập miễn trình phítrựcgìtuyến cũng có tạitại ilook.asia myclass.vn |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 12
Download miễn phí gì cũng có tại ilook.asia !important !important CSS Selector phần 2 -‐ Độ ưu Hên |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Download Học lập miễn trình phítrựcgìtuyến cũng có tạitại ilook.asia myclass.vn |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 13
Download miễn phí gì cũng có tại ilook.asia Một số selector trên thẻ Selector Ví dụ Ý nghĩa của ví dụ :link a:link Chọn tất cả liên kết chưa vào :visited a:visited Chọn tất cả liên kết đã vào :active a:active Chọn liên kết đang được kích hoạt :hover a:hover Chọn liên kết đang được rê chuột vào :focus input:focus Chọn thẻ input đang có con trỏ chuột :first-letter p:first-letter Chọn kí tự đầu tiên của các thẻ p :first-line p:first-line Chọn dòng đầu tiên của các thẻ p :first-child p:first-child Chọn các thẻ p là con đầu tiên của cha nó |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| Download Học lập miễn trình phítrựcgìtuyến cũng có tạitại ilook.asia myclass.vn |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 14 :before p:before Bổ sung nội dung trước thẻ p :after p:after Bổ sung nội dung trước thẻ p :lang(language) p:lang(it) Chọn các thẻ p có thuộc tính lang bắt đầu bằng «it»