집 > 뛰어나다 > CSS에서 모두 대문자로 만드는 방법. CSS 대문자 의사 요소를 사용하여 대문자 CSS 스타일 만들기


CSS에서 모두 대문자로 만드는 방법. CSS 대문자 의사 요소를 사용하여 대문자 CSS 스타일 만들기




종종 사이트에 자료를 추가하거나 포럼에 새 주제를 생성할 때 서둘러 사용자가 소문자(소문자)로 문장(제목)을 쓰기 시작할 수 있습니다. 이것은 어느 정도 실수입니다.

이 문제를 해결하기 위한 몇 가지 옵션을 보여 드리겠습니다. jQuery가 출판 전에 상황을 수정할 수 있는 경우 PHP와 CSS는 이미 출판된 자료에 더 적합합니다.

PHP에서 대문자로 된 문자열의 첫 글자

PHP에는 줄의 첫 번째 문자를 대문자로 변환하는 "ucfirst"라는 함수가 있지만 단점은 키릴 문자에서는 제대로 작동하지 않는다는 것입니다.

이를 위해 우리는 우리만의 작은 함수를 작성하겠습니다. 구현은 다음과 같습니다.

이 버전에서는 실제로 우리에게 필요한 대문자로 시작하는 문장을 받게 됩니다.

CSS에서 문자열의 첫 글자를 대문자로 지정

이 방법은 시각적으로(즉, 제안 사항이 사이트의 소스 코드에 있는 대로 표시됨) 첫 번째 문자를 대문자로 변환합니다.

사용법은 다음과 같습니다.

첫 번째 문장

두 번째 문장

세 번째 문장

네 번째 문장

#content p:first-letter ( text-transform: 대문자; )

“first-letter” 의사 요소와 “text-transform” 속성을 사용하여 단락의 각 첫 글자에 대한 디자인을 설정합니다.

jQuery에서 대문자로 된 문자열의 첫 글자

앞서 말했듯이 이 변환 방법은 아직 출판되지 않은 자료에 가장 적합합니다.

예를 들어, 텍스트 필드(제목 입력을 위한 필드 역할을 함)를 가져와서 소문자로 문장을 입력할 때 대문자로 표시하는 작은 스크립트를 작성합니다.

