+44(0) 1234 567 890 info@domainname.com

Thursday, December 30, 2010

Bài 6: Định dang văn bản trong CSS

1:49 AM

Share it Please
Định dạng và thêm vào các kiểu định dạng đặc biệt cho phần nội dung một trang web là một vấn đề quan trọng cho bất cứ nhà thiết kế web nào. Như đã nói, ở bài học này chúng ta sẽ được tìm hiểu về các thuộc tính CSS về định dạng văn bản.
1. Màu chữ (thuộc tính color):
Để định màu chữ cho một thành phần nào đó trên trang web chúng ta sử dụng thuộc tính color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ. Ví dụ sau chúng ta sẽ viết CSS để định màu chữ chung cho một trang web là đen, cho tiêu đề h1 màu xanh da trời, cho tiêu đề h2 màu xanh lá chúng ta sẽ làm như sau:

body {
color:#000
}
h1 {
color:#0000FF
}
h2 {
color:#00FF00
}

2. Thuộc tính text-indent :
Thuộc tính text-indent cung cấp 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. Giá trị thuộc tính này là các đơn vị đo cơ bản dùng trong CSS. Trong ví dụ sau chúng ta sẽ định dạng thụt đầu dòng một khoảng 30px cho dòng văn bản đầu tiên trong mỗi đoạn văn bản đối với các thành phần



p {
text-indent:30px
}

3. Thuộc tính text-align :
Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bản cho các thành phần trong trang web.
Cũng tương tự như các lựa chọn canh chỉnh văn bản trong các trình soạn thảo văn bản thông dụng như MS Word, thuộc tính này có tất cả 4 giá trị : left (canh trái – mặc định), right (canh phải), center (canh giữa) và justify (canh đều).
Trong ví dụ sau chúng ta sẽ thực hiện canh phải các thành phần h1, h2 và canh đều đối với thành phần



h1, h2 {
text-align:right
}
p {
text-align:justify
}

4. Thuộc tính letter-spacing:
Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản.
Muốn định khoảng cách giữa các ký tự trong thành phần h1, h2 là 7px và thành phần

là 5px chúng ta sẽ viết CSS sau:


h1, h2 {
letter-spacing:7px
}
p { letter-spacing:5px }


5. Thuộc tính text-decoration:
Thuộc tính text-decoration giúp bạn thêm các hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp nháy (blink).
Ví dụ sau chúng ta sẽ định dạng gạch chân cho thành phần h1, gạch đầu thành phần h2

h1 {
text-decoration:underline
}
h2 {
text-decoration:overline
}

6. Thuộc tính text-transform:
Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào văn bản gốc trên HTML.
Thuộc tính này có tất cả 4 giá trị: uppercase (in hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng – mặc định).
Trong ví dụ dưới đây chúng ta sẽ định dạng cho thành phần h1 là in hoa, h2 là in hoa đầu mỗi ký tự.

h1 {
text-transform:uppercase
}
h2 {
text-transform:capitalize
}


Bài học đến đây là kết thúc. Chúc các bạn thành công!

0 comments:

Post a Comment

Tags

