자바스크립트 CSS 속성 추가
__main__ Python module |
code Python module |
COM PHP module |
Ev PHP module |
exp |
html Python module |
http Python module |
iat |
imp Python module |
io Python module |
JavaScript |
operator Python module |
os Python module |
PS PHP module |
Python Development |
Python functions |
re Python module |
select Python module |
selectors Python module |
sep |
site Python module |
square |
StackOverflow |
struct Python module |
types Python module |
UI PHP module
Michael Zippo
CSS 선택기를 사용하면 웹 개발자가 웹페이지의 특정 요소 또는 요소 집합의 스타일을 지정할 수 있습니다.
선택기로 작업할 때 특정 속성이 있는 요소만 대상으로 지정할 수 있습니다. 여기에서 CSS 속성 선택기가 필요합니다. 속성 선택기를 사용하면 특정 속성이 있는 요소에만 특정 스타일을 적용할 수 있습니다.
이 튜토리얼에서는 요소의 스타일을 지정할 때 CSS 속성 선택기를 사용하는 방법을 설명합니다. 이 튜토리얼을 마치면 속성 선택기를 사용하여 요소를 정의하는 방법을 충분히 이해하게 될 것입니다.
HTML 속성
HTML에서 속성은 추가 요소를 정의하는 데 사용됩니다. 요소의 특성 또는 속성. 예를 들어 height 속성은 이미지의 높이를 정의하고 title 속성은 웹 요소의 제목을 정의합니다.
이름/값 쌍 구조를 사용하여 속성을 선언하세요. 즉, name = "value"
와 같은 속성이 HTML 파일에 나타납니다. HTML 속성에 대한 자세한 내용은 HTML 속성 가이드를 참조하십시오.
CSS 속성 선택기
사이트를 디자인할 때 속성 값에 따라 요소의 스타일을 지정하거나 지정하지 않을 수 있습니다. 이렇게 하려면 CSS 속성 선택기를 사용합니다.
속성 선택기를 사용할 때 따라야 할 두 단계는 다음과 같습니다.
- Wrap attribute ` s는 대괄호로 묶습니다.
- 이 이름으로 속성에 적용할 스타일을 지정합니다.
CSS 속성 선택기가 작동하는 몇 가지 예를 살펴보겠습니다.
CSS [속성]
선택자 속성의 가장 기본적인 형식은 [속성]
입니다. 즉, 속성 이름을 대괄호로 묶습니다.
title 속성이 있는 각 요소의 글꼴 크기를 16px로 설정한다고 가정해 보겠습니다. 다음 코드를 사용하여 수행할 수 있습니다.
CSS 규칙 코드는 제목 속성이 있는 요소에만 적용됩니다. title 속성이 지정된 모든 요소의 글꼴 크기는 속성에 저장된 값에 관계없이 위의 규칙에 따라 16px로 변경됩니다.
다음을 만들 수 있습니다. 다음 중 하나 또는 둘 다를 지정하여 보다 정확한 속성 선택기:
- 규칙을 적용해야 하는 요소의 특정 유형
- 속성 id 값( 예: 텍스트의 경우 "title", 링크의 경우 "href", 요소의 경우 "class").
예를 들어, 단락의 모든 텍스트 크기를 설정하려는 경우 헤더를 16px로 설정합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.
selector 속성의 시작 부분에 있는 문자 p
는 브라우저가
태그에만 글꼴 스타일을 적용하도록 지시합니다. . 선택기의 [title]
부분은 브라우저에
지정된 title
속성이 있는 태그에만 경찰 스타일을 적용하도록 지시합니다.
T 따라서 이 코드를 읽은 후 브라우저는 모든 단락 제목(p)의 글꼴 크기를 16px로 변환합니다. 이 코드는 페이지의 다른 텍스트에는 영향을 미치지 않습니다.
[attribute = "value"]
속성 선택기를 사용하면 프로그래머가 요소에만 스타일을 적용할 수 있습니다. 값이 선택기에 지정된 값과 같은 속성.
Python.Engineering 홈페이지에 있는 모든 링크의 배경색을 주황색으로 설정하려고 한다고 가정합니다. 이 스타일은 a
요소의 배경색을 주황색으로 설정해야 합니다. 다음 CSS 코드를 사용하여 이 작업을 수행할 수 있습니다.
이 규칙은 href 속성이 python.engineering
과 같은 웹 페이지의 모든 요소를 선택합니다. 그런 다음 이 모든 요소의 배경색을 주황색으로 설정합니다.
CSS [속성 ~ = "값"]
[속성 ~ = & ldquo 선택기 ; value "]
를 사용하면 특정 단어를 포함하는 속성 값이 있는 요소를 선택할 수 있습니다.
예를 들어, 모든 p에 스타일을 적용하려고 한다고 가정합니다. 제목이 blue
에 해당하는
요소. 이 스타일의 경우 이러한 요소의 텍스트 색상을 파란색으로 변경해야 합니다.
우리는 다음을 사용할 수 있습니다. 이를 수행하기 위한 다음 규칙:
이 규칙은 "blue"라는 단어를 포함하는 제목과 관련된
모든 태그를 찾고 이러한 태그
blue에 있는 텍스트의 색상을 정의합니다. 따라서 ,
태그에 제목이 color blue
또는 color blue
인 경우 이 스타일이 적용됩니다. 그러나 이 규칙은 아닙니다 은 b lue
라는 단어가 속성에 독립적으로 존재하지 않기 때문에 제목이 blueColor
인
태그에 적용됩니다.
다음과 다릅니다. * = selector
는 속성에서 특정 단어를 찾을 수 있을 뿐만 아니라 속성에서 특정 값을 찾을 수도 있습니다.
CSS [속성 | = "값"]
[속성 | = "value"]
선택기를 사용하면 속성이 특정 값(예: "Top")으로 시작하는 요소를 선택할 수 있습니다. 여기에는 지정된 값으로 시작하고 하이픈 뒤에 추가 텍스트가 포함된 속성이 있는 요소가 포함됩니다(예: "top-style" 및 기타 "top-" 값). 코드에는 " Class.‚"
예를 들어, 로 시작하는 class 속성을 사용하여 각
에 10픽셀의 상단 패딩을 할당한다고 가정합니다. > top
, 하이픈으로 구분된 다른 값 포함 다음 코드를 사용하여 수행할 수 있습니다.
이 규칙은 각 < 클래스 이름이 top-
으로 시작하는 요소를 포함하여 클래스 이름이 top
으로 시작하는 div> 요소.
지정된 값은 하나의 전체 단어이거나 단어 뒤에 하이픈이 와야 합니다. 즉, 위의 스타일은 클래스 이름이 top style
및 top-style
인 요소에는 적용되지 않습니다. name topstyle
.
CSS [attribute ^ = "value‚"]
The [attribute ^ = & ldquo 선택기; value ‚"]
는 속성 값이 특정 값으로 시작하는 요소를 선택하는 데 사용됩니다. 지정된 값은 [attribute | = "value"]
앞서 이야기한 것입니다.
paddingBottom
으로 시작하는 클래스 속성이 있는 각
사용자의 웹 브라우저는 클래스 이름이 "paddingBotto"로 시작하는 모든
CSS [속성 $ = "값"
L `연산자 $ =
는 속성 값이 특정 값으로 끝나는 모든 요소를 선택하는 데 사용됩니다. 예를 들어, href 속성 값이 .app
로 끝나는 모든 하이퍼텍스트 텍스트의 텍스트 색상을 회색으로 변경하려고 한다고 가정해 보겠습니다. 다음 코드를 사용하여 수행할 수 있습니다.
이 선택기는 href 값이 .app
로 끝나는 웹페이지의 모든 요소에 적용됩니다.
CSS [attribute * = "value"]
* =
연산자를 사용하면 값 `Äã`Äãd `속성에 특정 값이 포함된 모든 요소를 선택할 수 있습니다. 값. ~ =
연산자와 달리 이 속성 선택자는 한 단어가 아닌 클래스에서 특정 값을 찾을 수 있습니다.
Fo 예를 들어 클래스 속성에 allPadding
이 포함된 모든
이 규칙은 allPadding
이라는 용어를 포함하는 at class 속성을 사용하여 모든 HTML 요소 주위에 50px 패딩을 정의합니다. 따라서 클래스 이름이 new allPadding
, surround allPadding red
, allPaddingblue
및 allPadding-true
인 요소는 모두 이 스타일이 적용됩니다.
결론
CSS 속성 선택기를 사용하면 개발자가 속성 값에 따라 요소를 선택하고 해당 요소에 특정 스타일을 적용할 수 있습니다.
p> 이 튜토리얼에서는 예제를 참조하여 속성 선택기의 기본 사항과 모든 유형의 CSS 속성 선택기를 사용하는 방법을 설명했습니다. 이제 전문가처럼 CSS 속성 선택기를 사용할 준비가 되었습니다.
CSS는 웹 개발에 사용되는 세 가지 주요 기술 중 하나입니다.앱 다운로드 무료 Python.Engineering 오늘 강연 웹 개발자로서의 경력을 쌓는 데 필요한 기술에 대해 조언해 줄 수 있는 경험 많은 경력 코치와 함께하십시오.