[Powered by Google Translate] [CSS]는 [요셉 옹 - 하버드 대학교 (Harvard University)] [이 CS50입니다. - CS50.TV] 

오늘 우리는 CSS에 대해 얘기하거나 규약에서 캐스 케이 딩 스타일 시트를됩니다. 

그래서 CSS가 정확히 무엇입니까? 음,이 부분에 아래 용어 CSS를 깨 보자 : 캐스 케이 딩 및 스타일 시트. 캐스 케이 딩은 좀 더 복잡하고, 우리가 다른 동영상에서 다룰 것이다 겠죠. 그러나 우선, 스타일 시트 CSS는 무엇을 아주 많이 힌트를줍니다. 그것은 웹 페이지의 HTML에 스타일을 추가 웹 페이지가 심미적 모습을 변화. 이 페이지에서 텍스트의 글꼴에서 컨텐츠의 위치에 이르기까지를 의미 둥근 상자의 모서리를 만들거나 텍스트에 그림자를 추가하는 등 다른 좋은 점이 있습니다. 일 화면에 애니메이션 할 하듯이 미친 짓을 할 수 있습니다. 

그래서 우리는 HTML과 CSS를 어떻게 사용합니까? 방금 쓴이 불쌍한 보이는 사이트를보십시오. 롭 지금이 사이트를보고 있다면, 그는 아마 같은 걸 말하고 싶지만 "와! 내 소개 끔찍. 요셉, 당신이 나쁜 디자이너 야." "기본 타임즈 글꼴을 사용하면? Helvetica 등이 아주 좋아합니다." 

그래서 롭 원하는 스타일을 적용 할 수있는 가장 간단한 방법이 될 수 있을까요? 사람들의 가장 눈에 띄는 방법 많은 초기 CSS를 작성 요소 자체에 우리가 스타일 선언 바로 부르는 넣어하는 것이 었습니다 HTML 스타일 특성을 사용합니다. 스타일 선언은 단순히 HTML 요소의 CSS 속성으로 구성되어 있습니다 우리는 변경하고자하는 끝의 재산과 세미콜론의 새 값으로 다음에 콜론이 나타납니다. 예를 들어, 우선은 남편이 자신의 소개를 주위에 검은 색 테두리를 원해요. 여기서 먼저 롭의 사업부에 스타일 속성을 넣어 그런 다음 큰 따옴표 안에 CSS 선언을 넣어 : "국경 : 1 x 1 픽셀 단단한 검은 색;" 1 픽셀은 테두리의 폭을 나타냅니다, 고체는 테두리의 스타일을 의미합니다 그리고 끝 부분에있는 색상은 테두리의 색상이 무엇인지를 결정합니다. 

우리가 요소에 여러 스타일을하려는 경우 순서에서이 선언을 작성합니다. 예를 들어, 롭 파란색 배경으로 Helvetica 등에서 자신의 헤더 텍스트를 원하는 경우 과 텍스트 주위에 더 많은 공간, 우리는이 작업을 수행 할 수 있습니다 : 스타일 = "글꼴 - 가족 : Helvetica 등, 배경 - 색상 : 블루, 패딩 : 5px;" 마지막 세미콜론은 실제로 선택 사항입니다, 그런데 사람들은 보통 일관성을 위하여를 위해하도록하겠습니다. 

우리는 냉각기 및 더 복잡한 CSS 속성 중 일부를 설명 절약 할 수 다른 동영상에 대한. 당신이 마음에 뭔가가 있으면 CSS 다음 원하는 효과를 Google로 검색 아마도 당신에게 아주 좋은 결과를 제공합니다. 좋은 점은, CSS 아주 광범위 때문입니다 당신이 원하는 무엇이든이있을 경우 매우 확률이 있습니다 - 이유에서 - CSS 아마도 작업을 수행 할 수 있습니다. 우리는 인라인 스타일을 스타일을 이런 종류의를 호출합니다. 요소 스타일은 시작 태그에 맞춰, 음입니다. 

정말 구성 할 원하는 사람들을 위해, 이 모든 모습을 혼란에 성가 셨나 약간을 시작 할 수 있습니다. 이 페이지에있는 모든 요소에이 일을 할 수 밖에없는 경우, 상상해 플러스 지금 HTML과 CSS는 모두 함유하고 복잡합니다. 총, 맞죠? 이 문제를 해결하려면, 사람들은 결국 자신의 HTML 마크 업을 분리에 잡기 시작 CSS 선택자라는 것을 사용하여 자신의 CSS 스타일링에서. CSS 선택자이 선언을 적용 할 요소를 선택하는 데 사용됩니다. CSS 선언의 목록과 결합 선택기는 종종 CSS 규칙이라고합니다. 이 규칙은 열고 닫는 HTML 스타일 태그 사이에 넣어 될 종종 문서의 머리 인치 

