1.의미, 정의
💡
Cascading Style Sheet
Style sheet를 폭포수처럼 계속 떨어트리는 것을 의미함!!
Author style
User Style
Brower
순으로 떨어지는 것을 의미함!!
!important 는 쓰지 않는 것이 좋다!!
2. 선택자
💡
원하는 것을 다 고르는 것이다!!
Universal : *
type : Tag
ID : #id
Class : .class
state : :
Attribute : []
3. 스타일링
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS DEMO</title>
</head>
<body>
<ol>
<li id="special">First</li>
<li>Second</li>
</ol>
<h1 id = "special">Hello</h1>
<button>Button 1</button>
<button>Button 2</button>
<div class="red"><button>0</button></div>
<div class="blue"></div>
<a href= "naver.com">Naver</a>
<a href="googlenaver.com">Google</a>
<a>Empty</a>
</body>
</html>/* selector{
property : value;
} */
* {
color : green;
}
li {
color : blue;
}
li#special {
color:pink;
}
.red {
width : 100px;
height : 100px;
padding : 20px 20px 20px 20px;
margin : 20px;
border : 2px dashed red;
background : yellow;
}
button:hover{
color : red;
background : beige;
}
a[href^="naver"]{
color: purple;
}CSS Diner
You're about to learn CSS Selectors! Selectors are how you pick which element to apply styles to. Exhibit 1 - A CSS Rule p { margin-bottom: 12px; } Here, the "p" is the selector (selects all elements) and applies the margin-bottom style.
https://flukeout.github.io/
반응형
Uploaded by Notion2Tistory v1.1.0