Báo cáo Tìm hiểu CSS

BÁO CÁO TÌM HIỂU VỀ CSS Sinh viên: Kim Thị Thúy Lớp: K56A CNTT ĐHSPHN CSS – CASCADING STYLE SHEET CSS là mẫu quy định cách thức thể hiện các thẻ HTML. CSS được đưa vào HTML 4.0 để giải quyết một số vấn đề về trình bày dữ liệu. giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế Web. Sau đây là một số thuộc tính của CSS: Thuộc tính Mô tả Giá trị Background Background - Thuộc tính rút gọn cho tất cả các thuộc tính nền body { background: #00ff00 url('smiley.gif') no-repeat fixed center; } trăm năm trong cõi người ta chữ tài chữ mệnh khéo là gét nhau trải qua một cuộc bể râu những điều trông thấy mà đau đớn lòng lạ gì bỉ sắc tư phong Kết quả: vd1.html Background – color Background – image Background – repeat Background-attachment Background - position Background – color (màu nền) Thuộc tính Background – color giúp định màu nền cho một thành phần trên trang web Ví dụ: body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} Trường ĐHSP Hà Nội Khoa CNTT Lớp K56A Kết quả: tb2.html : có 3giá trị color grb : tạo màu vói chế độ trộn. ví dụ : background-color:rgb(250,10,200); color-hex : màu trong chế độ hex ví dụ: backgroung-color:#000000; color-name: tên màu được chọn ví dụ: background-color: red; Transparent: tạo màu trong suốt Background – image (ảnh nền) Thiết lập ảnh nền cho đối tượng Ví dụ: body { background-image: url('hoa.jpg') } Kết quả: tb3.html url : đường dẫn ảnh none: không có ảnh nền, ảnh mạc định Background – repeat Thiết lập chế độ lặp ảnh nền. Ví dụ: { background-image: url('hoa.jpg'); background-repeat: repeat } body { background-image: url('hoa.jpg'); background-repeat: repeat-y } { background-image: url('hoa.jpg'); background-repeat: repeat-x } body { background-image: url('bgdesert.jpg'); background-repeat: no-repeat } Repeat – x: chỉ lặp lại ảnh nền theo phương ngang. Repeat – y: chỉ lặp lại ảnh nền 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. Background –attachment Là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với nội dung trang web. body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment: fixed } ảnh không cuộn cùng nội dung trang web ảnh không cuộn cùng nội dung trang web ảnh không cuộn cùng nội dung trang web ảnh không cuộn cùng nội dung trang web ảnh không cuộn cùng nội dung trang web ảnh không cuộn cùng nội dung trang web ảnh không cuộn cùng nội dung trang web Kết quả: tb4.html Scroll: ảnh nền sẽ cuộn cùng nội dung trang web, đay là giá trị mạc định. Fixed: Cố định ảnh nền so với nội dung trang web. Background – position Thiết lập vị trí thể hiện ảnh nền body { background-image:url('hongvang.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } Note: For this to work in Mozilla, the background-attachment property must be set to "fixed". body { background-image: url('hoa.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 30% 20%; } Note: For this to work in Mozilla, the background-attachment property must be set to "fixed". Kết quả: tb5.html Top left Top center Top right Center left Center center Center right Bottom left Bottom center Bottom right x%y% xy Font Font Thuộc tính ngắn cho tất cả các thiết lập về font p { font: italic small-caps 900 12px arial } song bat dau tu dau gio bat dau tu dau em cung khong biet nua Kết quả: tb6.html Font – style Font – variant Font – style Thiết lập chế độ in nghiêng, xiên hay bình thường. h1 {font-style: italic} h2 {font-style: normal} p {font-style: oblique} Du doi va diu em on ao va lang le song ko hieu noi minh Kết quả: tb7.html Normal Italic Oblique Font – variant Được dùng để chọn giữa chế độ bình thường và small – caps của một font chữ p.normal {font-variant: normal} p.small {font-variant: small-caps} song bat dau tu gio gio bat dau tu dau Kết quả: tb8.html Normal Small – caps Font – weight Mô tả cách thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold). Ngoài ra, một số trình duyệt cũng hỗ trợ mô tả độ in đậm bằng các con số từ 100-900 p.normal {font-weight: normal} p.thick {font-weight: bold} p.thicker {font-weight: 900} nhung ngay khong gap nhau bien bac dau thuong nho nhung ngay khong gap nhau Kết quả: tb9.html Normal Bold Bolder Lighter 100-900 Font- size Thiết lập kích cỡ font h1 {font-size: 150%} h2 {font-size: 130%} p {font-size: 100%} Nguyễn Thị Lan Anh </h1 Phạm Duy Đông </h2 Kim Thị Thúy </p Kết quả: tb10.html xx-small x- small small medium large x – large xx – large smaller larger % Font – family Thiết lập loại font hiển thị trang web / đối tượng web html> h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans-serif} ngoi sao nho ai ma sao lap lanh ngon lua nho ai ma hong dem lanh anh van yeu em nhu lua du < Kết quả: tb11.html Family – name: tên cụ thể của một font. Ví dụ: Arial, tohama,… Generic – family: tên cảu một họ gồm nhiều font. Ví dụ: sans-serif, serif,… Text Color Thiết lập màu chữ h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} oi con song ngay xua va ngay sau van the song khong hieu noi minh Kết quả: tb12.html color> Text – indent Thiết lập khoảng thụt đầu dòng. p {text-indent: 1cm} Sao anh khong ve choi thon vi Nhin nang hang cau nang moi len Vuon ai muot qua xanh nhu ngoc La truc tre ngang mat chu dien Kết quả: tb13.html % Text – align Thiết lập chế độ căn văn bản h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} nhung ngay khong gap nhau bien bac dau thuong nho longg thuyen dau ran vo/h3> Kết quả: tb14.html Left Right Center Jusstify Letterr – spacing Thiết laapj khoảng cách giữa các ký tự h1 {letter-spacing: -3px} h4 {letter-spacing: 0.5cm} oi con song ngay xua va ngay sau van the Kết quả: tb15.html Normal Text – decoration Thêm hiệu ứng đặc biệt cho văn bản h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration: blink} a {text-decoration: none} du doi va diu em on ao va lang le con song duoi long sau con song tren mat nuoc This is a link Kết quả: tb16.html None Underline Overline Line – through Blink Text – transform Thuộc tính quy định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào bản gốc trên HTML. p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize} truoc muon trung song be em nghi ve anh,em em nghi ve bien lon Kết quả: tb17.html None Upper Lower Capitalizse Border Border Thuộc tính ngắn cho tất cả các thiết lập border cho một thành phần p { border: medium double rgb(250,0,255) } Kim Thuy Kết quả: tb18.html Border – width Borde - color Borde – style Border – width Thiết lập độ rộng đường viền p.one { border-style: solid; border-width: 5px } p.two { border-style: solid; border-width: thick } p.three { border-style: solid; border-width: 5px 10px } p.four { border-style: solid; border-width: 5px 10px 1px } p.five { border-style: solid; border-width: 5px 10px 1px medium } Kim Thuy Kim Thuy Kim Thuy Kim Thuy Kim Thuy Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first. Kết quả: tb19.html Thin Medium Thick Borde - color 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) } song bat dau tu dau gio bat dau tu dau Khi nao ta yeu nhau em cung khong biet nua Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first. Kết quả: tb20.html Borde – style Thiết lập kiểu đường viền p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset} kim thuy kim thuy kim thuy kim thuy kim thuy kim thuy kim thuy kim thuy Kết quả: tb21.html None Hidden Solid Dotted Dashed Double Groove Ridge Inset Outset Border – top – width Thiết lập độ rộng viền phía trên. p.one { border-style: solid; border-top-width: 15px } p.two { border-style: solid; border-top-width: thin } Note: The "border-top-width" property does not work if it is used alone. Use the "border-style" property to set the borders first. Some text. Some more text. Kết quả: tb22.html Border – top – color Thiết lập màu viền phía trên p { border-style: solid; border-top-color: #ff0000 } Some text. Kết quả: tb23.html Border – right – width Thiết lập độ rộng viền phải Ví dụ: p.one { border-style: solid; border-right-width: 15px } p.two { border-style: solid; border-right-width: thin } Note: The "border-right-width" property does not work if it is used alone. Use the "border-style" property to set the borders first. Some text. Some more text. Kết quả: tb24.html Border – right – color Thiết lập màu viền phải p { border-style: solid; border-right-color: #ff0000 } Some text. Kết quả: tb25.html Border – right – style Thiết lập kiểu viền phải p.dotted {border-right-style: dotted} p.dashed {border-right-style: dashed} p.solid {border-right-style: solid} p.double {border-right-style: double} p.groove {border-right-style: groove} p.ridge {border-right-style: ridge} p.inset {border-right-style: inset} p.outset {border-right-style: outset} A dotted border A dashed border A solid border A double border A groove border A ridge border An inset border An outset border Kết quả: tb26.html Border – bottom – width Thiết lập độ rộng viền bên dưới p.one { border-style: solid; border-top-width: 15px } p.two { border-style: solid; border-top-width: thin } Note: The "border-top-width" property does not work if it is used alone. Use the "border-style" property to set the borders first. Some text. Some more text. Kết quả: tb27.html Border – bottom – color Thiết lập màu viền bên dưới p { border-style: solid; border-bottom-color: #ff0000 } Some text. Kết quả: 274.html Border – bottom – style Thiết lập kiểu viền bên dưới p.dotted {border-bottom-style: dotted} p.dashed {border-bottom-style: dashed} p.solid {border-bottom-style: solid} p.double {border-bottom-style: double} p.groove {border-bottom-style: groove} p.ridge {border-bottom-style: ridge} p.inset {border-bottom-style: inset} p.outset {border-bottom-style: outset} A dotted border A dashed border A solid border A double border A groove border A ridge border An inset border An outset border Kết quả: 273.html Border – left – width Thiết lập độ rộng viền trái p.one { border-style: solid; border-left-width: 15px } p.two { border-style: solid; border-left-width: thin } Note: The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first. Some text. Some more text. Kết quả: 272.html Border – left – color Thiết lập màu viền trái p { border-style: solid; border-left-color: #ff0000 } Some text. Kết quả: 271.html Border – left – style Thiết lập kiểu viền trái p.dotted {border-left-style: dotted} p.dashed {border-left-style: dashed} p.solid {border-left-style: solid} p.double {border-left-style: double} p.groove {border-left-style: groove} p.ridge {border-left-style: ridge} p.inset {border-left-style: inset} p.outset {border-left-style: outset} A dotted border A dashed border A solid border A double border A groove border A ridge border An inset border An outset border Kết quả: tb28.html Outline Outline Là thuộc tính cho phép định nghĩa tất cả các thuộc tính color, style, width trong một khai báo p { border: red solid thin; outline: green dotted thick } Some text. Kết quả: tb29.html outline-color outline-style outline-width outline-color thuộc tính này thiết đặt màu sắc cho outline p { border: red solid thin; outline-style: solid; outline-color: #00ff00 } Some text. Kết quả: tb30.html color invert outline-style thiết đặt kiểu đường p { border: red solid thin; } p.dotted {outline-style: dotted} p.dashed {outline-style: dashed} p.solid {outline-style: solid} p.double {outline-style: double} p.groove {outline-style: groove} p.ridge {outline-style: ridge} p.inset {outline-style: inset} p.outset {outline-style: outset} A dotted outline A dashed outline A solid outline A double outline A groove outline A ridge outline An inset outline An outset outline Kết quả: tb31.html none dotted dashed solid double groove ridge inset outset outline-width Thuộc tính này quy định bề dày đường outline p.one { border: red solid thin; outline-style: solid; outline-width: thick } p.two { border: red solid thin; outline-style: solid; outline-width: 2px } Some text. Some text. Kết quả: tb32.html thinmediumthicklength Padding Padding Thuộc tính ngắn cho các paddding td.test1 {padding: 1.5cm} td.test2 {padding: 0.5cm 2.5cm} This is a tablecell with equal padding on each side. This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm. Kết quả: tb33.html Padding – top Padding - right Padding - bottom Padding – left Padding - top Thiết lập đệm trên cho một thành phần td {padding-top: 2cm} This is a tablecell with a top padding Kết quả: tb34.html % Padding - right Thiết lập đệm phải cho một thành phần Ví dụ: td {padding-right: 5cm} This is a tablecell with a right padding. This is a tablecell with a right padding. Kết quả: tb35.html % Padding - bottom Thiết lập đệm dưới cho một thành phần td {padding-bottom: 2cm} This is a tablecell with a bottom padding Kết quả: tb36.html % Padding – left Thiết lập đệm trái cho một thành phần td {padding-left: 2cm} This is a tablecell with a left padding. This is a tablecell with a left padding. Kết quả: tb37.html % Margin Margin Thuộc tính ngắn cho các thiết lập Margin p.margin {margin: 2cm 4cm 3cm 4cm} This is a paragraph with no specified margins This is a paragraph with specified margins This is a paragraph with no specified margins Kết quả: tb38.html Margin - top Margin - right Margin - bottom Margin - left Margin - top Thiết lập canh lề trên cho một thành phần p.topmargin {margin-top: 5cm} This is a paragraph with no margin specified This is a paragraph with a specified top margin p.topmargin { margin-top: 25% } This is a paragraph with no margin specified This is a paragraph with a specified top margin Kết quả: tb39.html Auto % Margin - right Thiết lập canh lề phải cho một thành phần p.rightmargin {margin-right: 5cm} This is a right aligned paragraph with no margin specified This is a right aligned paragraph with a specified right margin Kết quả: tb40.html Auto % Margin – bottom Thiết lập canh lề dưới cho một thành phần p.rightmargin { margin-right:25% } This is a right aligned paragraph with no margin specified This is a right aligned paragraph with a specified right margin Kết quả: tb41.html Auto % Margin –left Thiết lập canh lề trái cho một thành phần p.leftmargin {margin-left: 2cm} This is a paragraph with no margin specified This is a paragraph with a specified left margin Kết quả: tb42.html Auto % List List list-style-typelist-style-positionlist-style-image list-style-type Thuộc tính list-style-type chỉ ra loại bullet sẽ được sử dụng. Các gía trị có thể có của thuộc tính này là: disc, circle, square, decimal ... Ví dụ: ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.none {list-style-type: none} Coffee Tea Coca Cola Coffee Tea Coca Cola Coffee Tea Coca Cola Coffee Tea Coca Cola Kết quả: tb3.html noneurl list-style-position Thuộc tính list-style-position chỉ ra vị trí tương đối của buttlet. Các gía trị có thể có là Inside, và Outside. Ví dụ: ul.inside { list-style-position: inside } ul.outside { list-style-position: outside } This list has a list-style-position with a value of "inside": Earl Grey Tea - A fine black tea Jasmine Tea - A fabulous "all purpose" tea Honeybush Tea - A super fruity delight tea This list has a list-style-position with a value of "outside": Earl Grey Tea - A fine black tea Jasmine Tea - A fabulous "all purpose" tea Honeybush Tea - A super fruity delight tea Kết quả: tb44.html insideoutside list-style-image Sử dụng thuộc tính list-style-image để chỉ ra ảnh sẽ được dùng làm bullet trong một danh sách các mục Ví dụ ul { list-style-image: url('arrow.gif') } Coffee Tea Coca Cola Kết quả: tb45.html nonedisccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-alphaupper-alphalower-greeklower-latinupper-latinhebrewarmeniangeorgiancjk-ideographichiraganakatakanahiragana-irohakatakana-iroha  Table Border-collapse Thiết lập đường viền của bảng là đơn hay được tách ra như trong HTML chuẩn. Ví dụ: table.coll { border-collapse: collapse } table.sep { border-collapse: separate } Peter Griffin Lois Griffin Peter Griffin Lois Griffin Kết quả: tb46.html Collapse: Mạc định, viền được tách raseparate: Viền được gộp lại thầnh đường viền đơn khi hiển thị Border- spacing Thiết lập khoảng cách tách nhau giữa các đường viền ô Ví dụ: table.one { border-collapse: separate; border-spacing: 10px } table.two { border-collapse: separate; border-spacing: 10px 50px } Peter Griffin Lois Griffin Cleveland Brown Glenn Quagmire Kết quả: tb47.html length length Caption-site Thiết lập vị trí của caption(Đề mục của bảng) so với các phía của bảng Ví dụ: caption { caption-side:bottom } This is a caption Peter Griffin Lois Griffin Kết quả: tb48.html topbottomleftright Emply- cells Thiết lập có hay không hiên thị các ô trống trong bảng Ví dụ: table { border-collapse: separate; empty-cells: show } Peter Griffin Lois Kết quả: tb49.html showhide Table - layout Thiết đặt thuật toán để hiển thị các ô, các dòng, các cột Ví dụ: table.one { table-layout: automatic } table.two { table-layout: fixed } 1000000000000000000000000000 10000000 100 1000000000000000000000000000 10000000 100 Kết quả: tb50.html autofixed