CSS 튜토리얼 (5) DW4를 사용하여 CSS를 만드는 방법
1. CSS 스타일 패널 위 내용은 CSS 튜토리얼 (5) DW4를 사용하여 CSS를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요! 사실적인 누드 사진을 만들기 위한 AI 기반 앱 사진에서 옷을 제거하는 온라인 AI 도구입니다. 무료로 이미지를 벗다 AI 옷 제거제 AI Hentai를 무료로 생성하십시오. 사용하기 쉬운 무료 코드 편집기 중국어 버전, 사용하기 매우 쉽습니다. 강력한 PHP 통합 개발 환경 시각적 웹 개발 도구 신 수준의 코드 편집 소프트웨어(SublimeText3) Vue.js에서 placeholder 속성은 사용자가 콘텐츠를 입력하지 않을 때 표시되는 입력 요소의 자리 표시자 텍스트를 지정하고 입력 팁이나 예제를 제공하며 양식 접근성을 향상시킵니다. 사용법은 입력 요소에 자리 표시자 속성을 설정하고 CSS를 사용하여 모양을 사용자 정의하는 것입니다. 모범 사례에는 입력과 관련성, 짧고 명확함, 기본 텍스트 방지, 접근성 고려 등이 포함됩니다. 여름에 비가 내린 후에는 아름답고 마법 같은 특별한 날씨 장면인 무지개를 자주 볼 수 있습니다. 이 역시 사진에서 볼 수 있는 보기 드문 장면으로, 매우 포토제닉하다. 무지개가 나타나는 데에는 몇 가지 조건이 있습니다. 첫째, 공기 중에 충분한 물방울이 있고, 둘째, 태양이 낮은 각도로 빛납니다. 따라서 비가 그친 후 오후에 무지개를 보는 것이 가장 쉽습니다. 그러나 무지개의 형성은 날씨, 빛, 기타 조건의 영향을 크게 받기 때문에 일반적으로 짧은 시간 동안만 지속되며, 가장 잘 볼 수 있고 촬영할 수 있는 시간은 더욱 짧습니다. 그러면 무지개를 만났을 때 어떻게 제대로 기록하고 고품질로 사진을 찍을 수 있습니까? 1. 무지개를 찾아보세요. 위에서 언급한 조건 외에도 무지개는 대개 햇빛 방향으로 나타납니다. 즉, 태양이 서쪽에서 동쪽으로 빛날 경우 무지개가 동쪽에서 나타날 확률이 높습니다. 스팬 태그는 텍스트에 스타일, 속성 또는 동작을 추가할 수 있습니다. 색상 및 글꼴 크기와 같은 스타일을 추가하는 데 사용됩니다. ID, 클래스 등의 속성을 설정합니다. 클릭, 호버 등과 같은 관련 동작 추가 처리 또는 인용을 위해 텍스트를 표시합니다. 노드는 HTML 요소를 나타내는 JavaScript DOM의 엔터티입니다. 이는 페이지의 특정 요소를 나타내며 해당 요소에 액세스하고 조작하는 데 사용될 수 있습니다. 일반적인 노드 유형에는 요소 노드, 텍스트 노드, 주석 노드 및 문서 노드가 포함됩니다. getElementById()와 같은 DOM 메서드를 통해 노드에 액세스하고 속성 수정, 하위 노드 추가/제거, 노드 삽입/교체, 노드 복제 등의 작업을 수행할 수 있습니다. 노드 순회는 DOM 구조 내에서 탐색하는 데 도움이 됩니다. 노드는 페이지 콘텐츠, 이벤트 처리, 애니메이션 및 데이터 바인딩을 동적으로 생성하는 데 유용합니다. 브라우저 플러그인은 일반적으로 다음 언어로 작성됩니다. 프런트엔드 언어: JavaScript, HTML, CSS 백엔드 언어: C++, Rust, WebAssembly 기타 언어: Python, Java 가상시장의 확대는 가상화폐 유통과 불가분의 관계이며, 당연히 가상화폐 이체 문제와도 불가분의 관계에 있습니다. 일반적인 전송 오류는 주소 복사 오류이고, 또 다른 오류는 체인 선택 오류입니다. 가상 화폐를 잘못된 체인으로 이체하는 것은 여전히 까다로운 문제이지만, 이체 작업 경험이 부족하여 초보자가 잘못된 체인을 이체하는 경우가 많습니다. 잘못된 링크는 제3자 플랫폼을 통해 검색할 수 있지만 성공하지 못할 수도 있습니다. 다음으로, 가상자산을 더 잘 관리할 수 있도록 에디터가 자세히 알려드립니다. 잘못된 가상 화폐 체인을 검색하는 방법은 무엇입니까? 잘못된 체인으로 전송된 가상 화폐를 검색하는 과정은 복잡하고 어려울 수 있지만 전송 세부 정보를 확인하고 거래소 또는 지갑 제공업체에 문의하고 개인 키를 호환되는 지갑으로 가져오고 크로스 체인 브리지 도구를 사용하여 1. 먼저 왼쪽 하단에 있는 설정 아이콘을 열고 설정 옵션을 클릭합니다. 2. 그런 다음 점프된 창에서 CSS 열을 찾습니다. 3. 마지막으로 알 수 없는 속성 메뉴의 드롭다운 옵션을 오류 버튼으로 변경합니다. . 예, Vue의 Less 파일은 CSS 변수 및 Less 믹스인을 통해 데이터를 도입할 수 있습니다. 데이터가 포함된 JSON 파일을 생성하세요. @import 규칙을 사용하여 JSON 파일을 가져옵니다. CSS 변수 또는 Less 믹스인을 사용하여 JSON 데이터에 액세스합니다.
이전 장을 학습한 후에는 누구나 CSS에 대해 어느 정도 이해하고 있다고 생각합니다. 이번 장에서는 CSS를 작성하기 위해 Dreamweaver4를 사용하는 방법을 설명하겠습니다. 먼저 Dreamweaver4를 실행한 후 메뉴에서 Windows->CSS 스타일을 선택합니다(또는 Shitf+F11을 누릅니다). 아래와 같이 CSS 스타일 관리 패널이 나타납니다.
가 CSS 스타일에 표시됩니다. 패널 모든 사용자 정의 CSS 스타일(즉, 위에서 언급한 점으로 시작하는 클래스 선택기, Dreamweaver4에서는 점으로 시작하는 클래스 선택기를 사용자 정의 스타일로 사용함), 적용 버튼을 사용하여 원하는 대로 이러한 CSS 스타일을 페이지에 적용할 수 있습니다. 의 텍스트 또는 문서 영역입니다.
참고: 적용 버튼 앞에 확인란이 있습니다. 선택하면 버튼이 회색으로 표시되어 사용할 수 없게 되며 마우스를 클릭하는 동안에는 사용자 정의된 CSS 스타일이 자동으로 적용됩니다. 페이지의 현재 요소. 확인란이 선택되어 있지 않고 적용 버튼을 사용할 수 있는 경우 적용 시 적용 버튼을 클릭해야 합니다. 사용자 정의 스타일을 객체에 적용하는 것은 현재 HTML 태그 뒤에 class="..."를 추가하는 것과 같습니다. 또한 스타일 앞에 "S" 모양의 기호가 있는데 이는 내부적으로 정의된 스타일을 나타내며, 기호인 경우 해당 스타일이 외부 스타일 시트 파일에 연결되어 있음을 나타냅니다.
참고: CSS 스타일 패널에는 사용자 정의(클래스) CSS 스타일만 표시되며, 기타 CSS 선택기 스타일은 HTML에 의해 제어되는 영역에 자동으로 적용될 수 있으므로 CSS 스타일 패널에 표시되지 않습니다. 태그. (HTML 태그 재정의는 선택자가 단일 HTML 태그인 CSS 스타일을 의미합니다. 원본 HTML 태그의 스타일을 재정의하고 변경하므로 재정의라고 합니다.)
오른쪽 하단에 작은 버튼 4개가 있습니다. Corner 에서 가장 일반적으로 사용되는 명령은 다음과 같습니다.
스타일 시트 첨부: (스타일 시트 링크) 클릭하면 이전에 생성된 외부 스타일 시트를 선택하고 확인을 클릭하면 스타일 시트 선택 대화 상자가 나타납니다. 이 외부 스타일 시트를 추가했습니다. 외부 스타일 시트를 추가할 때 가능하면 상대 경로를 사용하십시오. 새 스타일: (새 스타일) 일반적으로 이 버튼을 사용하여 CSS 스타일 시트를 만듭니다.
스타일 시트 편집: (스타일 시트 편집)을 클릭하면 스타일 시트 편집 대화 상자가 나타나 기존의 모든 내부 및 외부 스타일 시트를 표시합니다. 이 대화 상자에서 스타일을 생성, 편집, 삭제할 수 있습니다. .
삭제: (스타일 삭제) 먼저 삭제할 사용자 정의 CSS 스타일을 선택한 후 이 버튼을 클릭하면 스타일이 삭제됩니다.
위의 작은 삼각형을 클릭하거나 마우스 오른쪽 버튼을 클릭하면 메뉴가 나타납니다.
편집: (편집) 현재 선택한 사용자 정의를 편집합니다. CSS 스타일 이 CSS 클래스 스타일을 편집하려면 스타일 정의 대화 상자로 들어가려면 클릭하세요.
복제: (복사) 현재 선택된 사용자 정의 CSS 스타일 클래스를 복제합니다.
삭제: (삭제) 현재 선택된 사용자 정의 CSS 스타일을 삭제하며 버튼과 동일한 효과를 갖습니다.
적용: (응용 프로그램)은 선택한 CSS 클래스를 페이지의 현재 요소에 적용하는 것을 의미합니다. 적용 버튼과 동일합니다.
새 스타일: (새 스타일)은 버튼과 동일합니다.
스타일 시트 편집: (스타일 시트 편집)은 버튼과 같습니다.
스타일 시트 첨부: (외부 스타일 시트 링크) 버튼과 동일합니다.
스타일 시트 내보내기: (스타일 시트 내보내기) 이 페이지의 내부 스타일 시트를 외부 스타일 시트 파일로 내보냅니다. 참고: Dreamweaver4에서 스타일 시트를 내보내는 데 이 방법을 사용하는 것 외에도 기본 메뉴에서 파일->내보내기->CSS 스타일 내보내기를 사용할 수도 있습니다.
2. 스타일 시트를 만들기 전에 먼저 Dreamweaver4의 세 가지 스타일 시트 유형을 소개합니다(또는 CSS 스타일 패널 메뉴에서 새 스타일). 아래와 같이 새 스타일 대화 상자를 표시합니다.
정의에서 외부 스타일 시트 또는 내부 스타일 시트를 선택할 수 있습니다.
l 새 스타일 시트 파일(새 항목)을 선택합니다. 스타일 시트 파일) 시스템에서는 먼저 이 스타일 시트 파일을 저장한 다음 이 스타일 시트 파일을 정의할 수 있습니다. 전체 페이지의 스타일은 사용자가 만든 스타일 시트 파일을 따르며, 이 외부 스타일 시트 파일을 다른 페이지에 연결하여 하나의 스타일 시트 파일이 여러 페이지를 제어할 수 있습니다.
l 이 문서만(이 문서만 존재함)을 선택하면 내부 스타일 시트가 생성되고 Dreamweaver4에서는 생성된 스타일 시트의 내용을 < 헤드>
유형에서 선택할 수 있는 세 가지 스타일 시트 유형이 있습니다.
l 맞춤 스타일 만들기(클래스): (사용자 정의 스타일 만들기) 페이지에 다음과 같이 적용할 수 있는 스타일을 사용자 정의합니다. 클래스 속성 중간.
l HTML 태그 재정의: (HTML 태그 재정의) 지정된 HTML 태그의 기본 형식을 재정의합니다.
l CSS 선택기 사용: (CSS 선택기 사용) 특정 태그 조합 또는 지정된 ID 속성을 포함하는 모든 태그에 대한 형식 정의입니다.
CSS를 정의하기 전에 먼저 정의된 스타일이 어디에 사용될지 명확하게 고려해야 합니다. 어떤 효과를 얻을 수 있나요? 한 페이지에 정의되어 있습니까? 아니면 여러 페이지의 스타일을 제어합니까? 그런 다음 필요에 따라 적절한 스타일 시트를 정의하십시오.
3. 맞춤 스타일 만들기
페이지에서 중요한 텍스트나 콘텐츠를 눈길을 끌게 만들고 싶을 때가 있습니다. 이러한 중요한 텍스트나 콘텐츠에 대해 별도의 스타일을 정의하여 일반 텍스트를 구별하려면 사용자 정의를 생성하여 중요한 콘텐츠에 대해 별도로 CSS를 정의할 수 있습니다. 스타일. 눈길을 끄는 목적을 달성하기 위해 중요한 텍스트와 콘텐츠의 색상을 빨간색과 굵은 색으로 정의해야 한다고 가정해 보겠습니다.
새 스타일을 클릭하면 새 스타일 대화 상자가 나타나며, 스타일 시트 유형으로 Make Custon 스타일(클래스)을 선택하고 이 문서만을 선택합니다. , 그리고 위의 이름 드롭다운 상자에 정의한 스타일의 이름을 입력합니다. 아래와 같이 ".emphases"를 입력하고 확인을 누릅니다.
참고: 사용자 정의 스타일의 이름 일반적으로 스타일 효과에 따라 이름이 지정됩니다. 이름 앞에 마침표가 있어야 합니다. 이를 놓치면 시스템이 자동으로 채워줍니다.
스타일 정의 대화 상자가 나타나면 범주에 입력을 선택한 다음 그림과 같이 색상을 빨간색으로, 무게를 굵게 설정하고 확인을 누릅니다.
그런 다음 더 추가하세요. CSS 스타일 패널 emphases라는 사용자 정의 스타일이 생성되었습니다.
원본 코드 부분을 살펴보면 다음 스타일 시트가 추가된 것을 볼 수 있습니다. 코드:
이제 필요한 곳에 이 사용자 정의 스타일을 적용할 수 있습니다. 웹 페이지에서 텍스트를 선택하고 스타일 패널에서 강조 스타일을 클릭합니다. 원하는 효과인지 확인해 보세요.
참고: 선택한 콘텐츠가 표나 단락인 경우 전체 표나 단락의 텍스트는 강조 스타일로 정의됩니다. 원본 코드에서 해당 내용이
......
또는
……
선택한 텍스트에 스타일을 추가하면 텍스트 자체가 HTML 태그로 둘러싸이지 않으므로 태그가 자동으로 추가됩니다. 예:
……Key points…
참고: 스팬 태그 자체에는 스타일 시트의 선택 범위를 구체적으로 지정하고 p도 스타일 시트의 영역을 지정합니다.
4. 재정의 스타일 시트 만들기
재정의 스타일 시트는 HTML 태그의 형식을 재정의합니다. 예를 들어, 페이지의 단락 서식을 다시 지정하고, 각 단락 앞에 두 개의 공백을 두고, 단락 텍스트의 크기와 줄 간격을 설정하려고 합니다.
새 스타일을 클릭하여 새 스타일 대화 상자에서 스타일 시트 유형으로 HTML 태그 재정의를 선택하고 이 문서만을 선택합니다. 스타일 시트 유형이 HTML 태그 재정의를 선택하면 위의 드롭다운 상자 이름이 태그로 변경되어 입력 콘텐츠가 HTML 태그임을 나타냅니다. 드롭다운 버튼을 클릭하면 모든 HTML 태그가 포함된 것을 볼 수 있습니다. 태그 드롭다운 상자에서 단락 기호 P:
를 선택합니다. 확인 후 스타일 정의 대화 상자를 입력합니다. 유형에서 글꼴 크기를 12픽셀로 설정하고 줄 간격을 150%로 설정합니다. 텍스트 크기는 아래와 같습니다.
블록 섹션에서 텍스트 들여쓰기를 설정했습니다. 텍스트 크기가 12픽셀이므로 두 단어 사이의 간격은 24픽셀입니다.
누른 후 자, 스타일 재정의가 완료되었습니다. 이때 페이지의 각 단락 텍스트 크기는 12픽셀이고 줄 간격은 150%입니다. 그러나 Dreamweaver 편집기에서는 들여쓰기 효과를 볼 수 없습니다. 파일을 저장하고 열기만 하면 됩니다. 브라우저로 확인해 보세요. 이때 CSS 스타일 시트의 원본 코드는
5. 동적 링크 스타일 시트 만들기
다양한 상태의 링크 스타일 세트를 만들어 보겠습니다. 새 스타일을 클릭하여 새 스타일 대화 상자에서 스타일 시트 유형으로 CSS 선택기 사용을 선택하고 이 문서만을 선택합니다. 스타일 시트 유형으로 CSS 선택기 사용을 선택하면 위의 드롭다운 상자 이름이 선택기로 변경되어 입력 콘텐츠가 CSS 선택기임을 나타냅니다. 드롭다운 버튼을 클릭하면 4가지 상태를 볼 수 있습니다. 동적 링크:
l a :active 하이퍼링크 상태 선택
l a:hover 하이퍼링크 상태 위로 커서를 이동합니다
l a:link 하이퍼링크의 정상 상태, is no action
l a:visited Visited hyperlink status
다음으로 이러한 상태를 각각 설정합니다. 먼저 a:link를 선택하면 OK 후 스타일 정의 대화 상자가 나타납니다. 밑줄이 있고 색상은 다음과 같이 주황색입니다. 그림:
아래와 같이 a:visited, 밑줄 없음, 노란색을 설정하는 데 동일한 방법을 사용합니다.
다음으로 a:hover를 밑줄과 윗줄로 설정하고 색상은 주황색으로 설정하고 Background에서 배경을 노란색으로 설정합니다.
여기서는 계단식 규칙에 따라 a:active를 설정하지 않습니다. 스타일은 자동으로 a:hover를 따릅니다. 이런 식으로 모든 동적 링크의 효과를 설정했습니다. 설정 순서에 주의하세요. 브라우저에서 볼 수 있습니다. 이 페이지의 방문하지 않은 링크는 밑줄이 표시되지 않고 주황색입니다. 방문한 링크는 밑줄이 표시되지 않고 노란색입니다. 마우스가 링크를 가리키면 위쪽과 밑줄이 표시되고 배경이 노란색입니다. . 스타일 시트의 원래 코드는 다음과 같습니다.
이와 같이 동적 링크를 정의하면 전체 페이지의 링크 효과가 달라집니다. 두 개 이상의 링크 효과 그룹을 정의하는 방법은 무엇입니까? 4장에서 클래스와 의사 클래스를 혼합하면 동일한 페이지에서 서로 다른 링크 효과를 생성할 수 있다고 말하지 않았습니까? 새 스타일을 클릭하고 선택기 드롭다운 상자에 아래와 같이 a.link2:link를 입력합니다(물론 a:link를 먼저 선택한 다음 변경할 수 있음).
이런 식으로, 새로운 .link2 클래스를 생성하고 a.link2:link, 빨간색, 밑줄 스타일을 설정합니다.
위의 방법에 따라 a.link2:visited 및 a.link2:hover를 계속 정의합니다. , a.link2:visited를 빨간색에 밑줄이 그어진 것으로 정의하고, a.link2:hover는 밑줄이 없는 빨간색, 배경은 흰색으로 정의합니다. CSS 스타일 패널에는 link2라는 추가 사용자 정의 스타일이 있습니다. 그런 다음 이 스타일을 동적 링크에 적용합니다. 저장하고 브라우저로 열면 완전히 다른 두 가지 링크 스타일을 볼 수 있습니다. 모든 CSS 코드는 다음과 같습니다: 
핫 AI 도구
Undresser.AI Undress
AI Clothes Remover
Undress AI Tool
Clothoff.io
AI Hentai Generator
인기 기사
뜨거운 도구
메모장++7.3.1
SublimeText3 중국어 버전
스튜디오 13.0.1 보내기
드림위버 CS6
SublimeText3 Mac 버전
뜨거운 주제
7326
9
1625
14
1350
46
1262
25
1209
29
vue에서 자리 표시자는 무엇을 의미합니까?
May 07, 2024 am 09:57 AM
여름에는 꼭 무지개를 찍어보세요
Jul 21, 2024 pm 05:16 PM
js에서 스팬은 무엇을 의미하나요?
May 06, 2024 am 11:42 AM
js의 노드 란 무엇입니까?
May 07, 2024 pm 09:06 PM
브라우저 플러그인은 어떤 언어로 작성되어 있나요?
May 08, 2024 pm 09:36 PM
잘못된 가상 화폐 체인을 검색하는 방법은 무엇입니까? 잘못된 가상 화폐 이체 체인 검색에 대한 튜토리얼
Jul 16, 2024 pm 09:02 PM
알 수 없는 속성을 설정하기 위해 vscode vscode 메소드에서 알 수 없는 속성을 설정하는 방법
May 09, 2024 pm 02:43 PM
vue의 파일 수가 적어지면 데이터가 유입될 수 있나요?
May 07, 2024 pm 12:06 PM
