Categories
Chia sẻ

Học CSS – Các thuộc tính CSS và cách sử dụng (Phần 2)

Tiếp theo bài Học CSS – Các thuộc tính CSS và cách sử dụng (Phần 1)

VII. Float & Clear

1. Float

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ó.

Đây là một thuộc tính rất cần  thiết  khi  dàn  trang (như tạo các trang web 2 column layout hay 3 column  layout),  hiển  thị văn bản thành cột (giống như kiểu Format > Columns trong MS Word vậy), hay thực hiện việc định vị trí ảnh và text (như một số kiểu text wrapping của MS Word). Để rõ hơn chúng ta hãy xem hình minh họa sau về cơ chế hoạt động của float:

float

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.

Nhìn vào hình minh họa trên chúng ta thấy là ban đầu trong box lớn có hai thành phần là Box B và phần Content. Lúc đầu Box B nằm bên trên và Content nằm bên dưới, nhưng khi chúng ta đặt thuộc tính float cho Box B thì Box B bị cố định về bên trái và chừa lại khoảng trống bên trái nó. Còn phần Content thì vốn nằm bên

dưới sẽ tự động tràn lên để lắp đầy khoảng trống do Box B tạo ra. Ở ví dụ sau, chúng ta sẽ thực hiện float ảnh logo sang trái để phần nội dung bên dưới tràn lên nằm cạnh logo.

#logo {

float:left;

}

Một ví dụ khác là chúng ta sẽ thử dùng float để chia 2 cột văn bản.

.column1, .column2 {

width:45%;

float:left;

text-align:justify;

padding:0 20px;

}

.column1 {

border-right:1px solid #000

}

2. Clear

Đi cùng với thuộc tính float, trong CSS còn có một thuộc tính là clear. Thuộc tính clear là một thuộc tính thường được gán vào các phần tử liên quan tới phần tử đã được float để quyết định hướng xử sự của phần tử này.

Ở ví dụ trên, khi chúng ta float tấm ảnh qua trái thì mặc nhiên văn bản sẽ được tràn lên để lắp vào chỗ trống. Nhưng khi chúng ta đặt vào văn bản thuộc tính clear thì chúng ta có quyền quyết định xem phần văn bản đó có được tràn lên hay không. Thuộc tính  clear  có tất  cả 4 thuộc tính: left  (tràn  bên trái),  right  (tràn bên  phải), both (không tràn) và none.

Thử dùng thuộc tính clear với các giá trị khác nhau đối với đoạn văn bản trong ví dụ float ảnh logo ở trên.

 

VIII. Position

Kết hợp với thuộc tính float đã học, thuộc tính position mang lại nhiều khả năng để

tạo một cách trình bày tiên tiến và chính xác cho trang web.

Nguyên lý hoạt động của position:

Hãy  tưởng  tượng  cửa  sổ  trình  duyệt  của  bạn  giống  như  một  hệ  tọa  độ  và  với position bạn có thể đặt một đối tượng web ở bất cứ vị trí nào trên hệ tọa độ này.

position

 

Giả sử chúng ta muốn định vị một ảnh ở vị trí 70px cách đỉnh và 90px từ bên trái

tài liệu, chúng ta sẽ viết CSS như sau:

img { position:absolute; top:70px; left:90px }

1. Absolute position

Định vị tuyệt đối là sự định vị mà trong đó các thành phần được định vị không để lại bất cứ một khoảng trống nào trong tài liệu. Một thành phần được định vị tuyệt đối sẽ nhận giá trị position là absolute. Các đối tượng đã định vị tuyệt đối sẽ dùng kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ.

Ví  dụ sau  sẽ  chỉ  cho  chúng ta cách đặt  bốn  ảnh ở bốn góc  tài  liệu  bằng đị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 }

 

2. Relative position

