HTML 및 CSS에 대한 몇 가지 지식 요약
전체 페이지는 세 부분으로 구성됩니다.
html: Hypertext Markup Language
의미 태그를 통해 페이지 "구조" 구축
css: Cascading Style Sheet
페이지 담당 "스타일" 및 페이지 미화
js: 경량 스크립트 언어; 상호 작용은 두 가지 위치(동작)를 나타냅니다.
-
페이지의 프런트 엔드에서 작성한 "애니메이션"
" 프론트엔드와 백엔드의 데이터 상호 작용
구조, 스타일, 동작 결합
CSS 소개 방법
-
Embedded;(임베디드)
<style> body{ height:100%; background-color: red; } </style>로그인 후 복사 -
인라인 스타일
<body style="height:100%; background: #333333">
로그인 후 복사 -
외부 링크(실제 개발) , 모든 외부 링크 사용)
<link rel="stylesheet" href="style.css?1.1.11"/>
로그인 후 복사
css 우선순위
Inline>embedded>externallinks
css 공통 속성 및 스타일
설정이 잘못되면 노란색 느낌표가 표시됩니다.
색상: 색상을 표현하는 세 가지 방법이 있습니다
단축키: c+tab영어: red
rgb(255,0 ,0)
#fff#ffffont-size:字体大小
快捷键：fsz30->font-size:30px
font:400 14px/28px "宋体";background:添加背景
图片默认是横向重复和纵向重复位置：
横向位置：left center right
纵向位置：top center bottom
综合写法：
background: url("images/bg2.png") no-repeat left center red;background-image:url("图片地址")
background-repeat:no-repeat; /repeat-x;/repeat-y
background-position:0 0
background-color:red
字体是否倾斜
font-style:italic 倾斜／ normal 正常
下划线和删除线
text-decoration: line-through; 删除线
text-decoration: none; 去除下划线
text-decoration: underline;添加下划线
css中的选择器：
1.标签选择器：div p ul li dt dd em i u del strong b input label from table
缺点：只能进行共性的操作，无法个性操作
2.class选择器
3.id：
.class名,同一个页面能有无数个相同的class名#id名글꼴 크기: 글꼴 크기
-
단축키: fsz30->글꼴 크기:30px
글꼴: 400 14px/28px "宋体"; - 배경: 배경 추가
그림은 기본적으로 가로 및 세로로 반복됩니다
-
위치: - 가로 위치: 왼쪽 가운데 오른쪽
- 세로 위치: 상단 중앙 하단
- 종합 작성 방법:
- 배경-반복:no-repeat; /repeat-x;/repeat-y
배경: url("images/bg2.png") 반복 없음 왼쪽 중앙 빨간색;- 배경 -위치:0 0
- 배경 색상:빨간색
- 글꼴 기울어짐 여부
글꼴 스타일: 기울임꼴 기울기/보통 일반
- 밑줄 및 취소선
-
text -장식: 선 통과; - 텍스트 장식: 없음; 밑줄 제거
- CSS의 선택기:
- 1. div p ul li dt dd em i u del Strong b from table
단점: 공통 작업만 수행할 수 있으며 개별 작업은 수행할 수 없습니다.
- 2.class selector
3 .id:
.class 이름, 동일한 페이지에는 수많은 동일한 클래스 이름이 있을 수 있습니다#id 이름, 동일한 페이지에는 ID 이름만 있을 수 있습니다(ID 이름은 반복될 수 없습니다)-
실제 개발 과정에서는 클래스를 사용하여 스타일을 설정하고 ID를 사용하여 요소를 얻습니다
🎜🎜🎜🎜4. 하위 항목 선택기: div p(div 컨테이너 및 하위 항목 아래의 모든 p 요소 선택) 🎜🎜🎜🎜 5. 하위 선택자: div > p(div 컨테이너 아래의 하위 항목 선택); 교차 선택자: div.div1🎜🎜🎜🎜7. 8. 와일드카드 *: 모든 요소를 나타냅니다🎜🎜🎜🎜9. 순서 선택기: IE8+🎜🎜🎜🎜 🎜div > p:first-child🎜🎜🎜🎜div > p:last-child🎜🎜🎜🎜🎜 10. 다음 형제 선택기 ul li+li{}는 개발에 일반적으로 사용되는 브라우저 🎜🎜🎜🎜chrome🎜🎜🎜🎜IE7~11🎜🎜🎜🎜firefox🎜🎜🎜🎜CSS와 호환됩니다. 상속과 계단식 wont로 시작하는 부족은 선회가 상속 될 수 있습니다. 무게는 무한합니다(적을수록 좋습니다)🎜🎜🎜🎜id 무게가 클래스 무게보다 큽니다🎜🎜 🎜🎜css 상자 모델🎜🎜🎜🎜css 상자 모델은 5개 부분으로 구성됩니다: 🎜🎜🎜🎜🎜너비와 높이+ padding+border+margin🎜🎜🎜🎜🎜한 줄 텍스트의 가운데 맞춤: 높이 = 줄 높이🎜🎜🎜🎜 여러 줄 텍스트의 가운데 맞춤, 안쪽 여백 및 줄 높이🎜🎜🎜🎜padding:🎜<div class="div1 div2 div3" id="div1"></div>
로그인 후 복사 padding是内边距
padding的颜色和内容的颜色一致；background-color填充的是border以内的颜色
-
padding是复合值
padding:30px; ->pl30; pt30;pr30;pb30
padding:20px 30px; ->上下为20px 左右30px
padding:10px 20px 30px; -> 上10px 左右20px 下30px
padding:10px 20px 30px 10px; 上 右 下 左如果现设置padding:30px
再设置padding-left:10px
请问最后的值各是多少？
左10px; 其他都是30px margin：外边框
border:
border:1px solid #000;
border-width
border-style：solid（实体）,dashed（虚线）,dotted（点）
border-color
行内元素和块级元素
p标签虽然是文本标签，但是它可以当容器来使用，p标签内一定不能放div; p段落也是块元素，他独占一行
文本元素：p span a i em u b strong img
容器级：div li dt dd h级（不建议）
除了p，所有的文本元素，都是行内元素
所有容器级别的元素，都是块元素
块和行内元素的相互转化
display：inline; //行内
display:inline-block;//行内块
display：block; //块
关于定位：大部分情况，建议的是:父相子绝（父亲：相对定位，儿子：绝对定位）
关于脱离文档流的方法
浮动 float:left; float:right;
绝对定位 position:absolute;
固定定位 position:fixed;
重点：1）父相子绝 2）行内元素一点脱离文档流，就可以设置宽高了；
注意：行内元素，一旦脱离文档流，虽然能设置宽高，但是，如果不设置宽的话，会默认跟内容一样宽；而块级元素，如果不设置宽度的话，默认跟父级一样块，没有父级的话，默认跟屏幕一样宽
清除浮动
固定高度height:xxxpx;
缺点：如果作为产品列表的容器展示，我们无法知道容器的具体高度overflow:hidden
clear:both
缺点：可以解决浮动引起的文档流错乱问题，但是上面浮动元素的父容器该没有高度还没有高度-
伪类清除浮动
ul::after{ display: block; height:0; content: ''; clear: both; }로그인 후 복사
溢出隐藏
清除浮动
缺点：如果父容器比较小，子容器比较大；父容器如果通过overflow:hidden来清除浮动的话，子容器就看不到了
透明度处理
rgba() 背景透明，文字不透明；
-
opacity:0 背景透明，文字也透明；
opacity:0.1;/*不兼容IE7浏览器*/ filter:alpha(opacity=10);
로그인 후 복사
最基本的开发，首先必须创建的项目结构
images文件夹：放切好的图片
css文件夹：放置css文件：index.css
index.html文件
关于继承
宽度继承：如果没有父级，块元素的宽度默认跟可视区一样宽；如果有父级的情况下，默认跟父级宽度一样宽(宽度可以继承，但高度无法继承;)
font可以继承
color可以继承：当遇到a标签的时候， color无效；
line-height可以继承
当文本超度固定宽度的处理方法：
-
单行文本出超固定宽度出现省略号的写法：
white-space:nowrap; overflow:hidden; text-overflow:ellipsis
로그인 후 복사 英文不折行的问题处理：
word-wrap:break-word;出现滚动条的写法
overflow-y:scroll;
区分伪类和伪元素
伪元素：用:和::都可以，现在建议用::
伪类：给当前选择器添加动效，只能用:
위 내용은 HTML 및 CSS에 대한 몇 가지 지식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
Vue에서 부트 스트랩을 사용하는 방법
Apr 07, 2025 pm 11:33 PM
vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.
HTML, CSS 및 JavaScript 이해 : 초보자 안내서
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML에서 React의 역할 : 사용자 경험 향상
Apr 09, 2025 am 12:11 AM
React는 JSX와 HTML을 결합하여 사용자 경험을 향상시킵니다. 1) JSX는 개발을보다 직관적으로 만들기 위해 HTML을 포함시킨다. 2) 가상 DOM 메커니즘은 성능을 최적화하고 DOM 운영을 줄입니다. 3) 유지 보수성을 향상시키기위한 구성 요소 기반 관리 UI. 4) 상태 관리 및 이벤트 처리는 상호 작용을 향상시킵니다.
HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작
Apr 18, 2025 am 12:09 AM
웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.
HTML의 미래 : 웹 디자인의 진화 및 트렌드
Apr 17, 2025 am 12:12 AM
HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.
HTML : 웹 페이지 구조 구축
Apr 14, 2025 am 12:14 AM
HTML은 웹 페이지 구조를 구축하는 초석입니다. 1. HTML은 컨텐츠 구조와 의미론 및 사용 등을 정의합니다. 태그. 2. SEO 효과를 향상시키기 위해 시맨틱 마커 등을 제공합니다. 3. 태그를 통한 사용자 상호 작용을 실현하려면 형식 검증에주의를 기울이십시오. 4. 자바 스크립트와 결합하여 동적 효과를 달성하기 위해 고급 요소를 사용하십시오. 5. 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함되며 검증 도구가 필요합니다. 6. 최적화 전략에는 HTTP 요청 감소, HTML 압축, 시맨틱 태그 사용 등이 포함됩니다.
CRAFT CMS의 캐싱 문제 해결 : Wiejeben/Craft-Laravel-Mix 플러그인 사용
Apr 18, 2025 am 09:24 AM
CRAFTCMS를 사용하여 웹 사이트를 개발할 때 특히 CSS 및 JavaScript 파일을 자주 업데이트 할 때 자주 리소스 파일 캐싱 문제가 발생하면 이전 버전의 파일이 여전히 브라우저에서 캐싱 될 수 있으므로 사용자는 최신 변경 사항을 볼 수 없습니다. 이 문제는 사용자 경험에 영향을 줄뿐만 아니라 개발 및 디버깅의 어려움을 증가시킵니다. 최근에 나는 프로젝트에서 비슷한 문제를 겪었고, 약간의 탐색 후 플러그인 Wiejeben/Craft-Laravel-Mix를 발견하여 캐싱 문제를 완벽하게 해결했습니다.
