이 내용은 modzilar developer 사이트에서 내용을 정리하기 위해 적었습니다.
내용은 원문 내용으로 기술 되었습니다.
정확한 정보는 해당 웹페이지 링크 를 참조 하세요.
what is css cascading style sheet
getting wtarted with css
how css is structedrd
how css works
Styling HTML elemets
Changing the default behavior of elements
list-style-type : none; property is a good property to look at MDN to see which values are supported.
Changing the default behavior of elements
so far we have styled elements based on their HTML elements names. The most common way to do this sit to add a classes to your HTML elements and target that class.
you can apply the class of special : this is syntax means "target any li element that has a class of special" IF you were to do this then you would no longer be able to apply the class to a span or another element by simply adding the class to it; you would have to add that element to the list of selectors
adding class
Stylling things based on their location in a document
th slect only an em elements - one inside a paragraph and the other inside a list iem. To select only an em that is nested inside an li element i can use a selector called the descendant combinator,which simply takes the form of a space between two other selectors
Styling things based on state
when we style a link we neddt to target th a element. this has diffeerent states depending on whether it tis unvisited, visited, being hoverd over, foucused via the keyboard, or in the processing of being clicked(activated). you can use css to target theese differents states - th css below styles unvisited links pink and visited links green.
In the live example below, you can ply with different vlaues for the various states of a link. i have added the rules above to it,
combining selectors and combinators
Appling css to HTML
<link rel="stylesheet" href="styles.css" /&th;
the href attribute of the link elements needs to reference a file on your file system.
External stylesheet and internal stylesheet and inline sytle
Selectors
A seletor tragets HTML to apply styles to content. We have already discovered a variety of selectors sin the Getting started with CSS tutorial. if css is not applying to content as-expected, your selector may not match the way you think it shoid match.
Specificity : you may encoutner scenarios where two selectors select the same html elements. The css language has rules to control which selector is stronger in the eveent of conflict. These reuls ar called cascade and specificity. latter styles replace conflicting styles that appear earlier in the stylesheet. this is the cascade rule.
in the case of our earlier example with the conflict between the class selector and the element selector, the class prevails, rendering red paragraph text. a class is rated as being more specific , as in having more specificity than the element selector, so its cancles the other conflicting style declaration
properties and values
- Propertics : these are human-readable identifiers that indicate which stylistic features you want to modify
- Vlaues : Each property is assigned a value
funtion : transform, background-image, color
@rules
css @rules provide instruction for what css should perform or how it should behave. @import is a another style sheet into css stylesheet
one common @rule that you are likely to encounter is @media, which is used to create media quries.
media quries let you adapt your site or app depending on the presnesce or value of various device characteristics and parameters.
Shorthands
background : -color, -image, -position, -repeat, -attachment
some propertics like font, backgorund, padding, border, margin are called shorthand properties. this is becasue shorthand properties set several values in a single line
Comments
CSS comments begin with /* and end with */.
WHite space
white space means actual spaces, tabs and new lines. just as broswers ignore white space in html, browsers ignore white space inside css.
How does CSS actually work?
About the DOM
a real DOM representation
브라우저는 HTML 파싱하고, DOM을 생성 한 후 CSS를 파싱합니다.,
what happens if a browser encounters CSS it doesn't understand?
오류값이 있으면 무시한다
Working with css
- font-family
- color
- border-bottom
- font-weight
- font-size
- text-decoration
- casecad and inheritance
- the aim of this lession is to develop your understanding of some of the most fundamental concepts css - the casecade, specificity, and inheritance - whiche control how css is applied to HTML and how conflicts are resolved.
- CSS selectors
- variety of css selectors available, allowing for fine-grained precision when selecting elements to style.
casecade : at a very simple level this means that the order of CSS rules matter; when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used
specificity : how the browser decides which rule applies if multiple rules have different selectors, but could still apply to the same element. It is basically a measure of how specific a selector's selection will be:
- An element selector is less specific
- a class selector is more specific. - so will get a higher score.
Inheritance : some css property values set on parent elements are inherited by their child elements and some aren't
Understanding inheritances
the color has applied to the direct children, but also the indirect children - the immediate child liss, and those inside the first nested list. we have then added a class of special to the second nested list and applied a different color to it.
상속제어하기
inherit :선택한 요소에 적용된 속성값을 부모 요소의 속성 값과 동일하게 설정 합니다
initial : 선택한 요소에 적용된 속성 값을 브라우저의 기본 스타일 시트에서 해당 요소의 해당 속성에 설정된 값과 동일하게 설정 합니다.
unset : 속성 natural 값으로 재설정 합니다.
모든 속성 값 재설정
CSS 속서 속성 all로 사용하면 이러한 속성 값 중 하나를 모든 속성에 한 번에 적용 할 수 있습니다. 스타일에 대한 변경 사항을 취소하여, 새로운 변경을 시작 하기 전에 알려진 시작 지점으로 돌아 갈수 있는 편리한 방법 입니다,