[전단 학습] css 부분 학습 노트, 다음날

3026 단어
css 색상 설정
  • 에는 세 가지 색상 설정 방법이 있습니다.
  • 사전 설정값입니다.바로 영문명으로 색을 쓰는 방법입니다. 이런 방법은 추천하지 않습니다.
  • 16진수 색상은 우리가 작업할 때 가장 자주 사용하는 색상 설정 방법입니다. 이 색상의 코드를 기억하지 않고 도구로 UI로 만든 그림 색상을 흡수하면 됩니다.
  • 또한 16진법의 쓰기 방법은 모든 자모를 소문자로 쓰도록 한다. 예를 들어 빨간색#ff0000[즉 #빨간색, 빨간색, 녹색, 파란색]을 사용하고 각 조의 색 문자가 같으면 약자로 #f00을 사용하지만 한 조가 같지 않아도 약자로 쓸 수 없다.
  • RGB 색상 설정(예: 빨간색RGB(255,0,0)도 자주 사용되지 않습니다.참고: 색상 설정 방법은 이전 브라우저에서 서로 다르게 지원되므로 일괄적으로 16진수로 설정하는 것이 좋습니다.


  • line-height 행 높이 설정
  • 줄 높이의 줄과 줄 사이의 거리.세 가지 설정 형식이 있는데,
  • 20px는 픽셀의 격식(일반 줄 높이는 실제 글씨체 픽셀보다 10 정도 크다)이다.
  • 2em,em는 현재 대상의 크기를 바탕으로 배수를 계산한다. 예를 들어 현재 대상의 크기가 10px이면 2em=20px이다.
  • 백분율.


  • text-align 텍스트 정렬 설정
  • text-align는 텍스트 내용을 다음과 같이 정렬할 수 있습니다. left ( ),center( ),right( )
  • text-indent 첫 줄 들여쓰기
  • text-indent는 텍스트를 자동으로 첫 줄로 줄일 수 있습니다.흔히 사용하는 방법은 2em 즉 첫 줄에서 두 글자 크기로 축소하는 것이다.물론 특수한 스타일 수요가 있으면 다시 설정할 수 있고 픽셀과 백분율의 설정 방식도 있다.

  • 라벨의 의미화
  • 좋은 html 구조는 사이트를 검색엔진에 쉽게 수록할 수 있다
  • 핵심: 가장 적합한 곳에 가장 적합한 라벨
  • 을 사용한다.
  • 어떻게 판단하는가: CSS 스타일을 없애도 뚜렷한 페이지 구조가 있을 수 있다.
  • 팁:
  • 의미를 중시하는 부분은 의미가 있는 라벨을 많이 사용하고 이런 단순한 라벨을 적게 사용한다.
  • 의미 라벨과 비어의를 사용할 수 있는 곳이 있다면 의미 라벨을 우선적으로 사용
  • 순수한 스타일의 라벨을 적게 사용하고 스타일은 모두 css에 맡깁니다.

  • css 복합 선택기
  • 교차 선택기
  • 형식: div.class{ : }( . )
  • 기...또../그리고위의 예는 이 선택기의 의미를 설명했다. 선택은div 탭 클래스 이름이고class와 같다.일반적으로 비교적 적게 쓴다.
  • 여기 주의해야 돼요. 쓰니까.연결하기 때문에 클래스 이름을 연결할 때 클래스 이름 성명 앞의 그 점을 생략할 수 있습니다. 테스트된 집합 선택기는 탭 연결 클래스 이름만 적용됩니다.

  • 통합 선택기
  • 형식: div,p,.class,#id{ : }( , )
  • 여러 개 또는 모든 스타일이 같으면 병렬 선택기를 사용할 수 있습니다.모든 형식의 선택기를 연결할 수 있다는 뜻으로 이해할 수 있으며, 연결된 후에 그들이 공동으로 설정할 수 있는 스타일은 일반적으로 집단 성명에 사용된다.

  • 후대 선택기
  • 형식: .class ul li{ : }( )
  • 후대 선택기는 끼워 넣은 라벨을 선택하고 층층이 아래로 찾는 데 자주 사용된다.실제 작업에서 많은 것들이 라벨을 끼워 넣기 때문에 이것은 비교적 자주 사용하는 선택기이다.
  • 왜 클래스 이름을 최고급 원소명으로 하는지는 두 개의 완전히 같은 플러그인 구조가 나타날 수 있기 때문에 이럴 때 클래스 이름을 사용하면 그들을 구분할 수 있다.
  • 이론적으로 끼워 넣은 라벨이라면 아무리 깊어도 후대 선택기를 통해 찾을 수 있다.
  • 후대 선택기의 일치 방식은 왼쪽에서 오른쪽이 아니라 코드의 쓰기 순서일 뿐입니다.실제로 컴퓨터는 자원 소모를 줄이기 위해 안에서 밖으로 일치하는 오른쪽에서 왼쪽이다.

  • 서브원소 선택기
  • 형식: .class>li{ : }( > )
  • 왜 하위 요소 선택기가 나타났는지 이해할 수 있다.
  • 만약에 리 라벨을 찾는다면 후대 선택기로 계속 심층적으로 찾을 수 있지만 다음 원소만 찾고 싶다면?너는 쓸 수밖에 없어.클라스리, 이럴 때 문제가 생겼어.이 검색 범위는 너무 넓어서 후손의 모든 리 라벨을 찾을 수 있습니다. (만약 계속 아래로 찾을 수 없다면, 당신은 두 번째 단계의 리 라벨을 찾을 수 없습니다.)하위 요소 선택기는 이런 상황에 대응하기 위해서다.네가 사용하면.class > li를 찾을 때, 직접적인 다음 층만 찾고, 더 깊은 층은 무시합니다.통속적으로 말하면 아들만 찾고 밑으로는 상관하지 않는다는 것이다.
  • 주의: css가 계승성을 가지고 있기 때문입니다.그래서 다음 레벨 라벨만 설정해도 계승성은 더욱 내부적으로도 계승할 수 있는 스타일을 적용할 수 있다.따라서 이것은 일반적으로 다른 방식으로 스타일을 설정한 다음에 하위 선택기로 스타일을 겹쳐 놓으면 속성이 계승되지 않는다.



  • 좋은 웹페이지 즐겨찾기