CSS div span Specificity

1. CSS link rel

Cascading Style Sheet으로 Html의 스타일을 별도 요소로 분리합니다.

ㄴ link rel을 통해 원하는 시트와 연결합니다.

selectors를 통해 모든 요소에 적용한다하여 전역 속성 적용합니다.

CSS는 세미 콜론으로 속성 간 구분, 중괄호 안에 프로퍼티를 나열합니다.

 

  <link rel="stylesheet" href="master.css">

# h1요소 : 코드블럭에 blue값 할당
# h2요소 : 코드블럭에 red값 할당, 배경색 aliceblue;
h1{
  color:blue;
}
h2{
  color:red;
  background-color: aliceblue;
}

Google Hex Color picker : 색상 검색기

 

2. CSS div span

CSS에서는 앞에 코딩하느냐 뒤에 코딩하느냐의 순서가 중요하지 않고 특정성(specificity)를 가지는 특정 계층이 있어서 무엇을 덮어쓸 지가 이미 계층 구조로 나뉘어져 있습니다. 코드 자체에서 다른 호출을 덮어쓸 수 있는 또 하나의 호출이 있다는 것을 늘 명심하고 작업합니다.

> 일반적으로 더 작은 스케일이 더 큰 스테일을 오버라이트합니다.

> css의 border는 작동 시 style, width, color를 모두 and조건으로 필요로 합니다.

> div 내부에 있는 span과 div외부에 있는 값이 다르게 적용될 수 있게 합니다.

body{
  background-color: cornflowerblue;
}

div{
  background-color: aliceblue;
  border-color:orange;
  border-width: 10px;
  border-style: dashed;
}

span{
  background-color: red;
}

.myclass{color:orange} : 무수한 반복- 단락나누면서
#one{color:aliceblue} : id 특정 요소 고유!

body{
  font-family: Tahomaa;
  font-size:90%
}
1em == current font size 16px
picels/16=1em