그것은 예를 볼 훨씬 쉽게 그래서 간단한 CSS 규칙을 생성하여 시작하자. 첫째,이 우리의 HTML의 헤드 섹션에 스타일 태그를 넣어 보자. 다음, 선택 도구입니다. 우리는 간단한 선택자 중 하나 인 해시 기호를 사용하여 시작됩니다 어떤은 ID 속성으로 HTML 요소를 선택합니다. 이 경우에서 우리는 로브의 소개를 나타냅니다 div를 선택합니다 div는의 ID, 롭 다음 해시 기호를 입력하여. 이제 선언. 우리는 열고 닫는 괄호를 추가하고 로브의 사업부에 우리의 이전 인라인 선언을 이동 이 괄호의 안쪽, 새로 고침, 와, 멋진, 롭 소개 아직 주위에 검은 색 테두리 마이너스 혼란 인라인면을 갖추고 있습니다. 

이제 우리가 롭의 소개의 H1 내부를 선택했다면? 당신은 "가 거기에 ID를 넣어 그런 다음 이전 스타일을 이동하세요."생각할 수 그 작동하지만 CSS는 요소를 선택 해줘서 다른 방법이 있습니다 우리가 연결자 간단한 선택자를 섞어 부르는 사용하는 것입니다. 예를 들어, 공백 문자는 연결자으로 사용할 수 있습니다 다른 선택의 안쪽에 살고있는 한 선택기의 모든 인스턴스를 지정합니다. 그게 실제보다 훨씬 더 복잡한 것 같습니다. 다음은 예입니다. 우리는 #, 털 공간을 추가하고 H1으로 따라 입력합니다 또 다른 간단한 선택은 요소의 유형을 선택 태그 선택기를 호출 divs 또는 단락처럼. 공간은 모든 CSS 선언을 적용, 우리의 두 단일 선택을 결합 그리고 id = "을 강도"로 요소의 내부에 살고 H1 태그에 중괄호. 그냥 작동을 설득, 나는 흰색, 새로 고침에 글꼴 색상을 변경합니다 그리고, 봐, 롭 헤더 지금은 흰색입니다. 

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

이 문서에 CSS로이 새 파일을 포함 시키려면 그냥 HTML의 링크 태그를 사용합니다. 여기 내 말은, 난 외부 스타일 시트에 연결하는 건 rel 속성을있는 그대로 말한 거예요 내 href 속성으로 파일의 경로를 지정. 지금 내 HTML 마크 업 및 CSS는 완전히 별도의 파일에 잘 조직되어 이는 거의 항상 디자이너가 HTML과 CSS 작업을 선호하는 방법입니다. 

당신이 궁금해하는 경우, 단일 선택은 ID 선택자을 포함 우리가 본 것과 같은 및 태그 선택자 뿐만 아니라 클래스 특정 클래스와 요소를 선택하는 선택자, 유형과 같은 다른 속성에 의해 요소를 선택하기위한 속성 선택자 = "라디오" 라디오 버튼 입력과 같은 pseudoselectors에 마우스를 올려 놓고 초점을 상호 작용 요소가 발생할 위로 마우스를 좋아하면 스타일을 지정하십시오. 

일반적인 연결자은 모든 어린이를위한 공백을 포함 와 쉼표는 선택자을 구분합니다. 당신이 발생할 수있는 기타 만 직접 아이들을위한 화살표를 포함 요소 이후에 발생하는 모든 형제 자매의 물결, 및 요소 바로 뒤에 오는 한 형제의 더하기 기호. 

이 선택자 및 연결자를 결합함으로써, 당신은 특정 웹 페이지에 달성 할 수 스타일링의 범위를 확장 할 수 있습니다 보다 효율적으로 CSS 써주세요. 당신이 날 여기에 입력 표시 CSS의 라인의 단지 몇로, 난 빠르게과 같이 생긴 모양과 같이 할 수 있습니다. 

나는 요셉, 그리고이 CS50입니다. 

[CS50.TV] 

음, 어디서부터 시작합니까? [웃음] 그래 - 나 없이는 보자. 추가 - 저 문구를 변경 보자. 우. 미안 해요.