Tìm hiểu về CSS

 tiên trong CSS Thuộc tính thay đổi đọ ưu tiên: !important Cú pháp: selector{ property :value !important} Ví dụ: p{width :500px ; text-align:left !important; color:#333 !important} Nếu cùng ,một thuộc tính cho một selector mà cả 2 thuộc tính cùng đặt !important thì ưu tiên cho cái sau. 	 Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * Tìm hiểu cú phấp cơ bản CSS 	Cú pháp CSS cơ bản: 	Selector { property : value;} Selector : các đối tượng mà ta sẽ áp dụng các thuộc tính trình bày.Nó là các tag HTML,class hay id.ví dụ: body,h2,h3,p,img,#title,… Ví dụ: HTML : 	 	 CSS: 	 input [name=“seach”] 	Ví dụ: Để làm cho tất cả các chử có trên trang web đều màu đỏ. 	CSS: *{color : red} 	Trong class thẻ img và “a” đều có cùng tên visitors nhưng đây là 2 đối tượng khác nhau .ta muốn dùng CSS riêng cho phần ảnh thì dùng như sau: 	img.visitors {width:50} Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	Tìm hiểu cú phấp cơ bản CSS Property: là thuộc tính quy định cách trình bày. 	Ví dụ: background-color,font-family,color,padding,margin,… 	Nếu có nhiều hơn 1 thuộc tính trong 1 selecter thì ta dung dấu “;” để phân cách và được đặt trong dấu ngoặc nhọn sau selecter. Ví dụ: 	body{background-color:#FFF;font-size:14px} Đối 1 trang web có nhiều thành phần có cùng một só thuộc tính ta có thể gom gọn lại như sau: 	h1{color:#0000FF;text-transform:uppercase}	/*transform: chế độ in hoa ,in thường 	uppercase: in hoa*/ 	h2{color:#0000FF;text-transform:uppercase}	 	h3{color:#0000FF;text-transform:uppercase}	 => h1,h2,h3{color:#0000FF;text-transform:uppercase}	 Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * Tìm hiểu cú pháp cơ bản CSS Value: giá trị của thuộc tính 	Ví dụ: h3{color: #0000FF;font-family:”Times New Roman”;} 	Ghi chú trong CSS: /* nội dung chú thích*/ Đơn vị CSS: Đơn vị đo chiều dài. 	 Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * Đơn vị CSS Đơn vị màu sắc: Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	1.Thuộc tính brakground Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 1. Thuộc tính brakground Ví dụ1: body{background-color:cyan} 	body{background-image:url(dinhan.jpg); 	background-repeat:no-repeat;} 	 h1{background-color:red;} Khóa ảnh nền: background-attachment cho phép bạn xát định tính cố định của ảnh nền so với nội dung trang web. + Sroll:ảnh nền sẽ cuộn cùng nội dung ,giá trị mặc định. + fixed: Cố định ảnh nền so với nội dung trang web.(nghĩa là hình nền đứng yên khi bạn đang cuộn trang web.) Định vị ảnh nền:background-position Vd: background-position:5cm2cm(5cm từ trái qua và 2cm từ phải qua) Background-position:bottom left( định vị ở góc trái phía dưới) Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 1. Thuộc tính brakground Thuộc tính background rút gọn Ví dụ: 	 background-color:cyan; 	background-image:url(dinhan.jpg) ; 	background-repeat:no-repeat; 	background-attachment:fixed; 	background-position:right bottom; background: cyan url(dinhan.jpg) no-repeat fixed right bottom; Cấu trúc khái quát rút gọn cho nhóm background. background:|| ||background-position> Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 2. Thuộc tính font Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	2.Thuộc tính font Ví dụ: body{ font-family:”Times New Roman”,Tohana,San-serif} 	 	h1{	font-style: italic; 	font-variant: small-caps; /*chử in hoa kích cở nhỏ hơn in hoa chuẩn*/ 	font-weight: bold; 	font-size:35px; 	font-family: arial,verdana,sans-serif; 	 } Hay : h1 { font: italic bold 35px arial,verdana,sans-serif } Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	3.Thuộc tính text Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	3.Thuộc tính text Ví du1: 	text-transform: none; 	text-transform: uppercase; /*in hoa*/ 	text-transform: lowercase; /*in thường*/ 	text-transform: capitalize; 	text-transform: inherit; /*kế thừa*/ Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	3.Thuộc tính text Ví du2: 	body{color:#000} 	h1{color:#0000FF}/*xanh da trời*/ 	h2{color:#00FF00}/*xanh lá*/ 	p{text-indent:30px}/*thụt đầu dòng cho dong đầu tiên trong văn bản*/ 	h1,h2{text-align:right} 	p{text-align:justify}/*canh đều*/ 	h1,h2{letter-spacing:7px} 	h1{text-decoration:blink}/*hiệu ứng nhấp nháy*/ 	h1{text-transform:capitalize}/*in hoa ở kí tự đầu tiên trong mỗi từ*/ Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	4.Thuộc tính pseudo-classes for links Cho phép bạn xác định hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định . 	 Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 4.Thuộc tính pseudo-classes for links Ví dụ: 	a:link{color:#00FF00} 	a:hover{color:#FF00FF} 	a:visited{color:#FF0000} 	a:active{color:#662d91} Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	5.Class & ID Nhóm các phần tử trong class: Dùng để nhóm một số thành phần nào đó để áp dụng 1 thuộc tính đặc biệt. Ví dụ: Tạo 2 nhóm các tỉnh có màu xanh da trời và thành phố có màu đỏ.trong HTML như sau: 	 Danh sách các tỉnh ,thành phố của Việt Nam 	 	 Hà Nội 	 TP.HCM 	 Đà Nẵng 	 Bình Đinh 	 Khánh Hòa 	 Thừa Thiên Huế 	 	Trong CSS như sau: 	li.tp{color:FF0000} 	li.tinh{color:0000FF} Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	5.Class & ID Nhận dạng với phần tử ID: Ví dụ: trong HTML Danh sách các tỉnh ,thành phố của Việt Nam 	 	 Hà Nội 	 TP.HCM 	 Bình Đinh 	 Khánh Hòa 	 Trong CSS: 	 #hanoi{color: cyan} 	#hcm{color:##662d91} 	.tinh{color:#00FF00} Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	5.Class & ID Class : dùng để nhóm các đối tượng cùng thuộc tính, do tính chất đó nên nó có thể được sử dụng nhiều lần. ID: dùng để nhận dạng một đối tượng đặc trưng ,id có tính duy nhất. Lưu ý: không nên đặt tên id,class là các chử số cho kí tự đầu .Nó sẽ không làm việc với firefox. Vi dụ: ha noi Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 6.Span và div trong HTML Nhóm phần tử với thẻ : Thẻ trung hòa không thêm hay bớt bất cứ thứ gì trong html. Mà nó là công cụ đánh dấu để qua đó ta viết CSS định dạng cho phần tử mong muốn. Ví du: Trong html: khong co gi quy hon doc lap, tu do Trong CSS: 	 .nhanmanh{font-style:italic ; font-weight:bold ; font-size: 40px;} Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 6.Span và div trong HTML Nhóm khối phần tử với thẻ : 	Giống như nhưng dùng để nhóm một hay nhiều khối phần tử. Ví dụ: trong html: 	 Danh sách các tỉnh ,thành phố của Việt Nam 	 	 	 	 	 	 	 	 Trong CSS: #tp{color:FF0000} Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	7.Thuộc tính border Là thành phần quan trọng trong một trang web.nó dùng trang trí ,đóng khung cho một đối tượng cần nhấn mạnh ,phân cách các đối tượng giúp trang web trông dễ nhìn hơn,…. Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	7.Thuộc tính border Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	7.Thuộc tính border Ví dụ: 	h1{border-width:thin; border-color:#ff0000; border-style:solid} 	p{border-width:5px; border-color:#ff00ff; border-style:double} 	h1{border-top-width: medium; 	 border-top-color:#ff0000;border-top-style:dotted} Css cung cấp các kiểu viền như sau: Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	8.Thuộc tính margin Dùng để canh lề cho trang web hay một thành phần web này với thành phần web khác hay viền trang. Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	8.Thuộc tính margin Ví dụ: Cách canh lề cho trang web. 	body { margin-top:80px; 	margin-bottom:40px; 	margin-left:50px; 	margin-right:30px; 	border:1px dotted #ff0000} Hay : 	body{margin:80px 30px 40px 50px boder:1px dotted#ff0000} Cấu trúc rút gọn: Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	9.Thuộc tính padding Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	9.Thuộc tính padding Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	10.Box Model Mô tả cách mà css định dạng khối không gian bao quanh một thành phần. Mô hình hộp của đối tượng web cụ thể: Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	10.Box Model Ví dụ: 	 p { width:200px; 	 margin:30px 20px; 	 padding:20px 10px; 	 border:1px solid #000 text-align:justify 	} Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 11.Height & width Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	11.Height & width Ví du: 	p {width: 700px} 	p{height: 300px} Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	12.Float và clear Float (theo như nghĩa tiếng Việt là thả trôi) là một thuộc tính CSS dùng để cố định một  thành  phần  web  về bên  trái  hay  bên  phải không gian bao quanh nó. Thuộc tính float có 3 giá trị:+ Left: Cố định phần tử về bên trái.+ Right: Cố định phần tử về bên phải.+ None: Bình thường. Clear : Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	13.Thuộc tính layout Position Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	13.Thuộc tính layout Position Ví dụ: giá trị absolute 	#hinh1{ 	position: absolute; 	top:50px; 	left:20px 	} 	#hinh2{ 	position: absolute; 	top:0px; 	right:0px 	} 	#hinh3{ 	position: absolute; 	bottom:0px; 	left:0px 	} 	#hinh4{ 	position: absolute; 	bottom:20px; 	right:50px 	} Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	13.Thuộc tính layout Position Ví dụ:	#hinh1{ 	position: relative; 	top:50px; 	left:20px 	} 	#hinh2{ 	position: relative; 	top:0px; 	right:0px 	} 	#hinh3{ 	position: relative; 	bottom:0px; 	left:0px 	} 	#hinh4{ 	position: relative; 	bottom:20px; 	right:50px 	} Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	14.Layers Cách đặt các thành phần web ở các lớp khác nhau. Hay nói dễ hiểu làc ách đặt một thành phần này lên một thành phần khác thông qua thuộc tính z-index. Với mục đíc này, ta gán cho mỗi phần tử một con số. Phần tử có số cao hơn sẽ nằm trên. Ví dụ: 	#hinh1{ 	position: absolute; 	top:50px; 	left:70px; 	Z-index:1 	} 	#hinh2{ 	position: absolute; 	top:140px; 	left:100px; 	z-index:2 	} Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	15. List type Ví dụ: 	list-style-type: square;	 /*list-style:none;*/ 	 list-style-position: inside; 	list-style-image: url(image.gif); Viết gon : 	list-style: square inside url(image.gif); Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	16.Thuộc tính clip Ví dụ ta có code bên dưới:    img {      clip:rect(50px 218px 155px 82px);    }   Với code này, ảnh sẽ được clip phía trên 50px, bottom là 218px (tính từ trên xuống), right là 155px (tính từ trái qua), left là 82px (cũng tính từ trái qua). xem ví dụ bên dưới để rõ: Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * 	16.Thuộc tính clip Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 * Tìm hiếu CSS -Thực hiện :Nhóm 4 k2.101 *