Thủ thuật pc Góc Làm Đẹp Làm Đẹp Da Thủ Thuật Blogspot - Wordpress - Joomla Thủ Thuật Network Giải trí Thủ Thuật Hay thu-thuat-blogspot ASP.NET Danh bạ Lập trình CSDL Thủ Thuật Blog Lập trình Thủ thuật Excel Phần Mềm Góc Phụ Nữ SEO TT Windows Lý Thuyết CCNA Dịch Vụ Hot CCNA Sức Khỏe - Đời Sống Office Thủ Thuật Mobile Thủ Thuật Win 8 Download Xây dựng liên kết Android Thủ thuật Word Website thu-thuat-internet Forum PHP Tư Vấn Làm Đẹp Mẹo Vặt tien-ich-widget Đọc báo ASP.NET MVC Ca nhạc Hỏi Đáp Thơ Vui Thủ Thuật Game vui-nhon Download Phần Mềm - Crack VBA Excel thu-thuat-facebook Cuộc sống Download Game Photoshop Thủ thuật Blogspot VBA trong Excel Widget Blogspot Địa Điểm Hot C# CSS Giới Tính Tài Liệu Đại học Chuyện lạ Clip Hài - Video Hot Góc Kỹ Năng Góc Sinh Viên Liên Minh Huyền Thoại Sao Sức Khỏe Giới Tính Thủ Thuật Tin Học template-blogger Chuyện Của Sao Design Pattern Kiến thức cơ bản PM hệ thống Thủ thuật Facebook Tin nổi bật Đề thi LAB CCNA Love story Học và hỏi Môn toán Spring.NET Tủ Sách Video lam-quen-voi-blogger Ảnh Vui Bảng Giá Con trai Cẩm nang du học Dependency Injection Hình ảnh Kinh nghiệm học Kỹ Năng Xin Việc Luật Pháp ORM Tin nóng Tiện ích Truyện cười Việt Nam hinh-anh-hai-huoc tho-vui-con-coc thu-thuat-phan-mem Blogspot Distributed Technologies Hợp Tác Kinh Doanh Khám phá MVP NHibernate Photoshop Action Thủ Thuật Win 7 Trẻ Tư Vấn Tiêu Dùng VietYeah TV Xã Hội thu-thuat-SEO Blogger Templates Game flash Khối B Nghịch Nhân vật Phong Cách Slider Thư giãn Thủ thuật Youtube WCF facebook hinh-anh-dep thu-thuat-may-tinh Đời Sống 2010 Con gái Download Game Mobile Drivers External Post Học Nấu Ăn Học vui Làm Đẹp Tóc MVC N-Tier PM hệ điều hành Sao Quốc tế Thủ thuật internet Thông Tin Tin Tức Hot Tivi Truyện Hay Tuyển Dụng Xả Stress Youtube anh-bia-facebook san-pham-google ung-dung-website Đáp án Đề thi thử AOP Abstract Factory Cool stuffs Design Principles Khối A Thông tin mạng Tình yêu lập trình viên phan-mem-van-phong thu-thuat-windows-7 thu-thuat-windows-8 Điện Tử Ảnh Nghệ Thuật 2009 2011 2012 Adapter Pattern Công Nghệ Factory Method Game Hình sự Khối D Kiếm Tiền Qua Mạng Kỹ Năng Nơi Công Sở LinQ Menu Miễn phí Photoshop PSD Sexy Singleton Sành điệu Thủ Thuật Di Động Tin nhắn SMS phan-mem-do-hoa phan-mem-tien-ich Đọc xong vọc liền .NET Remoting 10-thing series 2013 Ajax Bridge Pattern Bóng đá Castle Windsor Chơi Game Online Cover Facebook Có Thể Bạn Chưa Biết Download Phim Dịch vụ Fedora Garbage Collection Google Plus Góc Tâm Sự HTML Hibernate Hài hước IoC JSF Javascript Jquery Khối C Kỹ Năng Bán Hàng Kỹ Năng Thuyết Trình Lazy Load Linux Lock Log4Net MWC Memory Management Mock Multi-Thread MySQL Môn sử Mặc Đẹp Mẹ Và Bé Mỹ Tâm NUnit Ngọc Trinh Nhịp sống trẻ PM văn phòng POCO Passive View Photoshop tách ảnh Phạm Băng Băng Phầm Mềm Crack PostSharp Primefaces Shop Bít Tuốt Strategy Pattern Supervising Controller Sự kiện Thể thao Thủ Thuật Office Tin đặc biệt Toán Tình bạn Tình dục Tốt nghiệp Unit Testing VBA Word Virtual Server Văn WMC 2012 Windows Service acc fshare acc mien phi anh-nghe-thuat cntt di dong di động dropbox dung luong dropbox fshare hinh nen hinh nen dep hình nền job mac os mang xa hoi may ao mạng xã hội social tang dung luong dropbox thu-thuat-mobile thu-thuat-windows-xp tháng 2 top truyen-cuoi tăng dung lượng dropbox vmware Ảnh đẹp