Sự định vị tương đối cho một thành phần là sự định vị được tính từ vị trí gốc trong tài liệu. Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài liệu. Các thành phần được định vị tương đối sẽ nhận giá trị position là relative. Chúng ta hãy làm lại ví dụ trên nhưng thay absolute thành relative. Các bạn ghi nhận  lại  vị  trí  4  ảnh  logo  lúc  áp  dụng  thuộc  tính  position là none, absolute và relative rồi rút ra nhận xét.

Đọc phần trên  trên, bạn  đã  được  học về 2 thuộc  tính CSS là  float  và position.  Hai thuộc tính này mang lại cho bạn nhiều sự lựa chọn hơn trong việc dàn trang. Nó chính xác và dễ thực hiện hơn so với các phương pháp dùng bảng hay ảnh trong suốt.

 

IX. Layers

CSS hoạt động trên cả 3 chiều: cao, rộng, sâu. Hai chiều đầu tiên, chúng ta đã được nhìn thấy trong các bài học trước. Trong bài học này, chúng ta sẽ được học về cách đặt các thành phần web ở các lớp khác nhau với thuộc tính z-index. Nói đơn giản hơn thì đó là cách bạn đặt một thành phần này lên trên một thành phần khác.

Với mục đích này, bạn sẽ gán cho mỗi phần tử một con số. Theo đó, phần tử có số cao hơn sẽ nằm trên, phần tử có số thấp hơn sẽ nằm dưới.

Ví dụ sau chúng ta sẽ đặt 5 bức ảnh logo ở 5 lớp.

#logo1 {

position:absolute;

top:70px;

left:50px;

z-index:1

}

#logo2 {

position:absolute;

top:140px;

left:100px;

z-index:2

}

#logo3 {

position:absolute;

top:210px;

left:150px;

z-index:3

}

#logo4 {

position:absolute;

top:280px;

left:200px;

z-index:4

}

#logo5 {

position:absolute;

top:350px;

left:250px;

z-index:5

}

 

Categories
Chia sẻ

Học CSS – Các thuộc tính CSS và cách sử dụng (Phần 1)

Yêu cầu: Khuyên dùng chrome, firefox để làm việc. Một số add on cài cho firefox hỗ trợ rất tốt cho thiết kế và lập trình web:

  • Fire Bug: Bug code trực tiếp, sửa html, css trực tiếp, show console, net…
  • MeasureIT: Đo kích thước phần tử trên web
  • Color Zilla: Lấy mã màu trực tiếp trên web

I. Css là gì ?

  • CSS là chữ viết tắt của Cascading Style Sheets (tờ mẫu theo Style Sheets).
  • Là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…
  • Một file css phải có phần mở rộng là .css

Nói 1 cách đơn giản css là ngôn ngữ biểu diễn giao diện của web, một tài liệu html như ví dụ ở bài trước rất lộn xộn và không giống 1 website bạn hay nhìn thầy lắm thì qua sự giúp đỡ của css nó sẽ có giao diện trông đẹp hơn …

II. Một số quy ước và cách sử dụng css

1. Cú pháp CSS cơ bản

  • Cú pháp:
Đối tượng {
 thuộc tính: giá trị;
}

 

Ví dụ:

body {
background: red;
color: black;
}

Giải thích ví dụ trên : qua đoạn mã trên, phần body của trang web sẽ có màu nền(background) là màu đỏ, màu chữ(color) mặc định trên toàn bộ trên trang sẽ là màu đen

  • Đối tượng: Nó là các thẻ HTML, class hay id (chúng ta sẽ học về 2 thành phần này ở phần sau, tý nữa thôi :D).

Ví dụ: body, h2, p, img, #title, #content, .username,…

  • Thuộc tính: Chính là các thuộc tính quy định cách trình bày. Ví dụ: background-color, font-family, color, padding, margin,…
  • Chú thích trong css: /* Nội dung đoạn chú thích */

Ví dụ:

/* Màu chữ cho trang web */
body {
  color:red
}

