Bài giảng Advance CSS - Lương Trần Hy Hiến

Chia sẻ: Lavie Lavie | Ngày: | Loại File: PDF | Số trang:0

Thêm vào BST

Báo xấu

52
lượt xem 6
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Advance CSS của Lương Trần Hy Hiến nêu lên các ký hiệu thường dùng trong Advance CSS; CSS element boxes; common CSS layout properties; typical web page; CSS3 Fyi; CSS3 shadows; multiple background images và một số nội dung khác.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Advance CSS - Lương Trần Hy Hiến

Advanced CSS Luong Tran Hy Hien, FIT of HCMUP, VietNam 1
Các ký hiệu thường dùng • *: Áp dụng cho tất cả *{ margin: 0; padding: 0; } • #: Áp dụng cho đối tượng có ID • .name: Áp dụng cho đối tượng có class • X Y: áp dụng cho đối tượng Y nằm trong đối tượng X • X > Y: chỉ rõ con trực tiếp 2
CSS Element Boxes Parent’s background covers margin Border Margin Element Padding Content Padding Element’s background covers padding
Box Formatting Model margin (transparent) border padding (transparent) content element width box width Provides a means to control the spatial layout of elements; the basis for position-oriented properties
Common CSS Layout Properties • Width margin padding • Height • Float width • Clear height • Border border • Padding • Margin
Width & Height Width and height define the width and height of an element. div id=“box” #box {width=“50px”} #box {height=“auto”} #box {width=“50em”} *Width and height can be #box {width=“100%”} specified in pixels, ems, percentages or set to auto #box {width=“auto”}
Float: (left, right) Float property makes elements float to the right or left of the screen, positioned where they are in the HTML. Floating allows word wrapping. Here is some text which wraps around the box div id=“box” floated to the left. #box {float:left; margin-right: 10px;}
Floats • a floated element shifts out of the normal document left-to-right layout flow • if there is text beside a float, the text will wrap around the floated element .right_img { float: right; width: 200px; } • to escape the wrapping behavior, use the “clear” property, which prevents overlap of floating elements q { clear: right; } • clear property possible values: left, right, both, none (default)
Clear: (left, right, both) When elements are floated, they wrap around each other to form a “caravan.” The clear property detaches an element from the “caravan” and allows it to start on a new line. div id=“box1” div id=“box2” div id=“box3” #box3 { background-color: white; border: 1px solid #000; clear: both;}
Border (top, right, bottom, left) div id=“box” You can define the entire border or #box { only the top, bottom, left, or right. You border: red dotted 1px;} can also define the border using one declaration. The code could be any of #box { the following: border-color: red; #box { border-style: dotted; border-top: red dotted 1px; border-width: 2px; border-bottom: red dotted 1px; } border-left: red dotted 1px; border-right: red dotted 1px; }
Padding (top, right, bottom, left) Padding is the space between the text/content and the border. You can use padding for all around the element or specify each side of the rectangle separately. The code could be any of the following: padding padding: 10px; Padding: 10px 10px; div id=“box” padding: 10px 10px 10px 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; padding-top: 10px;
Margin (top, right, bottom, left) Margin is the space outside the text/content and the border. You can use margin for all around the element or specify each side of the rectangle separately. The code could be any of the following: margin margin: 10px; or margin: 10px 10px; or div id=“box” margin: 10px 10px 10px 10px; or margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px;
Typical Web Page (Browser) Container header menu main footer
#container #banner #nav #content #footer
home contact
body { font-size: 1em; } #container { width: 920px; } #banner { width: 920px; height: 120px; } #nav { float: left; width: 200px; } CSS #content { width: 720px; } #footer { font-size: .8em; }
HTML5/CSS3 Introduction CSS3 17
CSS3 FYI • CSS3 is still under development • Modules: A new approach to standardization • Each browser still implementing slightly different syntax for certain properties: – moz – ; //Firefox – webkit – ; //Chrome, Safari (webkit) – o – ; //Opera –ms – ; //IE
Create Rounded Corners border -*-*-radius: [x] [y]? x = horizontal radius [ | ] y = vertical radius [ | ] border-top-left radius: x y; border-top-right-radius: x y; border-bottom-left-radius: x y; border-bottom-right-radius: 0;
CSS3 Shadows box-shadow: x y b color Examples: -webkit-box-shadow: -3px 3px 3px #999999; -moz-box-shadow: -3px 3px 3px #999999; text-shadow: -4px 4px 3px #999999;