웹 브라우저에서 특정 사이트의 모양을 구체적으로 변경하고 싶습니다. 이 사이트는 CSS를 사용하므로 사용자 CSS 재정의를 작성해야합니다 (잘못된 경우 수정하십시오).
내 브라우저는 Firefox (내가 무언가를 써야한다고 생각합니다 chrome/userContent.css)와 Chrome ( User\ StyleSheets/Custom.css)입니다.
특정 변경은 /unix//의 모든 페이지에서 배경 패턴 (어두운 점)을 제거하는 것 입니다. 그러나 더 일반적으로, 낚시하는 법을 가르쳐주세요. 어떤 매개 변수를 변경하고 어떻게 CSS에서이 변경을 작성합니까?
답변:
Firefox에 대해서는 친숙한 대화 만 할 수 있습니다. 기본 브라우저이기 때문입니다. 나는 당신의 '물고기를 가르쳐'요청을 이행하기 위해 여기에 일반적인 것들을 유지하려고 노력할 것입니다. 이를 위해 두 가지 예, 귀하와 다른 실제 수업이 포함 된 예를 포함하겠습니다. 먼저 사용자 CSS를보다 쉽게 만들 수있는 몇 가지 도구가 제공됩니다.
이제 실제로 무언가를 작성하십시오. 계속 진행하기 전에 HTML 및 CSS에 대한 기본 지식이 있어야합니다. W3Schools에는 HTML 및 CSS 의 기본 구조와 구문에 익숙해 지도록 적절한 자습서가 있습니다 . 이 답변을 위해 초보자가 예제를 달성 할 수 있도록 충분한 정보를 제공하겠습니다.
이제 우리는 스타일리쉬를 사용합니다. 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를 재정의하는 방법이 있으며이를 중요하게 지정하면됩니다. "! 중요"를 포함하여이 작업을 수행합니다.
@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 스크립트를 작성하여 재정의하십시오.