2. Đơn vị trong css

  • Chiều dài: %, in(inch), cm, mm, em, pt, px, pc …Thường xuyên dùng các đơn vị

+)   % (phần trăm kích thước phần tử)

+)   px (điểm ảnh trên màn hình)

+)   em (1 em tương đương kích thước font  hiện  hành,  nếu  font  hiện hành có kích cỡ 14px thì 1 em = 14 px.)

  • Màu sắc:

+)   Color-name (tên tiếng anh của màu, ví dụ: red, blue, green, black, white, …)

+)   RGB (r,g,b) (Màu RGB với 3 giá trị R, G, B có trị từ 0 – 255 kết hợp với nhau tạo ra vô số màu.)

+)   RGB (%r,%g,%b) (Màu RGB với 3 giá trị R, G, B có trị từ 0 – 100% kết hợp.)

+)   Hexadecimal RGB (Mã  màu  RGB  dạng  hệ  thập  lục.  Ví  dụ:  #FFFFFF: trắng, #000000: đen, #FF00FF: đỏ tươi.)

 

3. Vị trí đặt css (có 3 cách)

  • Cách 1: Trong thẻ (kiểu thuộc tính)

Cách này ít sử dụng, chỉ sử dụng trong 1 số trường hợp đặc biệt, độ ưu tiên của các câu lệnh sử dụng cách này là cao nhất (nếu trùng câu lệnh với 2 cách sau thì câu lệnh ở cách này sẽ thắng)

Ví dụ: (các bạn nên làm luôn ví dụ cho dễ hiểu nhé)

<html>
<head>
<title>Ví dụ</title>
</head>
<body style="background-color:#00ffff;">
<p style="color:red; font-size:72px;">^_^ Css đơn giản vãi ^_^</p>
</body>
</html>
  • Cách 2: Trong thẻ <style>

Cách này cũng không được sử dụng nhiều, thường sử dụng cho những trang đơn có đặc tính riêng, độ ưu tiên của câu lệnh trong cách này thấp hơn cách thứ nhất.

Ví dụ: Giống như ví dụ trên nhưng ta đặt trong thẻ style trên head

<html>
<head>
<title>Ví dụ</title>
<style type="text/css">
body { background-color:#00ffff;}
p { color:red; font-size: 72px;}
</style>
</head>
<body>
<p>^_^ Css đơn giản vãi ^_^</p>
</body>
</html>
  • Cách 3: Bên ngoài

Cách này hay được sử dụng và khuyến khích sử dụng cách này. Độ ưu tiên của câu lệnh thấp nhất trong 3 cách.

Bạn sẽ tạo 1 file css riêng, rồi trên file html của bạn sẽ có link dẫn đến file css đó.

Ví dụ: Bạn tạo 1 file test.html và 1 file style.css ở cùng 1 thư mục code 2 file đó như sau

<html>
<head>
<title>Ví dụ</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>^_^ Css quá đơn giản haha ^_^</p>
</body>
</html>

File style.css với nội dung:

body { background-color:#00ffff;}
p { color:red; font-size: 72px;}

Dòng <link rel=”stylesheet” type=”text/css” href=”style.css” /> trong file html có nhiệu vụ dẫn lệnh từ file css cho tài liệu html đó

Chú ý:

+)   Để lưu 1 file với 1 đuôi khác .txt trong Notepad chúng ta chọn Save as type

là All Files. Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng

Việt.

+)   Ngoài cách tạo file bằng cách save theo language của notepad ++ bạn có thể làm theo cách: chuột phải > new > text document > đổi tên mặc định New Text Document.txt thành style.css tuy nhiên máy tính của bạn phải để folder option ở dạng Show extentions file name

+) Độ ưu tiên:  thuộc tính có lệnh !important sau giá trị (ví dụ: color: red !important;) > cách 1 (trong thẻ) > cách 2 (trong file) > cách 3 ngoài file >  css mặc định của trình duyệt. Ngoài ra khi cùng loại thì, thuộc tính viết sau được ưu tiên hơn

 

