[Powered by Google Translate] [CSS]를 [조셉 옹 - 하버드 대학교] [이 CS50입니다. - CS50.TV] 

오늘 우리는 CSS에 대해 얘기하거나 스타일 시트를 캐스 케이 딩 할 수 있습니다. 

그래서 CSS는 정확히 무엇입니까? 음, 2 부분으로 용어 CSS를 중단하자 : 캐스 케이 딩 스타일 시트. 폭포가 조금 더 복잡하며, 그것은 우리가 다른 비디오에서 다룰 뭔가. 그러나 우선, 스타일 시트 CSS가 무엇을 매우 많이 힌트. 그것은 웹 페이지의 HTML에 스타일을 추가 웹 페이지가 심미적으로 보이는 방법을 변경. 이 페이지에있는 텍스트의 글꼴에서 콘텐츠의 위치에 이르기까지 모든 것을 의미 둥근 상자의 모서리를 만들거나 텍스트에 그림자를 추가하는 등 다른 멋진 것들. 상황이 화면에 애니메이션을 만드는 것처럼 당신은 미친 일을 할 수 있습니다. 

그래서 우리는 HTML과 CSS를 어떻게 사용합니까? 난 그냥 쓴이 불쌍한 보이는 사이트를보십시오. 롭 지금이 사이트를보고 있다면, 그는 아마도 뭔가 같은 말 것 "와우! 내 소개 끔찍한 보인다. 요셉, 당신은 끔찍한 디자이너입니다." "기본 타임즈 글꼴을 사용하면? 헬 베티 훨씬 낫다." 

그래서 롭이 원하는 스타일을 적용하는 가장 간단한 방법이 될 수 있을까요? 사람들의 가장 확실한 방법은 많은 초기 CSS를 작성 요소 자체에 우리는 스타일 선언이 바로 부르는 넣어했다 HTML 스타일 특성을 사용하여. 스타일 선언은 단순히 HTML 요소의 CSS 속성으로 구성되어 우리가 변경할 수 끝에 속성과 세미콜론의 새 값 뒤에 콜론. 예를 들어,하자 롭 서문 주위에 검은 색 테두리를 원한다 말한다. 우리는 여기 처음 롭의 DIV에 스타일 속성을 넣어 다음 따옴표 안에 CSS 선언을 넣어 : "국경 : 1 픽셀 검은 색;" 1 픽셀 테두리의 폭을 의미, 고체, 테두리 스타일을 말합니다 및 끝 색상은 테두리의 색상을 결정합니다. 

우리는 요소에 여러 스타일을 원하는 경우에, 순서 이러한 선언을 작성합니다. 예를 들어, 롭 파란색 배경 헬 베티에서 자신의 헤더 텍스트를 원하는 경우 그리고 텍스트 주위 더 많은 공간, 우리는이 작업을 수행 할 수 있습니다 : 스타일 = "글꼴 - 가족 : 돋움; 배경 - 색상 : 블루, 패딩 : 5PX;" 마지막 세미콜론은 실제로 옵션이지만, 사람들은 일반적으로 일관성을 위하여 그것을에서 보관하십시오. 

우리는 냉각기 및 더 복잡한 CSS 속성 중 일부를 설명 절약 할 수 다른 비디오. 당신이 마음에서 무언가가있는 경우에, 단지 CSS 다음 원하는 효과를 봤어 아마 당신은 꽤 좋은 결과를 줄 것이다. 좋은 점은 CSS가 꽤 넓은 것입니다 당신이 원하는 아무거나가있는 경우에 따라서 확률은 - 이유에서 - CSS는 아마 그것을 할 수 있습니다. 우리는 인라인 스타일을 유행에 따라 디자인의이 종류를 호출합니다. 요소의 스타일은 시작 태그와 일치 잘입니다. 

정말 구성 할 수 싶은 사람을위한, 당신은이 모든 모습을 혼란에 올리게 조금 받기 시작 수 있습니다. 당신은 페이지의 모든 요소에 대해이 작업을 수행해야하는 경우, 상상 플러스 이제 HTML과 CSS는 모든 혼합하고 복잡합니다. 총, 오른쪽? 이 문제를 해결하려면, 사람들은 결국 자신의 HTML 마크 업을 분리에 잡기 시작 CSS 선택기라는 것을 사용하여 CSS 스타일링에서. CSS 선택기는 선언이 적용되는 요소를 선택하는 데 사용됩니다. CSS 선언의 목록과 함께 선택은 종종 CSS 규칙이라고합니다. 이 규칙은 열고 닫는 HTML 스타일 태그 사이에 넣어 될 것이다 종종 문서의 헤드있다. 

