Đang tải... (xem toàn văn)
CSS cơ bản nhất dành cho người mới học lập trìnhcó thể nói ngôn ngữ HTML là ngôn ngữ mở dễ học vì vậy không có ly do nào ko thể không học trong thơi buổi CNTT đang lên ngôi....CSS luôn đi kèm HTML vì thế nó là 1 phần không thể thiếu trong HTML
Session HTML5 and CSS3 Objectives: At the end of this session, you will be able to: Use HTML5 Elements Use CSS3 Features The steps given in this session are detailed, comprehensive and carefully thought through This has been done so that the learning objectives are met and the understanding of the tool is complete Please follow the steps carefully In order to execute the programs follow the steps given below: Create a folder BDWS under C:\Temp, then create a folder Session5 in BDWS and save all the html, css and js files in this folder only Download all resource files (music, video and images) using in this session from CMS BDWS Subject Resources to C:\Temp\BDWS\Session5 folder Install Safari and Opera 11 browsers for Windows Invoke Marcomedia Dreamweaver application by clicking on the “Start” button and then “Programs\Marcomedia\Marcomedia Dreamweaver 8” Use Marcomedia Dreamweaver to write all html and CSS files Use Safari, Opera or Firefox to display all html files Part I: Do workshop in CD Part II: Example 1: Create layout as shown below using HTML5 layout tags (use Safari to display this example) HTML5 Layout /* standard body */ body { margin:0 auto; width:960px; } header, nav, section, aside, footer { display:block; border:1px solid black; } header { text-align:center; margin:5px 0px 5px 0px; width:958px; height:100px; } nav { text-align:center; margin:0px 0px 5px 0px; height:40px; width:958px; } section { float:left; width:700px; margin:0px 2px 2px 0px; padding:5px; } aside { width:231px; float:right; text-align:left; margin:0px 0px 5px 0px; padding:5px; } footer { clear:both; text-align:center; margin:0px 0px 5px 0px; height:40px; width:958px; } YourSite.com Menu This is the title of your article This is the content of article This is the content of article This is the content of article Categories Category 1 Category 3 Category 3 Category 4 © 2010 yoursite.com Figure 5.1: Output of Example in Safari Example 2: HTML5 Audio (use Safari to display this example) HTML5 Audio Demo Hello Song Figure 5.2: Output of Example in Safari Example 3: HTML5 Video (use Safari or Firefox to display this example) HTML5 Video format: Encoding Ogg video with Firefogg: - Firefogg is an open source, GPL-licensed Firefox extension for encoding Ogg video To use it, you’ll need to install Mozilla Firefox 3.5 or later, then visit firefogg.org - Click “Install Firefogg.” Firefox will prompt whether you really want to allow the site to install an extension Click “Allow” to continue - After restarting Firefox, firefogg.org will confirm that Firefogg was successfully installed - Click “Make Ogg Video” to start the encoding process Create a Web page as shown below: HTML5 Video Demo HTML5 Video Figure 5.3: Output of Example in Safari Example 4: HTML5 Form Fields HTML5 Form Fields HTML5 Form Fields Email Homepage Number Date: Figure 5.4a: Output of Example in Safari Figure 5.4b: Output of Example in Opera Example 5: CSS3 Border Styles (use Safari to display this example) CSS3 Border #border_radius { background-color:#4b0a03; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; color:#fff; font-weight:bold; padding:15px; text-align:center; text-shadow:1px 1px 1px #000; } #border_image { border-width:0 10px; color:#fff; font-size:20px; font-weight:bold; -moz-border-image:url('RButton.png') 12 12 stretch stretch; -webkit-border-image:url('RButton.png') 12 12 stretch stretch; padding:18px; text-align:center; text-shadow:1px 1px 1px #000; } #box_shadow { background-color: #fff; border:1px solid #eee; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow:0 5px rgba(173, 173, 173, 0.55); -webkit-box-shadow:0 5px rgba(173, 173, 173, 0.55); padding:15px; text-align:center; } Border Radius This is a example with rounded corners. Border Image This is a example with a border image. Box Shadow This box has a awesome drop shadow. Figure 5.5: Output of Example in Safari Example 6: CSS3 Multi-Column Layout (use Safari or Firefox to display this example) CSS3 Multi-Column Layout #multi-column { background-color:#fff; border:1px solid #eee; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; /* for Mozilla */ -moz-column-gap:1em; -moz-column-rule:1px solid #000; -moz-column-count:3; /* for WebKit */ -webkit-column-gap:1em; -webkitcolumn-rule:1px solid #000; -webkit-column-count:3; padding:15px; } Multi-Column Layout Another CSS3 feature that developers, including myself are very eager to start using is the Multi-Column Layout It offers a new way to arrange text in more of a "news paper" type way You have the choice to pick the amount of columns, the column width, column gap width, and column separator. Figure 5.6: Output of Example in Safari 10 Example 7: CSS3 Font and NChild Attribute (use Safari or Firefox to display this example) CSS3 Font and NChild Attribute @font-face { font-family:"MarketingScript"; src:url('MarketingScript.ttf') format("opentype"); } #font-face { font-size:34px; font-family:"MarketingScript", sans-serif; } i[title^=a] { background:#4b0a03; color:#ffffff; list-style:none; padding:5px; } li[title^=b] { background:#fff; color:#333; list-style:none; } #nth-child li:nth-child(2n+1) { background:#4b0a03; color:#ffffff; } @font-face This has a custom font. Attribute Selectors Title with "a". Title with "b". Title with "a". Title with "b". :nth-child() and :nth-of-type() First, Third and Fifth List Elements should be yellow. 1 2 3 4 11 5 Figure 5.7: Output of Example in Safari Example 8: CSS3 Image Zoom In and Out CSS3 (use Safari or Firefox to display this example) CSS3 Image Zoom In and Out #cf4 { position:relative; 12 height:281px; width:450px; margin:0 auto; } #cf4 img { position:absolute; left:0; -webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; transition:all 1s ease-in-out; } #cf4 img.top { -webkit-transform:scale(0,0); opacity:0; } #cf4:hover img.top, #cf4.hover_effect img.top { opacity:1; -webkit-transform:scale(1,1); -webkit-transform-origin:top right; } #cf4:hover img.bottom, #cf4.hover_effect img.bottom { -webkit-transform:scale(0,0); -webkit-transform-origin:bottom left; } Zooming in and out 13 Figure 5.8: Output of Example in Safari 14 Part III: Try It Yourself Create a Web page layout using HTML5 layout tags and CSS3 features as shown below: Figure 5.9: Output of Question Create a Web page with flipping a simple image to another div part using CSS3 Hint: 2.1 Put an image on top of a div inside a container 2.2 Put that in another container with perspective defined 2.3 When hovering on the outside container, add a rotate around the Y axis to the inside container: 15 -webkit-transform:rotateY(180deg); Figure 5.10: Output of Question 16 [...]... ease-in-out; transition:all 1s ease-in-out; } #cf4 img.top { -webkit-transform:scale(0,0); opacity:0; } #cf4:hover img.top, #cf4.hover_effect img.top { opacity:1; -webkit-transform:scale(1,1); -webkit-transform-origin:top right; } #cf4:hover img.bottom, #cf4.hover_effect img.bottom { -webkit-transform:scale(0,0); -webkit-transform-origin:bottom left; } Zooming... using HTML5 layout tags and CSS3 features as shown below: Figure 5.9: Output of Question 1 2 Create a Web page with flipping a simple image to another div part using CSS3 Hint: 2.1 Put an image on top of a div inside a container 2.2 Put that in another container with perspective defined 2.3 When hovering on the outside container, add a rotate around the Y axis to the inside container: 15 -webkit-transform:rotateY(180deg);...Example 7: CSS3 Font and NChild Attribute (use Safari or Firefox to display this example) CSS3 Font and NChild Attribute @font-face { font-family:"MarketingScript"; src:url('MarketingScript.ttf') format("opentype"); } #font-face { font-size:34px; font-family:"MarketingScript",... yellow. 1 2 3 4 11 5 Figure 5.7: Output of Example 7 in Safari Example 8: CSS3 Image Zoom In and Out CSS3 (use Safari or Firefox to display this example) CSS3 Image Zoom In and Out #cf4 { position:relative; 12 height:281px; width:450px; margin:0 auto; } #cf4 img { position:absolute; ... 5.3: Output of Example in Safari Example 4: HTML5 Form Fields HTML5 Form Fields HTML5 Form Fields