III. Class và Id

Khi áp dụng một thuộc tính CSS cho một thành phần nào đó ví dụ như h1, h2, p, a, img,… thì toàn bộ các thành phần này trong trang web đều nhận thuộc tính này. Vậy có các nào để nhóm lại một số thành phần nào đó để áp dụng một thuộc tính đặc biệt. Ví dụ như bạn muốn các liên kết trên menu (thẻ a) trang web sẽ được in hoa, và có kích cỡ lớn hơn so với liên kết trong nội dung thì phải làm thế nào? Đây chính là vấn đề mà chúng ta sẽ cùng giải quyết trong phần này.

1. Nhóm phần tử với class

Ví dụ: Cũng với 2 file đã tạo ở phần trước các bạn thay đổi mã html và css lần lượt như sau:

<html>
<head>
   <title>Ví dụ</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Danh sách các quốc gia đang phát triển</h1>
   <ul>
      <li class="chauA">Việt Nam</li>
      <li class="chauA">Malaysia</li>
      <li class="chauA">Indonesia</li>
      <li class="chauPhi">Angola</li>
      <li class="chauPhi">Senegan</li>
      <li class="chauPhi">Bờ Biển Ngà</li>
      <li class="chauMy">Venezuela</li>
      <li class="chauMy">Cu Ba</li>
   </ul>
</body>
</html>

Mã css:

.chauA {
      color: yellow;
}
.chauPhi {
      color: black;
}
.chauMy {
      color: red;
}

 

2. Nhận dạng phần tử với id

Ví dụ: Tiếp tục với 2 file cũ và thay đổi mã:

Mã html:

<html>
<head>
   <title>Ví dụ</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
   <h1>Danh sách các quốc gia đang phát triển</h1>
   <ul>
      <li id="Vietnam" class="chauA">Việt Nam</li>
      <li class="chauA">Malaysia</li>
      <li class="chauA">Indonesia</li>
      <li class="chauPhi">Angola</li>
      <li class="chauPhi">Senegan</li>
      <li class="chauPhi">Bờ Biển Ngà</li>
      <li class="chauMy">Venezuela</li>
      <li class="chauMy">Cu Ba</li>
   </ul>
</body>
</html>

Mã css:

.chauA {
     color: yellow;
}
.chauPhi {
      color: black;
}
.chauMy {
      color: red;
}
#Vietnam {
      font-size: 30px;
      font-weight: bold;
      text-decoration: underline;
}

3. Kết luận

