[css] <textarea>와 <textfield>가 body에서 font-family와 font-size를 가져 오지 않는 이유는 무엇입니까?

Program / 글쓴이

왜 Textarea하고 textfield있지 복용 font-family하고 font-size몸에서?

여기 http://jsbin.com/ucano4 라이브 예제를 참조하십시오

암호

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>texearea font</title>
        <style type="text/css">
        body {
            font-family: Verdana, Geneva, sans-serif;
            font-size:16px
        }
        </style>
        </head>            
        <body>
        <form action="" method="get">
        <textarea name="" cols="20" rows="4"></textarea>
        <input name="" type="text" />
        </form>
        <p>some text here</p>
        </body>
        </html>

그것이 일반적인 행동이라면 다음과 같이 CSS로 작성해야합니다. 나는 모두 같은 스타일이 필요해

body,textarea,input  {
                font-family: Verdana, Geneva, sans-serif;
                font-size:16px
            }

그리고 글꼴 스타일을 가져 오지 않는 XHTML의 다른 요소는 몇 개 body {....}입니까?

답변

기본적으로 브라우저는 OS 컨트롤 또는 브라우저 컨트롤을 사용하여 대부분의 양식 요소 (텍스트 영역, 텍스트 상자, 버튼 등)를 렌더링합니다. 따라서 대부분의 글꼴 속성은 OS가 현재 사용중인 테마에서 가져옵니다.

글꼴 / 텍스트 스타일을 변경하려면 양식 요소 자체를 대상으로 지정해야합니다. 방금 수행 한 것처럼 쉽게 선택하면됩니다.

내가 아는 한 양식 요소 만 영향을받습니다. 내 머리 위로 떨어져 : input, button, textarea, select.

답변

특정 컨트롤은 기본적으로 글꼴 설정을 상속하지 않습니다. CSS에 다음을 배치하여이를 재정의 할 수 있습니다.

textarea {
   font-family: inherit;
   font-size: inherit;
}

답변

모든 브라우저에는 기본 스타일 시트가 내장되어 있습니다. 그렇기 때문에 스타일이 전혀 정의되지 않은 페이지를 만들면 <h1>태그가 크고 굵게 표시되고 <strong>텍스트가 굵게 표시됩니다. 마찬가지로 <input>및 <textarea>요소 의 글꼴 스타일 은 기본 스타일에서 정의됩니다.

Firefox에서이 스타일 시트를 보려면 다음을 주소 표시 줄에 입력하세요. resource://gre/res/forms.css

어쨌든, 마지막 예제에서했던 것처럼 다른 스타일과 마찬가지로 이러한 스타일을 재정의해야합니다.

다른 스타일이 정의되어 있는지 궁금하다면 리소스의 CSS 파일을 확인하세요. 위의 URL을 통해 또는 resfirefox 디렉토리 (예 :)에서 폴더를 찾아서 액세스 할 수 있습니다 c:\program files\mozilla firefox\res. 다음은 일반 페이지의 스타일에 영향을 미칠 수있는 것입니다.

  • html.css
  • forms.css
  • quirk.css
  • ua.css

답변

그가 의미하는 것은 일부 요소가 DOM의 다른 요소보다 더 구체적이거나 범위가 더 작다는 것입니다. 본문 내에 텍스트 영역이 존재하므로 텍스트 영역에 대해 정의 된 모든 스타일이 body {} 스타일을 덮어 씁니다. 따라서 FF의 기본 텍스트 영역 스타일은 나중에 정의 되더라도 바디 스타일을 덮어 씁니다 (보통 더 최근의 것이 우선하지만 더 넓은 범위 / 덜 구체적인 경우에는 해당되지 않음).

답변

일반 텍스트보다 훨씬 큰 글꼴을 사용하여 모바일에서 텍스트 영역을 중지하기 위해 모든 종류의 트릭을 시도했습니다. 내 텍스트 영역이 cols = “45”일 때 글꼴은 정상 이었지만 cols = “71”로 올라가 자마자 td 태그 안에 머물러 있어도 글꼴이 커졌습니다.

mozilla 페이지 ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust )에서 이것을 찾았습니다.

textarea {
   text-size-adjust: none;
}

저에게 가장 좋은 대답 인 것 같습니다. 그것은 PC, 태블릿, 그리고 가장 중요한 것은 내 안드로이드 폰에서 작동합니다.

답변