$(document).ready(function() ( $(".content").on("keyup", function() ( var text = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1) $(this).val(new_text ));

스크립트는 텍스트를 작성할 때와 단순히 삽입할 때 모두 작동합니다. 사이트에서 스크립트가 작동하려면 jQuery 라이브러리가 활성화되어 있어야 한다는 점을 잊지 마십시오.

좋은 하루 되세요, 사이트 구축 괴짜 여러분. 오늘 출판물에서는 텍스트 콘텐츠 디자인 주제에 대해 논의할 것입니다. 그렇기 때문에 CSS 도구를 사용하여 대문자를 설정하는 방법을 배우고, 첫 글자 장식을 만들기 위한 여러 옵션을 익히고, 물론 모든 것을 실제로 시도해 볼 수 있습니다. 자, 이제 재미있는 부분으로 넘어 갑시다!

텍스트 변환을 시작해 보겠습니다.

계단식 스타일 시트 덕분에 블록의 첫 번째 문자와 전체 텍스트를 모두 변경할 수 있습니다. 두 가지를 모두 수행할 수 있는 방법을 알려 드리겠습니다. 또한 이 문서에 언급된 모든 도구는 css1, css2, css2.1 및 css3의 세 가지 언어 수준에서 지원됩니다.

선택된 의 모든 텍스트 내용을 수정하는 흥미로운 속성부터 시작하겠습니다. 이것은 텍스트 변환입니다.

명명된 요소는 문자를 대문자, 소문자로 변환할 수 있으며 단어의 각 첫 번째 문자를 대문자로 설정할 수도 있습니다. 표의 값에 대해 더 자세히 썼습니다.

이제 이론적 자료를 강화하기 위해 예를 살펴보겠습니다.

텍스트 변환 본문( text-align: center; ) h1 ( text-transform: 대문자; ) h3 ( text-transform: capitalize; ) 주의! !내일은 모든 화장품 할인이 진행됩니다!

해당 프로모션은 귀하의 도시에 위치한 모든 지점에서 유효합니다.

첫 글자 장식 만들기

"드롭 캡(drop cap)"이라는 용어가 무엇을 의미하는지 모른다면, 지금이 바로 현재 주제와 직접적으로 관련되어 있으므로 알아보아야 할 때입니다.

대문자(때때로 이니셜이라고도 함)는 장의 첫 글자로, 큰 크기, 색상, 경우에 따라 글꼴 디자인까지 나머지 부분과 다릅니다. 실생활에서 그러한 편지의 예는 오래된 원고와 책에서 찾을 수 있습니다.

이니셜을 만드는 방법에는 여러 가지가 있습니다. 기호는 마크업 언어 태그로 강조 표시되고 기호를 수정하는 스타일에 특정 속성이 지정되는 경우가 많습니다. 이것은 좋은 방법이지만 이 간행물에서는 CSS 메커니즘에 대해 설명합니다(제 생각에는 이 메커니즘이 이 경우 사용하기 훨씬 더 논리적이고 편리합니다).

이 문제를 해결하려면 다음과 같은 도구를 사용할 수 있습니다.

따라서 이 경우에는 first-letter를 사용합니다. 모든 의사 요소와 마찬가지로 콜론을 사용하여 선택기에 할당됩니다. 스타일 시트의 모든 규칙 뒤에는 속성이 표시됩니다. 그러나 글꼴, 패딩, 색상, 배경, 여백 및 테두리 편집과 관련된 속성만 적용할 수 있습니다.

나는 구체적인 예를 고려할 것을 제안합니다. 제시된 작은 프로그램을 구현할 때 컬러로 된 이니셜 글자만 만드는 것이 아니라 꽃으로 채우기로 결정했습니다. 이렇게 하려면 글꼴 색상을 투명으로 설정하고 문자를 선택한 이미지로 채워서 몇 가지 까다로운 트릭을 사용해야 합니다.

돌출된 이니셜 p ( 글꼴 크기: 26px; 글꼴 패밀리: 판타지; ) P:first-letter ( /*문단의 첫 글자에 대한 스타일 규칙 규정*/ 글꼴 패밀리: sant-serif; 글꼴 무게: 900 ; 색상: 투명; 배경: url(http://dreempics.com/img/picture/Mar/26/51a6ff79968c93a6542e88e464368bce/1.jpg); 배경 크기: 99%;

이 문단에는 매우 흥미로운 내용이 담긴 문장이 포함되어 있습니다.

다음 단락에서 흥미로운 이야기를 계속해 보겠습니다.

결과 결과는 매우 매력적이고 특이해 보이며 이는 이상적인 솔루션입니다.

보시다시피 이 주제는 매우 간단합니다. 귀하의 웹 리소스에 대해 제가 제공한 프로그램 코드를 쉽게 사용하여 귀하의 스타일에 맞게 수정하고 사용자 정의할 수 있습니다.

제시된 자료가 도움이 되었다면 내 블로그 업데이트를 구독하고 얻은 지식(물론 내 블로그 링크)을 친구들과 공유하는 것을 잊지 마세요. 행운을 빌어요!

안녕!

감사합니다, Roman Chueshov

또는 문자 및 HTML CSS 형식에 대해 자세히 설명합니다.

이 장에는 하이퍼텍스트 마크업 영역의 문자 서식 지정에 대한 예가 포함되어 있습니다.

왼쪽 메뉴에는 현대적이고 매우 상세한 HTML 튜토리얼이 있습니다.

이를 통해 처음부터 웹사이트를 만들 수 있지만 지금은 조금 더 낮은 수준을 살펴보세요.

이것은 흥미로울 것입니다.

정보사회 시대

인류는 정보와 네트워크 기술이 매우 중요한 역할을 하는 새로운 발전 단계에 들어섰습니다. 우리는 정보통신기술의 급속한 발전을 특징으로 하는 정보사회 시대에 살고 있습니다. 컴퓨터와 인터넷의 출현으로 엄청난 변화가 시작되었습니다. 컴퓨터와 인터넷은 사회가 행동, 규칙 및 이상에 대한 새로운 규범을 개발하도록 압력을 가하고 있습니다. 인터넷은 이전 세대를 위한 텔레비전과 마찬가지로 새로운 세대를 위한 것입니다. 그러나 글로벌 네트워크는 구매, 판매 기회를 제공하고 의사소통을 제공하며 개인 인터넷 페이지 및 웹사이트 생성과 같은 다양한 자기 표현 방법을 제공하기 때문에 텔레비전보다 훨씬 더 기능적입니다.

HTML 문자: 대문자

문자 형식의 예:

서식 결과:

대문자로 작성된 자유 텍스트의 예

대문자로 작성된 자유 텍스트의 예

태그 - 정의 대문자(이러한 태그는 HTML 5에서는 지원되지 않습니다.)

CSS 코드 style="text-transform:uppercase" - 정의 대문자.

즉, 대문자 사용은 CSS 속성을 사용하여 정의됩니다.

HTML 문자와 그 사이의 CSS 간격

문자 형식의 예:

서식 결과:

사용자 정의 HTML 텍스트 및 CSS 문자 사이의 2픽셀 간격

속성 및 값에 대한 설명:

CSS 코드 style="letter-spacing:2px" - 정의 CSS 문자 간격.

왼쪽 메뉴에서 유사한 형식 지정 예를 찾아보세요. 관심을 가져주셔서 감사합니다.

HTML에서는 글꼴 크기가 중요한 역할을 합니다. 이를 통해 사이트 페이지에 게시된 중요한 정보에 사용자의 관심을 끌 수 있습니다. 글자의 크기뿐만 아니라 색상, 두께, 심지어 가족까지 중요합니다.

HTML 글꼴 작업 시 태그 및 속성

하이퍼텍스트 언어에는 글꼴 작업을 위한 다양한 도구가 있습니다. 결국 텍스트 서식 지정은 html의 주요 작업입니다.

HTML 언어를 만든 이유는 브라우저에서 텍스트 서식 규칙을 표시하는 문제였습니다.


HTML의 글꼴 작업에 사용되는 태그와 해당 속성을 살펴보겠습니다. 주요한 것은 태그입니다. 해당 속성 값을 사용하여 글꼴의 여러 특성을 설정할 수 있습니다.

  • color – 텍스트 색상을 설정합니다.
  • size - 기존 단위의 글꼴 크기입니다.

1부터 7까지의 양수 속성 값이 지원됩니다.

  • 얼굴 – 에서 사용할 텍스트 글꼴 모음을 설정하는 데 사용됩니다. 쉼표로 구분된 여러 값이 지원됩니다.

쌍을 이루는 글꼴 태그 부분 사이에 있는 텍스트에만 서식이 지정됩니다. 나머지 텍스트는 표준 기본 글꼴로 표시됩니다.

또한 html에는 하나의 형식 지정 규칙만 지정하는 여러 쌍의 태그가 있습니다. 여기에는 다음이 포함됩니다.

  • — html에서 굵은 글꼴을 설정합니다. 작업 태그는 이전 태그와 유사합니다.
  • — 크기가 기본값보다 큽니다.
  • — 더 작은 글꼴 크기;
  • — 이탤릭체 텍스트(이탤릭체). 유사 태그 ;
  • — 밑줄이 있는 텍스트;
  • - 줄을 그었습니다.
  • — 텍스트를 소문자로만 표시합니다.
  • - 대문자로.

일반 텍스트

썸네일

썸네일

평소보다 더

평소보다 적음

이탤릭체

이탤릭체

밑줄 포함

지워진

스타일 속성 기능

설명된 태그 외에도 html에서 글꼴을 변경하는 방법이 여러 가지 더 있습니다. 그 중 하나는 일반 스타일 속성을 사용하는 것입니다. 해당 속성 값을 사용하여 글꼴 표시 스타일을 설정할 수 있습니다.

1) 글꼴 패밀리 – 속성은 글꼴 패밀리를 설정합니다. 여러 값을 나열하는 것이 가능합니다.
이전 제품군이 사용자 운영 체제에 설치되지 않은 경우 html의 글꼴을 다음 값으로 변경합니다.

작성 구문:

글꼴 계열: 글꼴 이름 [, 글꼴 이름[, ...]]

2) 글꼴 크기 – 크기는 1에서 7까지 설정됩니다. 이는 HTML에서 글꼴을 늘릴 수 있는 주요 방법 중 하나입니다.
작성 구문:

글꼴 크기: 절대 크기 | 상대 크기 | 의미 | 관심 | 상속하다

글꼴 크기를 설정할 수도 있습니다.

  • 픽셀 단위;
  • 절대값(xx-소형, x-소형, 소형, 중형, 대형)
  • 백분율로;
  • 포인트(pt) 단위입니다.

글꼴 크기:7

글꼴 크기:24px

글꼴 크기: x-large

글꼴 크기: 200%

글꼴 크기:24pt

3) 글꼴 스타일 - 글꼴 쓰기 스타일을 설정합니다. 통사론:

글꼴 스타일: 일반 | 이탤릭체 | 비스듬한 | 상속하다

값:

  • 일반 - 일반 철자법;
  • 이탤릭체 – 이탤릭체;
  • oblique – 글꼴이 오른쪽으로 기울어졌습니다.
  • 상속 – 상위 요소의 철자를 상속합니다.

이 속성을 사용하여 html에서 글꼴을 변경하는 방법의 예:

글꼴 스타일:상속

글꼴 스타일:기울임꼴

글꼴 스타일:일반

글꼴 스타일:경사

4) 글꼴 변형 – 모든 대문자를 대문자로 변환합니다. 통사론:

글꼴 변형: 일반 | 작은 대문자 | 상속하다

이 속성을 사용하여 html에서 글꼴을 변경하는 방법의 예:

글꼴 변형:상속

글꼴 변형:일반

글꼴 변형:작은 대문자

5) 글꼴 두께 - 텍스트의 두께(채도)를 설정할 수 있습니다. 통사론:

글꼴 두께: 굵게|굵게|더 가벼워|보통|100|200|300|400|500|600|700|800|900

값:

  • 굵은 글씨 – html 글꼴을 굵은 글씨로 설정합니다.
  • 더 굵게 - 평소보다 더 굵게;
  • 더 가벼움 – 정상에 비해 포화도가 낮습니다.
  • 일반 - 일반 철자법;
  • 100-900 – 숫자에 해당하는 글꼴 두께를 설정합니다.

글꼴 두께:굵게

글꼴 두께:굵게

글꼴 두께:더 가벼움

글꼴 두께:보통

글꼴 두께:900

글꼴 두께:100

html 글꼴 속성 및 글꼴 색상

글꼴은 또 다른 컨테이너 속성입니다. 그 자체에는 글꼴 변경을 위한 여러 속성의 값이 결합되어 있습니다. 글꼴 구문:

글꼴: 글꼴 크기 글꼴 계열 | 상속하다