Qua hai ví dụ trên chắc hẳn các bạn đã hiểu đôi chút về id và class, có thể hiểu đơn giản 2 thuộc tính này đều có tác dụng định danh (đặt tên) cho các phần tử. Tuy nhiên chúng khác nhau ở điểm id là tên riêng còn class là tên chung, như ngày xưa các bạn học danh từ riêng vào danh từ chung ở ngữ pháp lớp 1 ý.

  • Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó 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.
  • Tên class và id được sử dụng các ký tự thường, các chữ số, ký tự đặc biệt như +, – , _, … có phân biệt chữ hoa thường, và không được bắt đầu bằng số
  • Một thẻ có thể có nhiều class, đặt ở dạng: class=ten_class_1 ten_class_2 …
  • Trong file css class được gọi bằng dấu chấm (.) còn id được gọi bằng dấu thăng (#)
  • Class và id có thể gọi ra các thành phần con của chúng

Ví dụ:

<ul class="menu">
   <li><a href="home.html">Trang chủ</a></li>
   <li><a href="sanpham.html">Sản phẩm</a></li>
   <li><a href="tintuc.html">Tin tức</a>
       <ul class="menu_con">
          <li><a href="tincongty.html">Tin công ty</a></li>
          <li><a href="tinsanpham.html">Tin sản phẩm</a></li>
       </ul>
   </li>
</ul>

 

Từ ví dụ này css có thể gọi thẻ a bằng cách: .menu li a hoặc .menu > li > a

Ví dụ trên hơi đặc biệt một chút vì mình muốn chỉ ra sự khác nhau của 2 cách gọi thành phần con.

Ở cách thứ nhất không có mũi tên, các thẻ a được gọi là toàn bộ các thẻ nằm trong thẻ ul có class là menu.

Ở cách gọi thứ 2 thẻ a được gọi là thẻ con cấp gần nhất theo đúng thứ tự chỉ dẫn theo mũi tên, tức là trong trường hợp này các thẻ a trong class menu_con không được gọi

IV. Pseudo-class

Css cung cấp các class chung của 1 số thuộc tính cùng kiểu.

Pseudo-class for link (cho liên kết)

  • a:link (Liên kết chưa được thăm)
  • a:hover (Liên kết khi được rê chuột lên)
  • a:visited (Liên kết đã được thăm)
  • a:active (Liên kết đang được kích hoạt)

Ví dụ:

a:link {text-decoration: none;}
a:hover {text-decoration: none;}

Pseudo-class for order element (thứ tự thẻ) khi các thành phần con của 1 thành là giống nhau, ví dụ :

<ul>
    <li class="class1">phần tử thứ nhất</li>
    <li class="class2">phần tử thứ hai</li>
    <li class="class3">phần tử thứ ba</li>
    <li class="class4">phần tử thứ bốn</li>
    <li class="class5">phần tử thứ năm</li>
    <li class="class6">phần tử thứ sáu</li>
</ul>
  • ul li:first-child (gọi đến class1 – thẻ li đầu tiên)
  • ul li:last-child (gọi đến class6 – thẻ li cuối cùng)
  • ul li:nth-child(2n) (gọi đến các thẻ li có thứ tự chẵn, ở đây là class2, class4, class6)

 

V. Thẻ div và thẻ span

1. Nhóm phần tử với thẻ <span>

Thẻ <span> trong HTML thật ra là một thẻ trung hòa, nó không thêm hay bớt bất cứ một thứ gì vào một tài liệu HTML cả. Nhưng chính nhờ tính chất trung hòa này mà nó lại là một công cụ đánh dấu tuyệt vời để qua đó chúng ta có thể viết CSS định dạng cho các phần tử mong muốn.

Ví dụ:

<p>Thủ đô của nước <span class="viethoa">Việt Nam</span> là  <span class= class="viethoa">hà nội</span></p>

Và bây giờ chúng ta có thể viết CSS:

. viethoa { 
     text-transform: uppercase;
}

Khi mở file trên sẽ in ra dòng chữ: “ Thủ đô của nước VIỆT NAM  là HÀ NỘI”

2. Nhóm khối phần tử với thẻ <div>

Cũng  như  <span>,  <div>  cũng  là  một  thẻ  trung  hòa  và  được  thêm  vào  tài  liệu HTML với mục đính nhóm các phần tử lại cho mục đích định dạng bằng CSS. Tuy nhiên, điểm khác biệt là <span> dùng để nhóm một khối phần tử trong khi đó <div> có thể nhóm một hoặc nhiều khối phần tử.

Ví dụ:

<html>
<head>
   <title>Ví dụ</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
   <h1>Danh sách các quốc gia đang phát triển</h1>
   <ul>
      <div id="chauA">
         <li>Việt Nam</li>
         <li>Malaysia</li>
         <li>Indonesia</li>
      </div>
      <div id="chauPhi">
         <li>Angola</li>
         <li>Senegan</li>
         <li>Bờ Biển Ngà</li>
      </div>
      <div id="chauMy">
         <li>Venezuela</li>
         <li>Cu Ba</li>
      </div>
   </ul>
</body>
</html>

Mã css:

#chauA {
      color: yellow;
}
#chauPhi {
      color: black;
}
#chauMy {
      color: red;
}

3. Kết luận

