Cascading Style Sheets

háp
 Selector {properties:value;}
 Ví dụ:
 hr {color:blue;}
 p {margin-left:20px;}
 body {background-color:lavender;}
Cú pháp
Chèn style sheet
 External: dùng thẻ liên kết file css bên 
 ngoài
  Có thể áp dụng cho nhiều tài liệu khác nhau
 Internal: dùng thẻ đặt trong phần 
 head
  Có hiệu lực trong tài liệu chứa nó
 Inline: dùng thuộc tính style trong thẻ 
  Chỉ có hiệu lực trong chính thẻ HTML đó
Chèn style sheet
 External:
 <link rel="stylesheet"
 type="text/css"
 href="tên_file.css" />
 Internal:
 /*...*/ 
 Inline:
 <p style="color:sienna;margin-
 left:20px">This is a paragraph.
Độ ưu tiên
 Khi có nhiều kiểu cùng áp dụng lên một 
 phần tử, thì độ ưu tiên sẽ tăng dần theo 
 thứ tự
 External < Internal < Inline
 External CSS Internal CSS Inline CSS
Cascading Style Sheets
 BỘ CHỌN (SELECTORS)
 ThS Nguyễn Minh Vi
 BM Tin học – ĐH An Giang
Selectors
 Html selector: tên thẻ html được dùng 
 làm tên của selector
  áp dụng kiểu cho một thẻ html
 h1 {text-align:center;}
  hoặc áp dụng kiểu cho nhiều thẻ html
 h1, h2 {text-align:center;}
Selectors
 Id selector: bắt đầu bằng dấu #, theo sau 
 là tên selector 
  chỉ áp dụng kiểu cho phần tử đơn lẻ, thông 
 qua thuộc tính id (phần tử có thuộc tính id là 
 tên của id selector)
 #id1 {text-align:center;}
Selectors
 Class selector: bắt đầu bằng dấu . và 
 theo sau là tên selector
  dùng cho nhóm phần tử thuộc cùng class 
 (thông qua thuộc tính class)
 .center {text-align:center;}
  hoặc cho phần tử HTML mà thuộc class này 
 (kết hợp giữa html selector và class selector)
 p.center {text-align:center;}