그것은 예제를 볼 훨씬 쉽게 그래서 간단한 CSS 규칙을 생성하여 시작하자. 첫째,의 우리의 HTML의 head 섹션에서 스타일 태그를 넣을 수 있습니다. 다음 선택. 우리는 간단한 선택기 중 하나, 해시 기호를 사용하여 시작합니다 이는 자사의 ID 속성으로 HTML 요소를 선택합니다. 이 경우에 우리는 롭의 도입을 나타내는 DIV를 선택합니다 DIV의 ID, 롭 다음 해시 기호를 입력하여. 이제 선언 할 수는 없습니다. 우리는 열기 및 닫기 중괄호를 추가하고 롭의 DIV에 우리의 이전의 인라인 선언을 이동 이러한 괄호의 안쪽에, 새로 고침, 그리고, 차가운, 롭의 소개는 여전히 주위에 검은 색 테두리를 뺀 지저분한 인라인 추함 있습니다. 

이제, 우리가 롭의 소개의 H1 내부를 선택하고 싶다면? 당신이 "의 그것에 ID를 넣고 우리의 이전 스타일을 이동하자."생각하는 그것은 작동하지만, CSS는 요소를 선택시키는 다른 방법이있다 우리는 콤비가 단순한 선택기를 섞어 부르는 사용하여. 예를 들어, 공백 문자는 콤비로 사용할 수 있습니다 다른 선택의 안에 살고있는 1 셀렉터의 모든 인스턴스를 지정합니다. 그게 실제보다 훨씬 더 복잡하게 들린다. 다음은 그 예이다. 우리는 #, 롭 공간을 추가하고, H1으로 따라 입력합니다 또 다른 간단한 선택기 요소의 유형을 선택하는 태그 선택기를 호출 div를 또는 단락 등. 공간은 모든 CSS 선언을 적용, 우리의 2 간단한 선택기를 결합 및 ID = "강탈"로 요소의 내부에 살고 H1 태그에 중괄호. 그냥 작동을 설득, I, 흰색, 새로 고침,에 글꼴 색상을 변경합니다 그리고, 봐 롭의 헤더는 이제 흰색입니다. 

이 작품의 모든 규칙을 대신 인라인 스타일을 사용하여 해당을 보여 간다 우리는 많은 청소기 코드를 얻을 수 있습니다. 이 스타일 블록이 시작하는 경우 사실, 조금 커지고 난 완전히 다른 파일에 이러한 스타일을 떠날 수있다. 

이 문서에 CSS와 같은 새로운 파일을 포함하도록 그냥 HTML의 링크 태그를 사용합니다. 여기에서 나는, 나는 외부 스타일 시트에 연결 해요 상대 속성을 말하고 내 href 속성으로 파일의 경로를 지정합니다. 지금 내 HTML 태그와 CSS는 완전히 별도의 파일로 잘 구성되어 있습니다 이는 거의 항상 디자이너가 HTML과 CSS 작업을 선호하는 방법입니다. 

당신이 궁금해하는 경우, 간단한 선택기 ID 선택기를 포함 우리가 방금 본 것과 같은 및 태그 선택기 뿐만 아니라 클래스 특정 클래스 요소를 선택하기위한 선택자, 형 같은 다른 속성에 의해 요소를 선택하기위한 속성 선택자 = "라디오" 라디오 버튼 입력, 같은 pseudoselectors에 대한 망설임과 집중 상호 작용 요소 발생을 통해 마우스 조작 좋아하면 스타일을 지정합니다. 

일반적인 콤비는 모든 자녀들을 위해 공백을 포함 쉼표는 선택기를 구별하기. 발생할 수있는 사람은 오직 직접 아이들을위한 화살표를 포함 요소 이후에 발생하는 모든 형제 자매에 대한 물결, 및 요소 바로 뒤에 오는 1 형제의 더하기 기호. 

이 선택기와 콤비를 결합하여, 당신은 당신이 특정 웹 페이지에 달성 할 수있는 스타일의 범위를 확장 할 수 있습니다 더 효율적으로 CSS 작성합니다. 당신이 저를 여기에 입력하십시오 CSS 라인의 단지 몇과 함께, 나는 빨리 이런 식으로 뭔가 같은 표정이 뭔가를 할 수 있습니다. 

나는 조셉있어, 이것은 CS50입니다. 

[CS50.TV] 

어, 어디서부터 시작합니까? [웃음] 그래 - 내가없이 그렇게 할 수 있습니다. 추가 - 내가 그 문구를 변경할 수 있습니다. 우. 미안 해요.