Giáo trình CSS (Phần 1)

CSS 1 Download miễn phí gì cũng có tại ilook.asia ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||Download miễn phí gì cũng có tại ilook.asia Phân  loại  CSS 2Học lập trình trực tuyến tại myclass.vn 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 miễn phí gì cũng có tại ilook.asia ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||Download miễn phí gì cũng có tại ilook.asia Inline  CSS 3Học lập trình trực tuyến tại myclass.vn Inline Style Sheet !  Định nghĩa style trong thuộc tính style của từng thẻ HTML. . !  Chỉ ảnh hưởng trong phạm vi của thẻ !  Ví dụ: This is yellow Inline Styl Sheet !  Định nghĩa style trong thuộc tính style của từng thẻ HTML. . Chỉ ảnh hưởng trong phạm vi của thẻ !  Ví dụ: This is yellow Inline Style Sheet !  Định nghĩa style trong thuộc tính style của từng thẻ HTML. . !  Chỉ ảnh hưởng trong phạm vi của thẻ !  Ví dụ: This is yellow Download miễn phí gì cũng có tại ilook.asia ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||Download miễn phí gì cũng có tại ilook.asia Internal  CSS 4Học lập trình trực tuyến tại myclass.vn !  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 <!-- SelectorName { property1:value1; property2:value2; propertyN:valueN;} --> Internal Style Sheet Download miễn phí gì cũng có tại ilook.asia ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||Download miễn phí gì cũng có tại ilook.asia Internal  CSS 5Học lập trình trực tuyến tại myclass.vn Internal Style Sheet – Ví dụ Embedded Style Sheet <!-- P {color: red; font-size: 12pt; font-family: Arial;} H2 {color: green;} --> This is green This is red, 12 pt. and Garamond. Internal Style Sheet – Ví dụ Embedded Style Sheet <!-- P {color: red; f nt-size: 12pt; font-family: Arial;} H2 {color: green;} --> This is green This is red, 12 pt. and Garamond. Internal Style Sheet – Ví dụ Embedded Style Sheet <!-- P {color: red; font-size: 12pt; font-family: Aria ;} H2 {color: green;} --> This is green This is red, 12 pt. and Garamond. Internal Style Sheet – Ví dụ Embedded Style Sheet <!-- P {color: red; font-size: 12pt; font-family: Arial;} H2 {color: green;} --> This is green This is red, 12 pt. and Garamond. Download miễn phí gì cũng có tại ilook.asia ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||Download miễn phí gì cũng có tại ilook.asia Linking  CSS  -­‐  External  CSS 6Học lập trình trực tuyến tại myclass.vn 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 miễn phí gì cũng có tại ilook.asia ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||Download miễn phí gì cũng có tại ilook.asia Linking  CSS  -­‐  External  CSS  -­‐  Ví  dụ 7Học lập trình trực tuyến tại myclass.vn Linking Style Sheet – Ví dụ Trong!tập!Dn!MyStyle.CSS$ H2 { FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; } Trong!trang!Web!:!demo.htm$ Cass This is an H2 Linking Style Sheet – Ví dụ Trong!tập!Dn!MyStyle.CSS$ H2 { FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; } Trong!trang!Web!:!demo.htm$ Cass This is an H2 i ing Style Sheet – Ví dụ Trong!tập!Dn!MyStyle.CSS$ H2 { FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; } Trong!trang!Web!:!demo.htm$ Cass d> > >This is an H2 y> Linking Style Sheet – Ví dụ Trong!tập!Dn!MyStyle.CSS$ H2 { FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; } Trong!trang!Web!:!demo.htm$ Cass This is an H2 Download miễn phí gì cũng có tại ilook.asia ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||Download miễn phí gì cũng có tại ilook.asia 8Học lập trình trực tuyến tại myclass.vn 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ển 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 miễn phí gì cũng có tại ilook.asia ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||Download miễn phí gì cũng có tại ilook.asia Thuộc  ?nh  “value”  trong  thẻ  input  -­‐  Ví  dụ 9Học lập trình trực tuyến tại myclass.vn Nhập tên: Nhập họ Download miễn phí gì cũng có tại ilook.asia ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||Download miễn phí gì cũng có tại ilook.asia Thuộc  ?nh  “name”  trong  thẻ  input 10Học lập trình trực tuyến tại myclass.vn 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 miễn phí gì cũng có tại ilook.asia ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||Download miễn phí gì cũng có tại ilook.asia Thuộc  ?nh  “name”  trong  thẻ  input  -­‐  Ví  dụ 11Học lập trình trực tuyến tại myclass.vn Tên: Email: Download miễn phí gì cũng có tại ilook.asia ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||Download miễn phí gì cũng có tại ilook.asia CSS  Selector  phần  2  -­‐  Độ  ưu  Hên 12Học lập trình trực tuyến tại myclass.vn Độ ư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 miễn phí gì cũng có tại ilook.asia ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||Download miễn phí gì cũng có tại ilook.asia CSS  Selector  phần  2  -­‐  Độ  ưu  Hên 13Học lập trình trực tuyến tại myclass.vn !important !important Download miễn phí gì cũng có tại ilook.asia ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||Download miễn phí gì cũng có tại ilook.asia Một  số  selector  trên  thẻ 14Học lập trình trực tuyến tại myclass.vn 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ó :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» 05/03/2015 Phát triển ứng dụng web 27 Download miễn phí gì cũng có tại ilook.asia ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||Download miễn phí gì cũng có tại ilook.asia