Using inspect element for CSS styles

– [Voiceover] 여기 웹 페이지를 확인하고 있습니다 한 학생이 Joan of Arc에 대해 만들었습니다

그리고 그것은 정말 잘 생긴 웹 페이지입니다 난 정말 좋아 그래서 나는 CSS 스타일 보이는 방식으로 보이게합니다 자, 여기에 코드가 있습니다 그래서 나는 그것을 통해서 볼 수 있었다

이런 식으로 느낌을 갖자 하지만 "요소 검사"를 사용할 수도 있습니다 더 빨리 파악할 수 있습니다 보여 드리죠 이 텍스트에 대해 알고 싶습니다

그리고 그것이 보이는 것처럼 보이게 만드는 것은 무엇인가 나는 그것을 오른쪽 클릭 할 것이고, "Inspect Element (요소 검사)"를 클릭하면이 항목이 나타날 때까지 기다립니다 그러면 텍스트가 강조 표시됩니다 이것은 여기 '<p>'태그이며 클래스 이름을 가지고 있습니다 이제 저는이 "스타일"패널을 볼 수 있습니다

이것은 모든 CSS 특정 요소가 나타납니다 그리고 우리는 모든 다른 규칙을 볼 수 있습니다 그것에 적용되는 순서 및 적용되는 순서 따라서이 '제목'규칙은 그것은 중앙 정렬 및 대담한, 우리는 그것을 볼 수 있습니다 그리고이 다른 규칙, 'i1'은 그것을 만들고 있습니다

그래서 9m 글꼴 크기 그리고 26 불투명 좋아, 좋아, 어쩌면 내가 생각할지도 몰라 더 불투명해야합니다

좀 더 읽기 쉽도록 나는 실제로 여기에 들어갈 수있다 그걸 가지고 놀고, 그 모습을 봅니다 그러면 미리보기가 업데이트됩니다 실제로 코드를 업데이트하는 것이 아닙니다 보이는대로 업데이트하는 중입니다

지금 브라우저에서 그들이 코드를 업데이트하기를 원한다면, 나는 그들에게 말해야한다 "이봐, 왜 이걸 대신 해보지 그래? "나는 이것이 더 읽기 쉬울 것이라고 생각한다" 그래서 나는 여기서이 값들을 가지고 놀 수 있습니다 새로운 속성을 추가 할 수도 있습니다

아, 그거 큰데 그래서 만약 내가 다른 색상이어야한다고 생각한다면, 나는 들어가서 'color'라고 말할 수 있습니다 그것은 나를 데려다 줄 무리를 준다 또는 16 진수로 쓸 수 있습니다 그리고 나서 나는 작은 색상 선택기를 얻을 수 있습니다

그리고 나는이 녹색을 정말로 좋아한다고 말한다 그래서 나는 정말 쉽게 놀 수 있습니다 그들이 어떻게 생겼는지 보아라 언제 이것이 유용할까요? CSS에 대해 궁금하다면 유용합니다 다른 사람의 웹 페이지 너는 이해하려고 노력하고있어

어떻게 그들이 어떤 특별한 효과를 얻었는지 일하는 경우에도 유용합니다 어쩌면 웹 페이지 디자인에 HTML에 대한 액세스 권한이 없습니다 들어가서 CSS를 약간 변경하고, 그런 다음 제안 사항을 전달하십시오 누구든지 HTML을 변경할 수 있습니다

그리고 그것은 또한 단지 재미 있습니다 다른 사람들의 웹 페이지를 엉망으로 만든다