브라우저에서 사용자 스타일링을위한 CSS 이해 사용자 CSS 재정의를 작성해야합니다 (잘못된

웹 브라우저에서 특정 사이트의 모양을 구체적으로 변경하고 싶습니다. 이 사이트는 CSS를 사용하므로 사용자 CSS 재정의를 작성해야합니다 (잘못된 경우 수정하십시오).

내 브라우저는 Firefox (내가 무언가를 써야한다고 생각합니다 chrome/userContent.css)와 Chrome ( User\ StyleSheets/Custom.css)입니다.

특정 변경은 /unix//의 모든 페이지에서 배경 패턴 (어두운 점)을 제거하는 것 입니다. 그러나 더 일반적으로, 낚시하는 법을 가르쳐주세요. 어떤 매개 변수를 변경하고 어떻게 CSS에서이 변경을 작성합니까?

답변

Firefox에 대해서는 친숙한 대화 만 할 수 있습니다. 기본 브라우저이기 때문입니다. 나는 당신의 ‘물고기를 가르쳐’요청을 이행하기 위해 여기에 일반적인 것들을 유지하려고 노력할 것입니다. 이를 위해 두 가지 예, 귀하와 다른 실제 수업이 포함 된 예를 포함하겠습니다. 먼저 사용자 CSS를보다 쉽게 만들 수있는 몇 가지 도구가 제공됩니다.

최신 Firefox로 업데이트하십시오. 최신 버전 중 일부에는 웹 사이트 검사기 도구가 확장되어 있으므로 원할 것입니다.
선택 사항 : Firebug 확장 설치 훨씬 강력한 사이트 검사기 도구를 제공 을 . (개인적으로, 사용자 CSS를 만들기 위해 Firebug를 사용하지 않지만 완전성을 위해 여기에 언급을 포함시킵니다)
Stylish 확장을 설치하십시오 . 이것은 사용자 CSS 작성을 크게 단순화하는 사용자 CSS 중심 확장입니다.

이제 실제로 무언가를 작성하십시오. 계속 진행하기 전에 HTML 및 CSS에 대한 기본 지식이 있어야합니다. W3Schools에는 HTML 및 CSS 의 기본 구조와 구문에 익숙해 지도록 적절한 자습서가 있습니다 . 이 답변을 위해 초보자가 예제를 달성 할 수 있도록 충분한 정보를 제공하겠습니다.

페이지로 이동하십시오. (귀하의 경우 /unix// )
조작하려는 요소를 마우스 오른쪽 버튼으로 클릭하십시오. (배경이 전체 페이지에 영향을 미치기 때문에이 경우 페이지의 거의 모든 곳에서)
팝업 메뉴에서 ‘요소 검사’를 선택하십시오. 이것은 Firefox의 통합 검사 도구를 사용하지만 여기서는 Firebug를 다루지 않지만 비슷한 창과 기능을 가지고 있습니다.
Firefox 창의 하단과 측면에 패널이 열립니다. 하단에는 HTML이 표시됩니다. 오른쪽에는 선택한 페이지 요소에 대한 CSS 규칙이 표시됩니다 (마우스 오른쪽 버튼으로 클릭 한 것임). 맨 아래에서 다른 요소를 클릭하여 탐색하십시오. 페이지는 요소 트리로 구성되며 트리의 각 노드를 축소하거나 확장 할 수 있습니다. 요소를 클릭하면 선택한 요소가 페이지 자체에서 강조 표시됩니다.
일반적으로이 시점에서 조작하려는 요소와 부모 요소 (트리에 해당 요소가 포함 된 항목)와 함께 검사하려는 경우가 있습니다. 실제로 조작해야 할 요소를 식별하십시오. 예를 들어이 페이지의 답변을 엉망으로 만들면 답변 텍스트가 포함 된 <p> 요소로 시작하지만 텍스트와 같은 모든 내용을 포함 시키려고합니다. / down 투표 화살표, 포스터 정보, 공유 / 편집 / 플래그 링크 등. 따라서 ID가 “answer-####”이고 클래스가 <div> 태그 인 몇 가지 수준으로 이동합니다. “대답”응답의 모든 창 구성 요소를 포함하는 요소입니다. 그것을 클릭하면 웹 페이지의 해당 부분이 강조 표시됩니다. (이 경우 페이지의 배경은 <body> 태그 내 에서 상단 가까이에 있습니다 . HTML 상단으로 스크롤하여 <body> 태그를 클릭하십시오.)
다음으로 조작하려는이 요소의 CSS 속성을 식별해야합니다. 오른쪽의 CSS를보고 변경하려는 속성을 찾으십시오. 개인적으로 저는 CSS를 처음 접하게되었으므로이 시점에서 종종 ‘css’+ 속성 이름과 속성에 대해 자세히 알아볼 것입니다. 우리가 SE 답변을보고있는 나의 예를 계속하면서, 답변 주위의 여백을 변경하고 싶다고합시다. all.css 파일에는 margin 속성이 0px로 설정되어 있지만 분명히 이러한 요소 주위에 여백이 있습니다. 일부 인터넷 검색은 항목 주위의 여백에 영향을 줄 수 있으므로 패딩 속성을 찾도록 가르쳐줍니다. 물론 패딩과 관련하여 패딩과 관련된 두 가지 속성 인 패딩-바닥과 패딩-위가 있습니다.. (특정 문제에 대한, 당신은 CSS 속성에서 ‘배경’에 대한 모습 있도록, 배경 이미지를 찾고 있습니다. 당신은 볼 ‘배경’속성 상단을. 그것은 그 페이지의 본문 요소에 적용됩니다. 인터넷 검색을 ” css background property “ 는 해당 속성의 작동 방식을 배우고 다양한 수정 자와 함께 이미지에 대한 색상 또는 URL을 포함 할 수 있음을 보여줍니다. 배경 이미지 속성의 작동 방식을 찾기 위해 비트를 탐색 한 후 유용한 정보, 기본값은 ‘none’ 입니다. 배경 이미지를 기본값으로 되돌리려면 해당 정보가 필요합니다.)
이제 우리는 스타일리쉬를 사용합니다. Stylish가없는 대안은 답변에 게시 한 파일을 편집하는 것입니다. 스타일은 많은 사이트의 사용자 CSS를 쉽게 관리 할 수있게합니다. 스타일러스는 Firefox 창에 작은 아이콘을 추가하고 클릭하여 “새 스타일 작성”-> “(이 사이트) .com”으로 이동하십시오. 스타일에 이름과 태그 (선택 사항)를 지정하십시오. 이 스타일을 Superuser.com 또는 Stackexchange.com 등에 적용되는 스타일로 구별 할 수 있습니다.이 창은이 도메인에 대해서만 CSS를 변경할 수있는 템플릿을 제공합니다. 특정 URL에 대한 CSS를 변경해야하는 경우 모든 사이트에 적용되는 CSS를 작성하려면 스타일 메뉴에서 적절한 항목을 선택하기 만하면 빈 스타일을 얻을 수 있습니다.
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {

}
```
@ -moz-document 블록에 넣은 것은 괄호 안에있는 도메인 에만 적용 됩니다 . 위의 굵게 표시된 항목을 참조하십시오. 답변의 패딩을 변경하려면 텍스트 상자를 다음과 같이 업데이트하십시오.
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {
    .answer {
        padding-bottom:0px;
        padding-top:0px;
    }
}
```
CSS, 우리가 처음 선택하고 모르는 사람이 분해 클래스를 (우리가 ID에 의해 선택 된 경우 시작시 ERGO에 “.”가는 것은., 우리는 “#”을 넣어 것있다.) 대답을 (그래서 ‘답변’). 그런 다음 중괄호가있는 블록을 열어 변경할 항목의 속성을 나열합니다. 먼저 padding-bottom을 변경 하고 0 픽셀로 설정합니다 . 그런 다음 padding-top에 대해서도 동일하게 수행합니다 . 각 속성과 값은 세미콜론으로 끝납니다. 그런 다음 중괄호로 블록을 닫습니다. (유닉스 예제에서 다음을 수행하십시오.
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none;
    }
}
```
여기서는 unix.stackexchange.com 도메인에서 작업하고 있습니다. “body”요소를 선택하고 있습니다 (HTML 요소를 선택할 때 CSS 선택기 인 경우 # 또는 .s 필요 없음). 배경을 없음으로 설정하고 있습니다.)
스타일 편집 창 하단의 버튼에주의를 기울입니다. “미리보기”는 사용자가 입력 한 변경 사항을 제정하므로 변경 사항을 실제로 볼 수 있습니다. “저장”은 변경 사항을 저장합니다. “취소”는 분명합니다. 수행중인 거의 모든 사용자 CSS 변경의 경우 미리보기를 클릭하여 변경이 원하는 방식으로 작동했는지 확인해야합니다. 두 예에서 모두 작동하지 않는 것을 볼 수 있습니다. 이것에 대한 중요한 이유가 있습니다.
CSS에는 사용자 CSS와 작성자 CSS 및 브라우저 CSS를 처리하는 방법을 결정하기위한 특정 우선 순위 계층이 있습니다. 일반적으로 페이지 작성자가 작성하고 해당 페이지의 여러 요소에 대한 규칙을 포함하는 페이지에 대한 CSS가 있습니다. 작성자가 규칙을 정의하지 않고 사용자 CSS에있는 경우 브라우저에서이를 사용합니다. 둘 중 어느 것도 해당 요소에 대해 CSS를 정의하지 않은 경우 브라우저는 해당 요소에서 자체 기본 CSS 규칙을 사용합니다. 여기에 가중치 계층이 있습니다 (저자> 사용자> 브라우저). 세 가지 모두에 무언가가 정의되어 있으면 더 높은 가중치의 CSS가 이기고 CSS가 적용됩니다. 가중치가 높은 CSS를 가져 와서 가중치가 높은 CSS를 재정의하는 방법이 있으며이를 중요하게 지정하면됩니다. “! 중요”를 포함하여이 작업을 수행합니다.
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none !important;
    }
}
```
이제 미리보기를 다시 클릭하면 사용자 CSS가 작동하는 것을 볼 수 있습니다. 저장하고 즐기십시오.

Chrome을 사용하는 경우 내장 관리자가 이미 매우 좋습니다. 도있다 세련된 확장 . CSS 수정 사항을 조금 다르게 입력합니다. “설치된 스타일 관리”를 선택한 다음 “새 스타일 쓰기”를 클릭하고 사이트 또는 URL 패턴을 입력하여 코드 상자 아래에 게시물을 적용한 다음 ” 코드”상자, 예.

body {
  background:none !important;
}

답변

Firebug 를 설치 하여 관련 CSS 속성을 식별 한 다음 greasemonkey 스크립트를 작성하여 재정의하십시오.

답변

당신은 당신이 사이트에 넣을 경우 할 일을

foo.bar { background-pattern:none; }

그런 다음 추가

!important

전에 }. 여기의 작은 세부 여전히 사용할 수 있도록 설명이 아닌 사용자의 CSS 사용에가.

답변

Exit mobile version

IT HOW

무엇이는 물어보세요

브라우저에서 사용자 스타일링을위한 CSS 이해 사용자 CSS 재정의를 작성해야합니다 (잘못된

답변

답변

답변

답변