Thông tin tài liệu
Chương 5: CSS (Casca ing Style Sheets) ể hiện phong cách, trợ giúp HTML trong việc hiển thị, ạng mẫu trợ giúp trình bày trong các ứng dụng văn bản bàn (template trong MSWWord). ột mở rộng của Web và là một trong những hy vọng lớn để thực hiện tưởng tách web thành hai phần: trình bày và nội dung. chất, CSS là một tập hợp các quy tắc định dạng được định nghĩa cho n đi kèm với việc một nội dung được định dạng iều này giải nghĩa cho từ "cascading". d 5.1 Khái quát - CSS là ngôn ngữ th tương tự như các định d của máy để - CSS là m ý -Về thực các thẻ c ủa HTML. CSS luô theo thẻ (HTML, XML, .) - đ Hình5.1: Vị trí của CSS trên WEB-Internet anguage XLS-FO: Formatting Objects SS được gắn cùng trang web (HTML) theo các cách sau: XLS-T: Transformation L C 72 Giáo trình đào tạo Xây dựng và quản trị Website, Portal Trung tâm Điện toán Truyền số liệu KV1 Gọi từ một tập tin ngoài (external): HEET HREF="style.css" TYPE="text/css"> úng vào trang HTML: TYPE="text/css"> !-- dent: 10pt} E="text-indent: 10pt">Indented paragraph</P> ếp (import): ss"> import url(http://www.and.so.on.partial1.css); .and.so.on.partial2.css); ate): LINK REL=Stylesheet HREF="style.css" TYPE="text/css"> EL=Stylesheet HREF="style2.css" TYPE="text/css" TITLE="Loai "> EL=Stylesheet HREF="style3.css" TYPE="text/css" TITLE="Loai K REL="Alternate Stylesheet" HREF="style3.css" TYPE="text/css" LE="Man hinh" MEDIA=screen> HREF="style4.css" TYPE="text/css" IA=print> uật CSS (những kỹ thuật thông dụng) ndent: 10pt} - CSS r le (ruleset) - CSS selector de aration <LINK REL=STYLES Được nh <STYLE < P {text-in --> </STYLE> Được định nghĩa cùng thẻ (inline): <P STYL Được gọi gián ti <STYLE TYPE="text=c <!-- @ @import url(http://www --> </STYLE> Được gọi thay thế (Altern < <LINK R # <LINK R ##"> Hoặc: <LIN TIT <LINK REL="Alternate Stylesheet" E="In" MEDTITL 5.2 Kỹ th Quy tắc dùng trong CSS: P {text-i u P {text-indent: 10pt} - CSS cl 73 Giáo trình đào tạo Xây dựng và quản trị Website, Portal Trung tâm Điện toán Truyền số liệu KV1 text-indent - CSS property S value g CSS CLASS: là một dạng selector đặc biệt, là tập hợp nhiều định nghĩa CSS và n cho bất kỳ một thẻ HTML nào. Khi dùng thì mới có tác dụng lên thẻ L nào gọi đến nó. /* class as selector */ footnote/>This element is associated with the CLASS DDRESS> And so is this</P> : E {color: red} dụng cho phần văn bản được lồng trong 3 thẻ HTML theo thứ tự ả hiệu: (pseudo-element) hỉ có 2 phần tử giả hiệu, dùng cho các thẻ hiển thị khối, dòng (block, p, .) giả hiệu: lớp giả iệu: lo : white} col r: red} ackground: transparent; color: black} một văn bản có cấu trúc, được bắt đầu từ thẻ <HTML> rồi đến thẻ và sau đó là các thẻ như <Hn>, <P>, . của các thẻ bậc dưới được kế thừa thuộc tính của các ắc, font chữ, cách lề, . cũng thực hiện việc kế thừa thuộc tính. Ví dụ như: t} 10pt - CS Cách dùn CLASS hông gák HTM .footnote {font: 70%} <ADDRESS CLASS= footnote</A <P CLASS=footnote> Cách dùng ngữ cảnh TD P COD Chỉ có tác trên. tử giPhần C first-line first-letter CLASS Chỉ có 1 thẻ A là có các h A:link {background: black; co r A:active {background; black: A:visited {b o Tính kế thừa: HTML là <BODY> Như vậy, các thuộc tính thẻ bậc trên, như màu s Tươ ng tự như vậy, CSS BODY {font-size: 10p H1 {font-size: 180%} Có nghĩa là: 74 Giáo trình đào tạo Xây dựng và quản trị Website, Portal Trung tâm Điện toán Truyền số liệu KV1 Toàn bộ font chữ được hiển thị trong văn bản với độ lớn là 10pt, riêng đối với bản trong thẻ H1 sẽ được hiển thị với độ lớn hơn 1.8 lần (hay là nh đều được kế thừa, ví dụ như thuộc tính background. t số thuộc tính hay dùng trong CSS (cùng thẻ HTML) phần văn 18pt). Không phải mọi thuộc tí 5. 3 Mộ Thuộc tính Mục đích Giá trị (nên dùng) Thừa kế Định dạng chữ Color dùng để định nghĩa màu chữ hiển thị #rrggbb có font-weight chỉ định kiểu chữ hiển thị (đậm, béo, .) Bold lighter normal có font-family chỉ định font chữ .VnTime .VnArial có font-size kích cỡ chữ 12pt 15px có font-style kiểu hiển thị Italic normal có text-decoration trang trí chữ None underline overline line-through có Dàn chữ line-height chỉ định độ cao dòng %(font chữ) có vertical-align chỉnh theo chiều dọc Top bottom middle sub super baseline có 75 Giáo trình đào tạo Xây dựng và quản trị Website, Portal Trung tâm Điện toán Truyền số liệu KV1 Thuộc tính Mục đích Giá trị (nên dùng) Thừa kế Text-indent điều chỉnh dòng đầu tiên của khối văn bản px, pt, % có Tex heo chiều ngang Left right justify center có t-align dàn t Nền background-color chỉ định màu nền #rrggbb background-image chỉ định ảnh nền url() Lề margin-top, argin-left, ottom, chỉ định việc cách lề px, pt có m margin-b margin-right, margin Dàn trang list-style-type kiểu dành cho thẻ UL, OL None disc circle re decimal lower-roman upper-roman lower-alpha upper-alpha có squa list-style-image ảnh thay cho bullet url() có list-style kiểu vắn tắt Tóm tắt chương Chương này giúp bạn có đư rang web hấp d ợc khả năng phong phú trong việc trang trí, tạo các ẫn hơn. Bạn có thể sử dụng CSS để tạo thành tập hợp các định bsite điều đó sẽ tiện lợi hơn nhiều trong việc soạn thảo, t dạng riêng cho cả we 76 Giáo trình đào tạo Xây dựng và quản trị Website, Portal Trung tâm Điện toán Truyền số liệu KV1 sửa đổi định dạng trang cũng như làm trang web đó có cấu trúc đồng nhất và huyên nghiệp hơn. nền của trang Web) u Background ht <he pe="text/css"> ckground-color: ound-color: /h1> p> c Bài tập I. Background ( 1 < . Đặt mà ml> d> a <style ty ody {bab yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {backgr rgb(250,0,255)} </style> </head> <body> <h1>This is header 1< <h2>This is header 2</h2> p>This is a paragraph</< </body> /html> < 2. Đặt background là một ảnh có sẵn 77 Giáo trình đào tạo Xây dựng và quản trị Website, Portal Trung tâm Điện toán Truyền số liệu KV1 <html> <head> style type="text/css"> d-image: ges/bgdesert.jpg") body> < body { backgroun url("/ima } </style> </head> < </body> </html> 78 Giáo trình đào tạo Xây dựng và quản trị Website, Portal Trung tâm Điện toán Truyền số liệu KV1 3. Đặt ảnh nền cố định (ảnh nền không cuộn theo trang web) html> ody rl("/images/smiley.gif"); : ackground-attachment: /style> <body> <br :</b> etscape 4 does not support he " ot scroll /p> scroll e</p> t scroll est of the page</p> p>The image will not scroll est of the page</p> p>The image will not scroll rest of the page</p> he image will not scroll > t scroll /p> ll age</p> ill not scroll ith the rest of the page</p> l> Ảnh 1 (ảnh nền ở vị trí cố định, trên cùng): < <head> <style type="text/css"> b { background-image: u background-repeat no-repeat; b fixed } < </head> Ảnh 2 (ảnh nền vẫn ở vị trí cũ, khi cuộn web): ><br> <p> <b>Note N t "background-attachment property. </p> <p>The image will n with the rest of the page< <p>The image will not with the rest of the pag <p>The image will no with the r < with the r < with the <p>T with the rest of the page</p <p>The image will no with the rest of the page< <p>The image will not scro with the rest of the p <p>The image w w </body> </htm 79 Giáo trình đào tạo Xây dựng và quản trị Website, Portal Trung tâm Điện toán Truyền số liệu KV1 4. Định nghĩa tất cả các thuộc tính của background trong một khai báo type="text/css"> ody iley.gif") enter center /head> p>This is some text</p> <p> is some text</p> is some text</p> p>This is some text</p> > s is some text</p> t</p> > is some text</p> t</p> some text</p> is some text</p> t</p> xt</p> is some text</p> t</p> ext</p> text</p> is some text</p> p>This is some text</p> /html> <html> <head> <style b { background: #00ff00 url("/images/sm no-repeat fixed c } </style> < <body> < This is some text</p> <p>This <p>This < <p>This is some text</p <p>Thi <p>This is some tex <p>This is some text</p <p>This <p>This is some tex <p>This is some text</p> <p>This is <p>This <p>This is some tex <p>This is some text</p> <p>This is some te <p>This <p>This is some tex <p>This is some text</p> <p>This is some t <p>This is some <p>This < </body> < II. Các định dạng cho chữ v 1. Định nghĩa màu ch à ký tự o chữ 80 Giáo trình đào tạo Xây dựng và quản trị Website, Portal Trung tâm Điện toán Truyền số liệu KV1 <html> <head> <style type="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} body> >This is header 1</h1> /p> </style> </head> < <h1 <h2>This is header 2</h2> <p>This is a paragraph< </body> </html> 2. Định khoảng cách giữa <html> <head> các ký tự -spacing: -3px} -spacing: 0.5cm} tscape 4 does tter-spacing" perty. /h1> his is header 4</h4> <style type="text/css"> h1 {letter h4 {letter </style> </h ead> <body> <p> <b>Note:</b> Ne not support the "le pro </p> <h1>This is header 1< <h4>T </body> </html> 3. Căn l html> ề đoạn văn bản t/css"> < <head> <style type="tex 81 Giáo trình đào tạo Xây dựng và quản trị Website, Portal Trung tâm Điện toán Truyền số liệu KV1 [...]... h1 {font -style: italic} h2 {font -style: normal} p {font -style: oblique} < /style> This is header 1 This is header 2 This is a paragraph 4 Sử dụng nhiều kiểu chữ trong cùng một đoạn văn bản p.normal {font-variant: normal} p.small {font-variant: small-caps} < /style> ... lập các đường viền khác nhau trên các trang web p.soliddouble {borderstyle: solid double} p.doublesolid {borderstyle: double solid} p.groovedouble {borderstyle: groove double} p.three {border -style: solid double groove} < /style> Note: Netscape 4 does not support the "border -style" property Use the "border" property to set the borders in... p.one {border -style: solid; border-width: 5px} p.two {border -style: solid; border-width: 5px 10px} p.three {border -style: solid; border-width: 5px 10px 1px} p.four { border -style: solid; border-width: 5px 10px 1px medium } < /style> The "border-width" property is not recognized in Internet Explorer if it is used alone Use the "border -style" ... dựng và quản trị Website, Portal 2 Thiết lập danh sách với chỉ số thứ tự ol.decimal {list -style- type: decimal} ol.lroman {list -style- type: lower-roman} ol.uroman {list -style- type: upper-roman} ol.lalpha {list -style- type: lower-alpha} ol.ualpha {list -style- type: upper-alpha} < /style> Coffee Tea Coca Cola... 12px arial } < /style> Trung tâm Điện toán Truyền số liệu KV1 86 Giáo trình đào tạo Xây dựng và quản trị Website, Portal This is a paragraph IV Đường viền - Border 1 Thiết lập kiểu mẫu của đường viền p.dotted {border -style: dotted} p.dashed {border -style: dashed} p.solid {border -style: solid} p.double {border -style: double}... tạo Xây dựng và quản trị Website, Portal VI Danh sách – List 1 Thiết lập danh sách không đánh số thứ tự ul.disc { list -style- type: disc } ul.circle { list -style- type: circle } ul.square { list -style- type: square } ul.none { list -style- type: none } < /style> Coffee Tea Coca Cola Coffee... 3 Thiết lập màu cho đường viền p.one{ border -style: solid; border-color: #0000ff} p.two{ border -style: solid; border-color: #ff0000 #0000ff} p.three{ border -style: solid; border-color: #ff0000 #00ff00 #0000ff} p.four{ border -style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)} < /style> Note: The "border-color"... tính lề trong một khai báo p.margin {margin: 2cm 4cm 3cm 4cm} < /style> This is a paragraph This is a paragraph with margins This is a paragraph VI Padding 1 Thiết lập padding bên trái của ô td {padding-left: 2cm} < /style> ... lập padding bên phải của ô td {padding-right: 5cm} < /style> This is a tablecell with a right padding This is a tablecell with a right padding 3 Thiết lập padding phía trên của ô td {padding-top: 2cm} < /style> ... h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sansserif} < /style> This is header 3 This is a paragraph This is a paragraph 2 Thiết lập cỡ chữ h1 {font-size: 150%} h2 {font-size: 130%} p {font-size: 100%} < /style> . url(http://www.and.so.on.partial1 .css) ; .and.so.on.partial2 .css) ; ate): LINK REL=Stylesheet HREF=" ;style .css& quot; TYPE="text /css& quot;> EL=Stylesheet HREF=" ;style2 .css& quot;. head> <st {border -style: .dashed {border -style: } yle: le {border -style: .groove {border -style: border -style: dge} r -style: rder -style: /head> p class="dashed">
Ngày đăng: 18/10/2013, 23:20
Xem thêm: CSS (Cascading Style Sheets), CSS (Cascading Style Sheets)