Như vậy id, class, <div>, <span> và lợi ích của nó trong việc nhóm, đánh dấu phần tử để có thể dùng CSS để tạo ra các kiểu trình bày đặc biệt là điều cực kỳ quan trọng trong CSS, các bạn hãy chú ý đến những thành phần này.

 

VI. Các thuộc tính css thông dụng nhất

1. Background (nền)

  • Màu nền

Background-color: giá trị màu;

Ví dụ: background-color: #ffd500;

  • Ảnh nền

Background-image: url(đường dẫn ảnh);

Ví dụ: background-image: (anhnen.jpg);

  • Lặp ảnh nền

Background-repeat: từ khóa;

Từ khóa ở đây nhận các giá trị sau:

+ repeat-x: Chỉ lặp lại ảnh theo phương ngang.

+ repeat-y: Chỉ lặp lại ảnh theo phương dọc.

+ repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.

+ no-repeat: Không lặp lại ảnh.

  • Khóa ảnh nền

Background-attachment: từ khóa;

Từ khóa ở đây nhận các giá trị sau:

+ scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.

+ fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh

nền sẽ đứng yên khi bạn đang cuộn trang web.

  • Định vị ảnh nền

Background-position: giá_trị_so_với_left  giá_trị_so_với_top;

Ví dụ:

Background-position:5cm 2cm; –  Ảnh  được  định  vị  5cm  từ  trái  qua  và

2cm từ trên xuống.

Background-position:20% 30% ; – Ảnh  được  định  vị  20%  từ  trái  qua  và

30%  từ trên xuống.

Background-position: left  bottom; –  Ảnh được định vị ở góc trái phía dưới

 

  • Rút gọn thuộc tính background:

Ví dụ: Chúng ta có thể nhóm lại đoạn CSS sau

background-color:transparent;

background-image: url(logo.png);

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

 

thành một dòng ngắn gọn:

background:transparent url(logo.png) no-repeat fixed right bottom;

 

Từ ví dụ trên chúng ta có thể khái quát cấu trúc rút gọn cho nhóm background:

background:<background-color>  |  <background-image>  |  <background-repeat>  |

<background-attachment> | <background-position>

Theo mặc định thì các thuộc tính không được đề cập sẽ nhận các giá trị mặc định.

2. Font (font chữ)

  • Loại font:

font-family: giá trị;

Giá trị ở đây là tên các loại font

Ví dụ:

font-family: tahoma;

hoặc

font-family: tahoma, arial, “Time New Roman”, sans-serif;

Trình duyệt sẽ tự đọc các font và nó sẽ hiển thị font nó có theo độ ưu tiên viết trước là ưu tiên cao nhất.

Chú ý: Đối  với  các  font  có  khoảng  trắng  trong  tên  như  Times  New  Roman  cần được đặt trong dấu ngoặc kép.

  • Kiểu font:

Font-style: từ khóa;

Từ khóa nhận giá trị:

+ normal (thường – mặc định)

+ italic (nghiêng)

+ oblique (xiên)

  • Độ đậm font:

Font-weight: từ khóa;

Từ khóa nhận giá trị:

+ normal (thường)

+ bold (đậm)

  • Chế độ font:

Font-variant: từ khóa;

Từ khóa nhận giá trị:

+ normal (thường – mặc định)

+ small-caps (in hoa nhỏ)

  • Cỡ font:

Font-size: giá trị;

Ví dụ:

font-size:24px;

font-size: 2em;

  • Rút gọn:

Tương tự như các thuộc tính background, chúng ta cũng có thể rút gọn các thuộc

tính font lại thành một thuộc tính đơn như ví dụ sau:

h1 {

         font-style: italic;

         font-variant:small-caps;

         font-weight: bold;

         font-size: 35px;

         font-family: arial,verdana,sans-serif;

     }

 

Thành

h1 {

         font: italic bold 35px arial,verdana,sans-serif;

      }

Cấu trúc rút gọn cho các thuộc tính nhóm font:

