Báo cáo Tìm hiểu về CSS - Đào Thị Thêm - Tài liệu, ebook, giáo trình, hướng dẫn

I. Giới thiệu về CSS. 1. Css là gì? CSS: Cascading Style Sheet. Css cho phép bạn định dạng(font chữ, kích thước, màu sắc .) của các đối tượng sử dụng css đó.Ưu điểm của css là tách riêng phần định dạng ra riêng khỏi phần nội dung do đó rất tiện khi bạn muốn thay đổi giao diện của một website. 2. Các cách sử dụng CSS Có 2 cách sử dụng CSS, : -Cách 1: khai báo CSS trong file HTML nội dung của web và sử dụng các định dạng của CSS - sử dụng CSS được định nghĩa từ một file riêng: <title> <link rel="stylesheet" type="text/css"href="style.css" /> </head> <body> </p> </div>  <div class="doc-preview"> <iframe width="100%" height="600" frameborder="0" scrolling="auto" src="https://s1.timtailieu.vn/web/viewer.html?file=https://s1.timtailieu.vn/2cc751c17fa866ad498152b45b1493f7/demo/2022/07/03/bao_cao_tim_hieu_ve_css_dao_thi_them_Zg1PfJOpVA.png"></iframe> </div>  <div class="doc-info"> <img class="icon" alt="doc" src="/images/icons/doc16x16.gif"><span class="page-numbers">27 trang</span> | <span class="sender">Chia sẻ: <a rel="nofollow" href="#">maiphuongtl</a></span><span class="views"> | Lượt xem: 3824</span><span class="downloads"> | Lượt tải: 0</span><a class="download-button" rel="nofollow" href="/dang-nhap/?ReturnUrl=%2ftai-lieu%2fbao-cao-tim-hieu-ve-css-dao-thi-them-23079%2f"><img class="img-download" src="/images/download.gif" alt="download"/></a> </div>  <div class="doc-content-title">Bạn đang xem trước <span class="red">20 trang</span> tài liệu <strong>Báo cáo Tìm hiểu về CSS - Đào Thị Thêm</strong>, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên</div><div class="doc-content">BÁO CÁO TÌM HIỂU VỀ CSS I. Giới thiệu về CSS. 1. Css là gì? CSS: Cascading Style Sheet. Css cho phép bạn định dạng(font chữ, kích thước, màu sắc ....) của các đối tượng sử dụng css đó.Ưu điểm của css là tách riêng phần định dạng ra riêng khỏi phần nội dung do đó rất tiện khi bạn muốn thay đổi giao diện của một website. 2. Các cách sử dụng CSS Có 2 cách sử dụng CSS, :-Cách 1: khai báo CSS trong file HTML nội dung các css nội dung của web và sử dụng các định dạng của CSS - sử dụng CSS được định nghĩa từ một file riêng: hoặc @import url(Path To stylesheet.css) 3. Cú pháp của một css: tên_css { thuộc_tính: giá_trị_của_thuộc_tính; } ví dụ: body { background: #336699; font-family: Verdana, Arial, serif; } - Chú thíchcác đoạn chú thích trong CSS được đặt trong dấu /* Chú thích */ II. Thuộc tính cơ bản của CSS. CSS Class: Cho phép định dạng style của các đối tượng(table,td,div,span...) Bạn có thể sử dụng lặp đi lặp lại nhiều lần trong cùng một file HTML Ví dụ: Lop K56A Lop K56A Lop K56A Kết quả: CSS Margin: Dùng để xác định khoảng cách giữa nó và đối tượng bao quanh nó ta có thể sử dụng 4 thuộc tính của margin :- margin-left: length/percent/auto; - margin-right: length/percent/auto; - margin-top: length/percent/auto; - margin-bottom: length/percent/auto; Trong đó: - length (px,pt) - percent (%) - auto (auto) Ví dụ 1: p.topmargin {margin-top: 5cm} Lop K56A - CNTT - ĐHSPHN Lop K56A - CNTT - ĐHSPHN Kết Qủa: Ví dụ 2: p.topmargin { margin-top: 25% } Lop K56A - CNTT - ĐHSPHN Lop K56A - CNTT - ĐHSPHN Kết Qủa: CSS Padding: Dùng để xác định khoảng cách giữa nó với đối tượng bao quanh nằm trong nó. Ta có thể sử dụng 4 thuộc tính của padding - padding-left: length/percent; - padding-right: length/percent; - padding-top: length/percent; - padding-bottom: length/percent; Để định khoảng cách cho left,right,top,bottom Có thể sử dụng một trong 2 - length (px,pt) - percent (%) Ví Dụ: td {padding-left: 2cm} Lop K56A - CNTT - ĐHSPHN Kết quả: Một số định dạng cho Text: - color: định dạng mẫu cho text color: values; trong đó values có thể là : + dạng tên: red,white... + dạng hex: #000000,#ff00cc,... + dạng rbg: rgb(255, 0, 0), rgb(0, 0, 0)... Ví dụ: h1 {color: red} h2 {color: #336699} p {color: rgb(0,0,255)} K56A - CNTT K56A - CNTT K56A - CNTT Kết quả: - Letter Spacing: khoảng cách giữa các ký tự letter-spacing: value; trong đó value có thể là : + normal(normal) + length(1px,1pt...) Ví dụ: ABC kết quả: A B C - Text Align: canh lề khối văn bản text-align: value; trong đó values có thể là : + left + right + center + justify Ví dụ: h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} K56A - CNTT K56A - CNTT K56A - CNTT Kết quả: - Text Decoration text-decoration: value; trong đó value có thể là 1 trong các giá trị sau + none + underline (gạch chân) + overline (gạch trên đầu) + line through (gạch xuyên chữ) + blink Ví dụ: h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration: blink} a {text-decoration: none} K56A - CNTT K56A - CNTT K56A - CNTT K56A - CNTT This is a link Kết quả: - Text-indent: định dạng thụt đầu dòng cho dòng đầu tiên trong một đoạn văn text-indent: value; trong đó value có các giá trị : + length : 1px,1pt.. + percentage: 5%,10%.. Ví dụ: p {text-indent: 1cm} Co nhung luc toi lang thang tim den Noi nao do thua thieu cua rieng toi Nhung tat ca deu voi cang ne tranh Chi con minh toi tro troi giua dong doi Kết quả: - Text Transform: định dạng chữ hoa chữ thường text-transform: value; trong đó value gồm các giá trị: + none + capitalize + lowercase + lowercase Ví dụ: p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize} K56A - CNTT K56A - CNTT K56A - CNTT Kết quả: - White Space: white-space: value; trong đó value gồm các giá trị: + normal + pre + nowrap Ví dụ: p { word-spacing: 30px } K56A - CNTT - DHSPHN. Kết quả: - Word Spacing word-spacing: value; trong đó valu gồm các giá trị + normal + length (1,2...) Ví dụ: These words are spaced Kết quả: These words are spaced CSS Font Properties: Định dạng style của text như: font,size,color,..... - font-family: định dạng font font-family: Verdana, sans-serif; : set font Verdana là font mặc định, nếu không có font Verdana trên máy thì sử dụng font sans-serif - Font Size: định kích thước cho text font-size: value; trong đó value có thể là : + xx-large + x-large + larger + large + medium + small + smaller + x-small + xx-small + length ( như: px,pt,in,cm,mm,...) + % (percent) - Font Style: định dạng in đậm,in nghiêng... font-style: value; trong đó value bao gồm: + normal + itailc + oblique - Font Weight: định dạng độ lớn của text font-weight: value; trong đó value gồm các giá trị: + lighter + normal + 100 + 200 + 300 + 400 + 500 + 600 + 700 + 800 + 900 + bold + bolder Ví dụ: h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans-serif} K56A - CNTT K56A - CNTT K56A - CNTT Kết quả: 6.CSS Links: Cho toàn bộ trang web: - a: link { properties: value; } /* tác dụng khi không có bất kỳ sự kiện gì xảy ra*/ - a: visited { properties: value; }/* tác dụng khi link náy được click và back trở lại*/ - a: active { properties: value; }/* khi click chuôt lên link và chưa buông ra*/ - a: hover { properties: value; }/*khi đưa chuột ngang qua link*/ - a: focus { properties: value; }/* khi user dùng phím tab để đưa con trỏ đến link(không dùng mouse)*/ Cho một vùng của web, thông qua một class: .class_namea: link { properties: value; } .class_namea: visited{ properties: value; } .class_namea: active { properties: value; } .class_namea: hover { properties: value; } .class_namea: focus { properties: value; } hoặc a.class_name: link { properties: value; } a.class_name: visited{ properties: value; } a.class_name: active { properties: value; } a.class_name: hover { properties: value; } a.class_name: focus { properties: value; } các định dạng thẻ a này chỉ có ảnh hưởng trong các đối tượng sử dụng css class_name và áp dụng tương tự cho trường hợp nếu sử dụng id (#) CSS Background: Background định dạng background, các thuộc tính: - background-attachment: value; value: + scroll + fixed - background-color: value; /* giá trị màu */ Ví dụ: body {background-color: #336699} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} K56A - CNTT K56A - CNTT K56A - CNTT Kết quả: background-image: url(path_to_image); Ví dụ: body { background-image: url('019861869177.jpg') } Kết quả: - background-position: value; vị trí bắt đầu của background value: + top left + top center + top right + center left + center center + center right + bottom left + bottom center + bottom right + x-% y-% + x-pos y-pos - background-repeat: value; điều khiển quá trình lặp lại của image value: repeat (lặp theo tất cả cách hướng) Ví dụ: body { background-image: url('019861869177.jpg'); background-repeat: repeat } Kết quả: no-repeat ( không lặp) Ví dụ: body { background-image: url('019861869177.jpg'); background-repeat: no-repeat } Kết quả: repeat-x (chỉ lặp theo trục x) Ví dụ: body { background-image: url('019861869177.jpg'); background-repeat: repeat-x } Kết quả: repeat-y (chỉ lặp theo trục y) Ví dụ: body { background-image: url('019861869177.jpg'); background-repeat: repeat-y } Kết quả: 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: Border – width: Thiết lập độ rộng đường viền: Thin Medium Thick Ví dụ: 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 } K56A - CNTT K56A - CNTT K56A - CNTT K56A - CNTT K56A - CNTT Kết quả: Borde – color: Thiết lập màu cho đường viền: Ví dụ: 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) } K56A - CNTT K56A - CNTT K56A - CNTT K56A - CNTT Kết quả: Borde – style: Thiết lập kiểu đường viền None Hidden Solid Dotted Dashed Double Groove Ridge Inset Outset Ví dụ: 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} K56A - CNTT K56A - CNTT K56A - CNTT K56A - CNTT K56A - CNTT K56A - CNTT K56A - CNTT K56A - CNTT Kết quả: </div> </div>  </div>  </div>  <div id="content-widget"> <div class="relevant-docs"> <div class="header"> <div class="box-header box-header-adv"><span>Tài liệu liên quan</span></div> </div>  <div class="box"> <ul> <li><img src="/images/icons/pdf24x30.gif"><a href="/tai-lieu/de-tai-phan-tich-thiet-ke-phan-mem-quan-ly-nhan-khau-mot-xa-6488/">Đề tài Phân tích thiết kế phần mềm quản lý nhân khẩu một xã</a><p class="detail">19 trang | Lượt xem: 3032 | Lượt tải: 2</p></li><li><img src="/images/icons/pdf24x30.gif"><a href="/tai-lieu/de-tai-trien-khai-dich-vu-giam-sat-thiet-bi-dau-cuoi-5838/">Đề tài Triển khai dịch vụ giám sát thiết bị đầu cuối</a><p class="detail">76 trang | Lượt xem: 3092 | Lượt tải: 3</p></li><li><img src="/images/icons/pdf24x30.gif"><a href="/tai-lieu/de-tai-thu-nghiem-phuong-phap-bien-doi-khuon-mat-tren-anh-hai-chieu-6152/">Đề tài Thử nghiệm phương pháp biến đổi khuôn mặt trên ảnh hai chiều</a><p class="detail">82 trang | Lượt xem: 1949 | Lượt tải: 1</p></li><li><img src="/images/icons/doc24x30.gif"><a href="/tai-lieu/bao-cao-nhung-thuoc-tinh-cua-css-23070/">Báo cáo Những thuộc tính của CSS</a><p class="detail">14 trang | Lượt xem: 2001 | Lượt tải: 0</p></li><li><img src="/images/icons/pdf24x30.gif"><a href="/tai-lieu/luan-van-quan-ly-thu-vien-sach-6394/">Luận văn Quản lý thư viện sách</a><p class="detail">103 trang | Lượt xem: 3906 | Lượt tải: 5</p></li><li><img src="/images/icons/pdf24x30.gif"><a href="/tai-lieu/de-tai-sinh-ca-kiem-thu-tham-so-hoa-cho-chuong-trinh-java-5912/">Đề tài Sinh ca kiểm thử tham số hóa cho chương trình Java</a><p class="detail">69 trang | Lượt xem: 2269 | Lượt tải: 2</p></li><li><img src="/images/icons/pdf24x30.gif"><a href="/tai-lieu/de-tai-he-thong-quan-ly-dang-ky-thue-su-dung-web-service-6037/">Đề tài Hệ thống quản lý đăng ký thuế sử dụng web service</a><p class="detail">58 trang | Lượt xem: 2512 | Lượt tải: 4</p></li><li><img src="/images/icons/pdf24x30.gif"><a href="/tai-lieu/de-tai-sap-hang-hoan-chinh-hai-he-genome-6214/">Đề tài Sắp hàng hoàn chỉnh hai hệ genome</a><p class="detail">42 trang | Lượt xem: 1841 | Lượt tải: 0</p></li><li><img src="/images/icons/pdf24x30.gif"><a href="/tai-lieu/de-tai-chuyen-doi-dac-ta-uml-voi-ocl-sang-dac-ta-alloy-6077/">Đề tài Chuyển đổi đặc tả uml với ocl sang đặc tả alloy</a><p class="detail">51 trang | Lượt xem: 2529 | Lượt tải: 1</p></li><li><img src="/images/icons/pdf24x30.gif"><a href="/tai-lieu/de-tai-tai-tao-mo-hinh-khuon-mat-tu-cac-diem-dac-trung-5918/">Đề tài Tái tạo mô hình khuôn mặt từ các điểm đặc trưng</a><p class="detail">72 trang | Lượt xem: 2117 | Lượt tải: 1</p></li> </ul> </div>  </div>  </div>  </div>  <div class="home-partner"> </div>  <div id="footer"> <div class="footer-copy"> <div class="footer-left"> Copyright © 2024 TimTaiLieu.vn<br/> Website đang trong thời gian thử nghiệm, chờ xin giấy phép của Bộ TT & TT. </div> <div class="footer-right"> Chia sẻ: <img src="/images/facebook_16x16.gif" alt="TimTaiLieu on Facebook"/> <a rel="nofollow" target="_blank" href="https://twitter.com/TimTaiLieu"><img src="/images/twitter_16x16.gif" alt="Follow @TimTaiLieu"/></a> </div> </div> <div id="text-link"> Thư viện <a target="_blank" title="Luận Văn, Luan Van" href="https://luanvan.net.vn/">Luận Văn</a>, <a target="_blank" title="thu vien tai lieu" href="https://doc.edu.vn/">Tài Liệu</a> và <a target="_blank" title="đồ án" href="https://doan.edu.vn/">Đồ Án</a> tốt nghiệp. <a target="_blank" title="Thư Viện Tài liệu, Ebook, Luận Văn, Báo Cáo, Tiểu Luận, Giáo án, Giáo trình" href="https://www.zbook.vn/">Thư viện Ebook miễn phí</a>, <a target="_blank" title="Thư viện Giáo án" href="https://thuviengiaoan.vn/">Thư viện giáo án</a>, <a target="_blank" title="Phần mềm đọc file PDF, chuyển PDF sang Word, chuyển Word sang PDF, chuyển file scan sang Word" href="https://pdf.vn/">PDF</a> Hướng dẫn <a title="Hướng dẫn giải bài tập" href="https://giaibaitap123.com/" target="_blank">giải bài tập</a> SGK. </div>  </div>  <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.7.1'></script> <script type='text/javascript' src='/js/customscript.js'></script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-33331621-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div>  </body> </html>