값은 다양한 컨트롤의 레이블에서 시스템이 사용하는 글꼴로 설정할 수도 있습니다.

  • 캡션 – 버튼용;
  • 아이콘 - 아이콘용.
  • 메뉴 - 메뉴;
  • 메시지 상자 – 대화 상자용;
  • 작은 캡션 – 작은 컨트롤용
  • 상태 표시줄 – 상태 표시줄 글꼴.

글꼴:아이콘

글꼴:캡션

글꼴:메뉴

글꼴:메시지 상자

작은 캡션

글꼴:상태 표시줄

글꼴: 기울임꼴 50px 굵은 "Times New Roman", Times, serif

HTML에서 글꼴 색상을 설정하려면 color 속성을 사용할 수 있습니다. 키워드를 사용하거나 RGB 형식으로 색상을 설정할 수 있습니다. 16진수 코드에서도 마찬가지입니다.

안녕하세요, 이 블로그 독자 여러분. 오늘은 CSS를 사용하여 대문자를 모두 만드는 방법에 대해 이야기하겠습니다. 물론 이를 위해서는 Caps Lock을 켜고 원하는 텍스트를 작성하면 되지만 이는 다소 원시적인 방법이다. 하지만 이미 완성된 기사에서 별도의 단락을 강조해야 한다면 어떻게 해야 할까요?

CSS에서 모든 문자를 대문자로 만들기

이에 대한 text-transform 속성이 있는데, 짐작할 수 있듯이 텍스트를 변환합니다. 다음과 같은 값을 갖습니다.

  • 소문자 - 모든 텍스트가 소문자로 표시됩니다.
  • 대문자 – 모든 단어는 대문자로 표시됩니다(필요한 것).
  • 대문자 - 각 단어의 첫 글자를 대문자로 표시합니다.

기본적으로 이것이 당신이 알아야 할 전부입니다. 남은 것은 원하는 요소에 액세스하는 방법을 알아내는 것뿐입니다. 이 예를 상상해 봅시다. 기사의 다섯 번째 단락을 모두 대문자로 만들어야 합니다. 그리고 이것은 어떻게 구현될 수 있나요?

원하는 요소에 도달하는 방법은 무엇입니까?

아시다시피 단락은 한 쌍의 html 태그를 사용하여 생성되며, 전체 내용이 단락이 됩니다. 남은 것은 새로운 스타일 클래스를 정의하는 것뿐입니다.

이제 나머지 부분에 영향을 주지 않고 CSS 언어를 통해 이 특정 단락에 액세스할 수 있는 기회가 생겼습니다. 다음과 같이 할 수 있습니다:

대문자(
텍스트 변환: 대문자;
}

이 방법은 특정 기사의 일부를 강조 표시해야 할 때 적합합니다. 모든 페이지에 대문자로 된 특정 텍스트가 있어야 한다면 어떨까요? 이 경우 매번 작성하지 않도록 블록을 템플릿 파일에 배치하는 것이 좋습니다.

아니면 CSS를 대문자로 사용하여 각 기사의 두 번째 단락을 강조 표시해야 할 수도 있습니다. 그러면 다른 옵션이 귀하에게 적합합니다. 기사가 나타나는 블록을 찾고 n번째 하위 의사 클래스를 사용하여 두 번째 단락에 액세스합니다. 이 예에서 기사가 포함된 블록에는 기사 클래스가 있습니다.

제p:n번째-자식(2)(
텍스트 변환: 대문자
}

보시다시피 각 특정 사례마다 다른 솔루션이 있습니다. 가장 중요한 것은 문자의 대소문자를 변경하는 text-transform 속성을 기억하는 것입니다.

일반적으로 이러한 방식으로 텍스트를 표시하는 것은 인식을 크게 손상시키기 때문에 권장되지 않지만 특히 중요한 일부 부분은 강조 표시될 수 있습니다.

오늘 우리는 text-transform 속성을 살펴보았습니다. 새로운 기사를 받으려면 블로그를 구독하세요.