<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>description of style</title>
<style>
*{margin:0px; padding:0px;}
body * {
margin: 0px;
padding: 0px;
border: solid silver;
font-size:25px;
}
.imgbox1{ width:100px; height: 50px; background-image: url(); }
.imgbox2{ width:200px; height:100px; background-image: url(); }
.box2{ width:100px; height:50px; background-color: yellow; }
.block{ display: block; }
.inline{ display: inline; }
.hidden{ visibility:hidden; }
.float-r {float:right;}
#area{
position: absolute;
width: 600px;
height:400px;
border-width: 10px;
}
#DDD { opacity: 0.4; }
#EEE { padding: 25px 10px 25px 90px; }
#FFF { position: absolute; top:20px; right: 40px; border-style:ridge; border-width: 10px;}
#GGG { position: fixed; bottom: 20px; right:40px; box-shadow:4px 4px 10px 6px orange;}
#HHH { position: relative; top: -50px; left: 200px; border-radius: 20px;}
</style>
</head>
<body>
<div id ="area">
<div class="imgbox1 block">style 1</div>
<div class="imgbox1 inline">style 2</div>
<div class="imgbox1 inline">style 3</div>
<div id="DDD" class="imgbox1 block">style 4</div>
<div id="EEE" class="box2 block">style 5</div>
<div id="FFF" class="imgbox2 block">style 6</div>
<div id="GGG" class="imgbox1 block">style 7</div>
<div id="HHH" class="imgbox2 block">style 8</div>
<div class="imgbox1 block float-r">style 9</div>
<div class="imgbox1 hidden float-r">style 10</div>
<div class="imgbox1 block float-r">style 11</div>
</div>
</body>
</html>#### Global and Body Element Styles:
- `*{margin:0px; padding:0px;}`: Resets the margin and padding for all elements to 0, ensuring a consistent starting point for styling.
- `body *`: Applies to all elements within the `body`. Sets margins and padding to 0, applies a solid silver border, and sets the font size to 25px for readability and visual distinction.
#### Class-based Styles:
- `.imgbox1` and `.imgbox2`: Intended to apply background images with specific widths and heights, though the `url()` for images is missing. These classes differentiate element sizes.
- `.box2`: Sets a yellow background color on elements, with specified width and height.
- `.block` and `.inline`: Control the display property of elements, making them either block-level or inline.
- `.hidden`: Hides elements by setting their visibility to hidden.
- `.float-r`: Floats elements to the right, affecting their positioning within the flow of the document.
#### ID-based Styles for Specific Elements:
- `#area`: Positions an element absolutely within its containing element, setting a specific size and border width, serving as a container for demonstrating other styles.
- `#DDD`: Reduces the opacity of an element to 0.4, making it semi-transparent.
- `#EEE`: Applies padding with varying values on all four sides of an element, demonstrating how padding can affect inner content spacing.
- `#FFF`: Positions an element absolutely within `#area`, demonstrating absolute positioning's effect on layout.
- `#GGG`: Uses fixed positioning to anchor an element at a specific location in the viewport, with a box shadow for visual effect.
- `#HHH`: Applies relative positioning, moving the element relative to its normal position, and rounds the corners with a border radius.
#### Demonstrations and Effects:
- **Display Properties**: The `.block` and `.inline` classes illustrate how elements can either take up their own line or flow inline with other content.
- **Visibility and Floats**: The `.hidden` class alongside `.float-r` demonstrates how elements can be removed from visibility but still take up space, and how floating can affect the layout of surrounding content.
- **Positioning**: The various positioning styles (`absolute`, `fixed`, `relative`) show how elements can be precisely placed within the page or relative to their normal position. `#GGG` with `position: fixed;` is particularly noteworthy for creating elements that stay put during scrolling, useful for persistent navigation menus or buttons.
- **Opacity and Padding**: `#DDD` and `#EEE` showcase how transparency and padding can be adjusted to achieve desired visual effects and spacing within elements.
This document offers a practical overview of key CSS properties, ideal for beginners learning web design principles or for developers seeking a quick reference for common CSS styling techniques.
'개념 > HTML+CSS' 카테고리의 다른 글
| HTML) Exploring Font Styles and Effects in CSS (0) | 2025.02.04 |
|---|---|
| HTML) background style type (0) | 2025.02.03 |
| HTML) Web font (0) | 2025.02.01 |
| HTML) Using @font-face for Custom Fonts in HTML5 (0) | 2025.01.31 |
| HTML) Transforming XML Student Data into HTML with XSLT (0) | 2025.01.29 |