[CSS] CSS / Selector / Type Selector #CSS #type selector Type Selector Type selectors are selectors that select HTML elements such as h1, p, div, and span. For example, the following makes the contents of all p elements in an HTML document blue. p { color: blue; } CSS 2022.07.29
[CSS] CSS / Selector / Universal Selector #CSS Universal Selector The full selector selects all HTML elements. It is represented by an asterisk (*). For example, the following makes all elements blue. * { color: blue; } It can be omitted when used in the same way as other selectors. So the next two lines produce the same result. *.abc { color: blue; } .abc { color: blue; } CSS 2022.07.29
[CSS] Use of CSS / variables #css CSS Variables You can create and use variables in CSS. Variables allow you to change multiple values at once. Variable declaration --variable-name: value; When you define a variable, you can use it in the element that defined the variable and its child elements. To make it available everywhere: Define as root. Use of variables property: var( --variable-name ) example Basic Use the variabl.. CSS 2022.07.29
[CSS] CSS / inheritance #CSS inheritance CSS attributes are inherited, not inherited. Inheriting properties affects child elements. Non-inherited attributes do not affect child elements. Inheriting attributes For example, color is an inherited property. The color specified in the parent element is also applied to the child element. in short Lorem Ipsum At this time, not only Lorem but also Ipsum will be blue. Attribute.. CSS 2022.07.29
[CSS] CSS / Basics /! Important #css If CSS defines the same attribute multiple times, the value set later will be applied. To prevent later settings from being applied, add! Important after the attribute value. property: value !important; For example, next time the last set color value is blue, so ignore red and make the paragraph text color blue. p { color: red; } p { color: blue; } But next time there is a! Important in red.. CSS 2022.07.28
[CSS] CSS / Basics / Grammar #css grammar Below is the simplest CSS code. h1 { color: red } There are three words, h1, color and red, called selectors, attributes and values, respectively. Selector: Decide what to decorate. h1 means to decorate the h1 element. Property: Decide what shape to decorate. color means to decorate a color. Value: Determines how to decorate. Red means to make it red. In other words, the CSS code is.. CSS 2022.07.27
[CSS] How to apply CSS to HTML #css There are three ways to apply CSS to HTML. Each method has its strengths and weaknesses, so choose the one that works best for your situation. Inline Style Sheet How to put CSS code in the style property of an HTML tag. Internal Style Sheet How to put CSS code inside The tag is usually placed between and , but it can be placed anywhere in the HTML document. This method has the advantage tha.. CSS 2022.07.27
[CSS] table-layout / fixed table size css You can set the horizontal size of the table with the width property. Below is a simple table with a horizontal size of 500 pixels. HAHAHA Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. If the content in the table is long, keep the wrap size. However, in some sit.. CSS 2022.07.27
[CSS] Switching transition properties such as transition animation Transition is the process of applying an animation effect in different ways over a period of time. The default format is: transition: property duration timingfunction delay; transition property transition-property: Enter the properties that create the desired animation. (color, background-color, border-radius, position ....) transition-duration: Sets how many seconds the animation effect will be.. CSS 2022.07.25
[CSS] animation effect (@keyframes) animation is an effect that can change attributes over time. Used with @keyframes. animation property animation-name: The animation effect must be named and the command set in @keyframes will be executed. animation-duration: Sets how many seconds the animation effect will run, the time it takes to start and end. animation-delay: Sets whether the animation effect will be executed after a few seco.. CSS 2022.07.25