Pseudo class
 Cú pháp:
 selector:pseudo-class {property:value;}
 selector.class:pseudo-class {property:value;}
 VD: 
  trạng thái của liên kết:
 a:link {color:#FF0000;}
 a:visited {color:#00FF00;}
 a:hover {color:#FF00FF;}
 a:active {color:#0000FF;}
  định dạng ký tự đầu đoạn: 
 p:first-letter {
 color:#ff0000;
 font-size:xx-large; }
Cascading Style Sheets
 CÁC THUỘC TÍNH CƠ BẢN
 ThS Nguyễn Minh Vi
 BM Tin học – ĐH An Giang
Background
 Thuộc tính Ý nghĩa Giá trị
 thiết lập tất cả thuộc 
background tính nền trong cùng 
 một khai báo
 ảnh nền cố định hoặc fixed
background-attachment
 cuộn theo nội dung scroll
 màu (tên hoặc chỉ số)
background-color màu nền
 transparent
background-image ảnh nền url(‘ ‘)
 top left/center/right
 vị trí bắt đầu của ảnh center left/center/right
background-position
 nền bottom left/center/right
 x% y% / xpos ypos
 no-repeat
background-repeat cách lặp ảnh nền repeat-x
 repeat-y
Background
 Ví dụ
 body{
 background-image: url('hinh.jpg');
 background-position: center;
 background-repeat: repeat-x;
 }
Fonts
 Thuộc tính Ý nghĩa Giá trị
 thiết lập tất cả thuộc tính font 
font
 trong cùng một khai báo
font-family font chữ tên font
 (xx-/x-)small / smaller
 medium
font-size kích thước
 (xx-/x-)large / larger 
 length / %
 normal
font-style kiểu chữ italic
 oblique
 hiển thị theo dạng bình thường normal
font-variant
 hoặc small-caps small-caps
 normal
 bold / bolder
font-weight độ đậm nhạt 
 lighter
 
 100 900
Text
 Thuộc tính Ý nghĩa Giá trị
color màu chữ
 ltr 
direction hướng chữ
 rtl
 left 
 right 
text-align canh lề theo chiều ngang
 center 
 justify
 top
vertical-align canh lề theo chiều đứng middle
 bottom
 none
 underline 
text-decoration cách trang trí (các kiểu gạch) overline 
 line-through
 blink
Text
 Thuộc tính Ý nghĩa Giá trị
text-shadow bóng chữ
 normal 
letter-spacing khoảng cách giữa các ký tự
 length
 normal
word-spacing khoảng cách giữa các từ
 length
 length
text-indent lề dòng đầu của khối text
 %
 none
 capitalize
text-transform chữ hoa thường
 uppercase
 lowercase
 normal
white-space cách xử lý white-space pre
 nowrap
font, text
 Ví dụ
.specialtext {
 font-family: Verdana;
 font-size: 48px; font-weight: 900;
 color: #FF0000;
 text-decoration: underline overline line-through;
 text-transform: capitalize;
 letter-spacing: 20;
}
web
List
 Thuộc tính Ý nghĩa Giá trị
 thiết lập tất cả thuộc tính 
list-style danh sách trong cùng 
 một khai báo
 none
list-style-image ảnh của list-item
 url(‘ ’)
 inside
list-style-position vị trí của list-item
 outside
 disc/circle/square
 decimal/ decimal-leading-zero
list-style-type kiểu của list-item
 lower-roman/upper-roman
 lower-alpha/upper-alpha
List
 Ví dụ
 .bullet{
 list-style-position: inside;
 list-style-image: url(‘smiley.gif’);
 }
 HTML
 CSS
 Javascript
Table
 Thuộc tính Ý nghĩa Giá trị
 collapse
border-collapse kiểu đường viền bảng
 separate
 khoảng cách giữa các đường viền của 
border-spacing length
 các ô (kiểu separate)
 top
 bottom
caption-side vị trí tiêu đề so với bảng
 left
 right
 hiện hoặc ẩn đường viền các ô trống show
empty-cells
 (kiểu separate) hide
 auto
table-layout kiểu layout bảng
 fixed
 Table
  Ví dụ
 table, td, th{
 border:1px solid blue;
 text-align: center; } 
 table{
 border-collapse: separate;
 empty-cells: hide;
 border-spacing: 5px; } 
 th{
 background-color:blue;
 color:white; }
Nội dungSố tiết LTSố tiết TH
HTML1010
CSS35
Javascript710
PHP+MySQL510
Ôn tập5
Link
 Liên kết có các trạng thái
  link: bình thường, chưa được chọn
  visited: đã được chọn
  hover: đang được lướt chuột lên
  active: đang được chọn
 Có thể áp dụng các thuộc tính màu chữ, 
 nền, hiệu ứng chữ cho các trạng thái của 
 liên kết
Link
 a:link {
 background-color: #AAAAFF;
 Ví dụ text-decoration: none; }
 a:visited {
 background-color: #DDDDDD;
 text-decoration: none; }
 a:hover {
 background-color: #FF704D;
 text-decoration: overline; }
 a:active {
 background-color: #FF0000;
 text-decoration: none; }
 Trang chủ AGU | 
 Thư điện tử | 
 Báo sinh viên | 
 Lớp học ảo
Cascading Style Sheets
 CÁC THUỘC TÍNH VIỀN, LỀ, …
 ThS Nguyễn Minh Vi
 BM Tin học – ĐH An Giang
Box model
Margin
 Thuộc tính Ý nghĩa Giá trị
margin thiết lập lề
margin-top
 auto
margin-bottom
 lề trên, dưới, trái, phải pixel
margin-left
 %
margin-right
Border
 Thuộc tính Ý nghĩa Giá trị
border 
border-color thiết lập các thuộc tính
border-width đường viền cho nhiều cạnh
border-style
border-top-width thin
border-left-width medium
 độ dày đường viền của các cạnh
border-right-width thick
border-bottom-width giá trị cụ thể
border-top-color 
border-left-color 
 màu đường viền của các cạnh
border-right-color 
border-bottom-color
border-top-style kiểu đường viền của các cạnh none / solid /double
border-left-style dotted / dashed
border-right-style groove / ridge
border-bottom-style inset / outset
Border
 Ví dụ
 .box {
 height: 150px;
 width: 150px;
 position: absolute;
 left: 200px;
 top: 200px;
 background-color: #99CCFF;
 border-width: thick;
 border-style: dotted;
 border-top-color: #990000;
 border-right-color: #0000FF;
 border-bottom-color: #FF9900;
 border-left-color: #00FF00;
 }
Padding
 Thuộc tính Ý nghĩa Giá trị
 thiết lập khoảng cách từ 
padding
 đường viền đến nội dung
padding-top
padding-bottom khoảng cách trên, dưới, trái, pixel
padding-left phải %
padding-right
Outline
 Thuộc tính Ý nghĩa Giá trị
 thiết lập thuộc tính 
outline
 outline
 màu
outline-color màu
 invert
 none / solid /double
 dotted / dashed
outline-style kiểu
 groove / ridge
 inset / outset
 thin
 medium
outline-width độ dày
 thick
 giá trị cụ thể
Cascading Style Sheets
 CÁC THUỘC TÍNH VỊ TRÍ
 ThS Nguyễn Minh Vi
 BM Tin học – ĐH An Giang
Positioning
Thuộc tính Ý nghĩa Giá trị
 static 
 fixed
position kiểu vị trí đặt phần tử
 relative
 absolute
top
bottom khoảng cách trên, dưới, trái, phải pixel
left so với phần tử chứa nó %
right
 vị trí phần tử được đẩy sang trái left
float
 hoặc phải right
 block
 hiển thị phần tử theo khối (riêng 
display inline
 dòng), trên dòng, hoặc ẩn
 none
 thứ tự của phần tử (khi có nhiều auto
z-index
 phần tử chồng lên nhau) số thứ tự
Positioning
Thuộc tính Ý nghĩa Giá trị
 auto
clip hình dạng xén phần tử
 shape
 thiết lập khi nội dung vượt quá auto / scroll
overflow
 phần của nó visible / hidden
 baseline / sub / super
vertical-align canh lề theo chiều đứng
 top / middle / bottom
Positioning
 Ví dụ thuộc tính position
 p.fix{
 position: fixed;
 top: 10px;
 left: 10px;
 color: red;
 }
 Đoạn văn có đặt thuộc 
 tính position
 Đoạn văn bình thường
 Đoạn văn bình thường
 Đoạn văn bình thường
 Đoạn văn bình thường
Positioning
 Ví dụ thuộc tính float
 img{
 float: right;
 width: 100;
 height: 50;
 border: 1px solid silver;
 }
Positioning
 Ví dụ thuộc tính display
 a{
 display: block;
 width: 150px;
 border-bottom: thin solid white;
 background-color: silver;
 padding: 5px;
 }
 HTML
 CSS
 Javascript
 PHP-MySQL
Cascading Style Sheets
 MỘT SỐ THUỘC TÍNH 
 NÂNG CAO
 ThS Nguyễn Minh Vi
 BM Tin học – ĐH An Giang
Border
 Bo tròn góc: border-radius
 div {
 border:2px solid;
 border-radius:25px;
 }
 Bóng viền: box-shadow
 div {
 box-shadow: 10px 10px 5px 
 #888888;
 }
Image
 Độ trong suốt của ảnh: opacity (0.0 – 1.0)
 img {
 opacity:0.4;
 filter:alpha(opacity=40);
 /* IE8 về trước */
 } 
 Kích thước ảnh nền: background-size
 div {
 background:url('hinh.jpg');
 background-size:600px 600px;
 background-repeat:no-repeat;
 }
Text
 Bóng chữ: text-shadow
 h1 {
 text-shadow: 5px 5px
 5px #FF0000;
 /* bóng ngang - bóng dọc –
 độ mờ - màu */
 }
Bộ chọn thuộc tính
 Định dạng phần tử kiểu text
 input[type="text"] {
 width:150px;
 display:block;
 margin-bottom:10px;
 background-color:yellow;
 }
 Định dạng phần tử kiểu button
 input[type="button"] {
 width:120px;
 margin-left:35px;
 display:block;
 }
 Ẩn phần tử:
  display:none;
 /* Ẩn phần tử nhưng không chiếm 
 không gian */
  visibility:hidden;
 /* Ẩn phần tử nhưng vẫn chiếm 
 không gian */