- There exists various style properties that could be applied to an element.
ex1) text-shadow property : adds text shadow effect to any text.
- Has 4 values, 'horizontal offset', 'vertical offset', 'blur radius', 'color'.
- right, down direction has positive values in horizontal and vertical offset.
================================================================================================
ex2) border-radius property : adds rounded corners to an element
- value greater than half of the shortest side length produces a completely round end.
- we could specify the radius for each corner with border-direction-radius
================================================================================================
ex3) color value in border, background, color property
- we could specify the color value in various ways such as in 'color names', 'hexadecimal value', 'RGB value', 'HSL value'.
================================================================================================
ex4) box-shadow property : shadows any block-level element.
- Like text-shadow property, it has 4 values, 'horizontal offset', 'vertical offset', 'blur radius', 'color'.
================================================================================================
ex5) gradient value in background property : displays smooth transitions between colors
-In CSS3, instead of using images for these effects, 'linear gradients' and 'radical graidents' is provided.
- In linear gradient, you should specify the direction or angle of the gradient. Also, you could specify the color-stops at which to change colors along the gradient line.
- top is 0 degrees, right is 90 degrees, bottom is 180 degrees, left is 270 degrees.
- In radical gradient, you should specify the center of the gradient and the size and shape of the ending shape.
- 'position' determines the center of the gradient, while 'shape' determines the gradient's ending shape, and the 'size' determines the size of ending shape such as 'closest-side', 'farthest-side', 'closest-corner', 'farthest-corner'.
- Actually, gradient could be used in any property that accepts images.
================================================================================================
- It is a good practice to include multiple prefixes when they're available so that the webpage renders properly in various browsers.
- When using vendor prefixes in styles, always place them before the nonprefixed version(standard version).
ex6) -webkit-text-stroke property : a nonstandard property for WebKit-based browsers such as Firefox and Edge, adds an outline(text stroke) around text.
================================================================================================
ex7) background property in block element : CSS3 supports multiple backgrounds.
- Background-origin value determines where each image is placed using box model.
- padding box is positioned relative to the padding box.
- border box is positioned relative to the border.
- content box is positioned relative to the content.
================================================================================================
ex8) border image property : border image around any block-level element
- Has 3 values, 'border-image-source', 'border-image-slice', 'border-image-repeat'.
- 'border-image-slice' has 4 values, top, right, bottom, left which then divides the image into 9 regions.
- 'border-image-repeat' specifies how the border image are scaled and tiled, and might get the value stretch, repeat, or round.
================================================================================================
ex9) animation property
- Animation, specified by the @keyframe rule, is a way to implement animation without JavaScript.
- Animation in other words is letting an element gradually change from one style to another.
- An element would use the animation property to make transition to another state.
- Has lots of parameters, 'animation-name', 'animation-timing-function', 'animation-duration', 'animation-iteration-count', 'animation-delay', 'animation-direction'.
- 'animation-timing-function' has arguments such as linear, ease, ease-in, ease-out, ease-in-out, and cubic-bezier.
- 'animation-direction' specifies the direction, and has arguments such as alternate and normal.
================================================================================================
ex10) transition property : changes an element's style over a specified duration.
- Although it is similar to animations in concept, it specify only the starting and ending values of CSS properties while animation's keyframes control intermediate states.
- 'transform' is another property and 'transition' takes transform as an argument
- transform property has parameter such as 'rotate', 'scale', 'translate', 'skew', 'skewX'.
- Instead of transform, arguments such as 'opacity' could be given to transition instead of transform.
================================================================================================
ex11) @font-face rule
- Could use downloadable fonts to help ensure a uniform look across client sites.
================================================================================================
ex12) column-count property : allows multiple column layout of text just like in newpapers
- Has other attributes such as column-gap, column-rule-style, column-rule-width, column-rule-color, column-rule.
- 'column-count' decides the numbers of columns.
- 'column-gap' decides the gap between the columns.
- 'column-rule-style' decides style of the rule between columns.
- 'column-rule-width' decides the width of the rule.
- 'column-rule-color' decides the color of the rule.
- 'column-rule' decides the shortand property for the column rule.
================================================================================================
- CSS Selectors are patterns used to select the elements you want to style.
+) E[foo] : an E element with a 'foo' attribute
+) E[foo="bar"] : an E element whose 'foo' attribute is exactly equal to 'bar'
+) E[foo~="bar"] : an E element whose 'foo' attribute is a list of whitespace separated values, one of which is exactly equal to 'bar'.
+) E[foo^="bar"] : an E element whose 'foo' attribute value begins exactly with the string 'bar'.
+) E[foo$="bar"] : an E element whose 'foo' attribute value ends exactly with the string 'bar'.
+) E:nth-child(n) : an E element, the n-th child of its parent.
+) E:first-child : an E elemnt, the first child of its parent.
+) E:hover / E:focus : an E element during certain user actions.
+) E:checked : a user interface element E which is checked (for instance a radio-button or checkbox).
- Flexible box layout are used to align the contents of the box.
- When we change the screen size, flexbox changes their size and order dynamically, and allow to lay out the contents in any direction.
- There exists properties such as 'flex-direction', 'flex-wrap', 'flex-flow', 'justify-content', 'align-contents', 'align-items'.
- 'flex-direction' decides in which direction the container wants to stack stack the flex items. Could pass arguments such as column, column-reverse, row, row-reverse. Mind that default is 'row'.
- 'flex-wrap' decides whether the flex items should wrap or not. If flex-wrap is used instead of flex-direction, the elements within the flexbox would be displayed dynamically based on the screen window size. Could pass arguments such as wrap, no-wrap, wrap-reverse.
- 'flex-flow' is a shortand property for setting both the flex-direction and flex-wrap property.
- 'justify-content' is used to align the flex items in main axis direction. Could pass arguments such as center, flex-start, flex-end, space-around, space-between.
- 'align-items' is used to align the flex items in cross axis direction. Could pass arguments such as center, flex-start, flex-end, space-around, space-between, stretch.
- 'align-content' is used to align the flex lines. Could pass arguments such as space-around, space-between, stretch. The main difference between align-items and align-content is that align-items determines how the items as a whold are aligned within the container, while align-content determines the spacing betwen lines.
- Therefore if there is only one line, align-content would have no effect.
- There exists properties that could be attached into the child elements(items) instead of the container itself such as 'order', 'flex-grow', 'flex-shrink', 'flex-basis', 'flex', 'align-self'.
- 'order' can change the order of the flex items.
- 'flex-grow' specifies how much a flex item will grow relative to the rest of the flex items when the screen size changes.
- 'flex-shrink' specifies how much a flex item will shrink relative to the rest of the flex items when the screen size changes.
- If flex-grow or flex-shrink is set to 0, the size will not change whether the screen size changes.
- 'flex-basis' specifies the initial length of the flex item.
- 'flex' is a shorthand property for flex-grow, flex-shrink, flex-basis.
- 'align-self' specifies the alignment for the selected item inside the flexible container.
- Flexbox could be used with media queries to create different layouts for different screen sizes aznd devices.
'Web Programming' 카테고리의 다른 글
| JavaScript Syntax(2) (0) | 2021.03.30 |
|---|---|
| JavaScript Syntax(1) (0) | 2021.03.28 |
| CSS Syntax(1) (0) | 2021.03.20 |
| HTML Syntax(2) (0) | 2021.03.15 |
| HTML Syntax(1) (0) | 2021.03.08 |