Font :<font-style> | < font-variant> | <font-weight> | <font-size> |< font-family>

 

3. Text (chữ)

  • Màu chữ

Color: giá_trị_màu;

Ví dụ:

p {

       color: #5656463;

    }

 

  • text-indent (khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản.)

Ví dụ:

p {

       text-indent:30px

    }

  • Căn lền chữ:

Text-align: từ khóa;

Từ khóa nhận giá trị:

+ left : căn trái

+ right : căn phải

+ center : căn giữa

+ justify : căn đều 2 bên

  • Hiệu ứng gạch chữ:

Text-decoration: từ khóa;

Từ khóa nhận giá trị:

+ underline : gạch chân

+ line-through : gạch xiên

+ overline : gạch đầu

+ blink : chữ nháy

+ none : không hiệu ứng

  • Chế độ hoa thường:

Text-transform: từ khóa;

Từ khóa nhận giá trị:

+ uppercase : in hoa

+ lowercase: in thường

+ capitalize : in hoa ký tự đầu

 

 

4. Height-Width (Kích thước phần tử)

Định dạng kích thước của phẩn tử.

Ví dụ:

div {

      height: 30px;

     width: 50px;

    }

  • Max-height: giá trị chiều cao tối đa của phần tử
  • Min-height: giá trị chiều cao tối thiểu của phần tử
  • Max-width: giá trị chiều rộng tối đa của phần tử
  • Min-width: giá trị chiều rộng tối thiểu của phẩn tử

5. Border (viền)

  • Độ rộng viền:

Border-width: giá trị;

  • Màu viền:

Border-color: giá trị màu;

  • Kiểu viền:

Border-style: từ khóa;

Giá trị từ khóa:

+ solid: kiểu viền liền

+ dotted: kiểu chấm chấm

+ dashed: kiểu gạch gạch

+ double: kiểu viền liền đôi

+ …

  • Ví dụ rút gọn:

div {

      border: 1px solid #fafafa;

}

6. Margin-Padding(căn chỉnh một đối tượng với thành phần khác)

Mô hình hộp (box model) trong css được sử dụng chủ yếu, margin và padding là cách định dạng khối không gian bao quanh 1 thành phần.

  • Margin: có thể hiểu margin là thuộc tính để căn lề đối tượng với thành phần chứa nó

+ margin-top, margin-right, margin-bottom, margin-left: lần lượt là cách so với lề trên, phải, dưới, trái.

+ margin: giá_trị_1 giá_trị_2;

giá_trị_1: cách trên – dưới ; giá_trị_2 : cách trái phải

+ margin: giá_trị;

Giá trị: các 4 chiều

Chú ý: giá trị sẽ ưu tiên cho phía trên và trái khi kích thước không chính xác 100%

  • Padding: vùng đệm trong, toàn bộ phần chứa trong phần tử sẽ cách viền phần tử một khoảng mà giá trị padding định nghĩa

Các thành phần và cách gọi padding giống margin

  • Ví dụ:

Tài liệu html:

<html>

<head>

<title>Ví dụ</title>

<link rel=”stylesheet” type=”text/css” href=”style.css” />

</head>

<body>

<div class=”test”>

<p>Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công nghiệp in ấn từ những năm 1500, khi một họa sĩ vô danh ghép nhiều đoạn văn bản với nhau để tạo thành một bản mẫu văn bản.</p>

</div>

</body>

</html>

File style.css cho tài liệu html trên:

div.test {

      width: 200px;

      border: 1px solid #666;

      margin-top: 100px;

      margin-left: 200px;

      padding: 30px 10px;

}

Trong ví dụ trên, div chứa nội dung của chúng ta sẽ cách lề trên 100px, cách lề trái 200px, đoạn văn nằm trong nó cách viền trên và dưới của nó 30px, cách viền trái và phải 10px.

 

Xem phần 2: Học CSS – Các thuộc tính CSS và cách sử dụng (Phần 2)