<p style=">text-align</a>: left;"><span style="font-size: 14px">1. 🎜> 콘텐츠와 성능의 분리<strong></strong></span></p> <p style="text-align: left;"><span style="font-size: 14px"> 웹페이지의 성능이 통일되어 수정이 용이하다</span></p> <ul class=" list-paddingleft-2"> <li><p style="text-align: left;"><span style="font-size: 14px"> 리치 스타일은 웹페이지 레이아웃을 더욱 유연하게 만듭니다.</span></p></li> <li><p style="text-align: left;"><span style="font-size: 14px"> 웹페이지 코드의 양을 줄이고, 늘리세요. 웹 페이지 탐색 속도 및 네트워크 대역폭 절약</span></p></li> <li><p style="text-align: left;"><span style="font-size: 14px"> 웹 페이지와 독립적인 CSS를 사용하면 검색 엔진에서 웹 페이지를 색인화하는 데 도움이 됩니다. </span> </p></li> <li> <p style="text-align: left;"><span style="font-size: 14px"> 내장 ID> 외부 ID> 내장</span>클래스</p>>외부 클래스>내장 태그>외부 태그</li> <li><p style="text-align: left;"><span style="font-size: 14px"><a href="//m.sbmmt.com/code/229.html" target="_blank"></a></span> 1.1 도입방법</p></li> <li><p style="text-align: left;"><span style="font-size: 14px"> 4가지 <a href="//m.sbmmt.com/wiki/164.html" target="_blank"></a></span></p></li> </ul> 스타일 ="" 인라인 스타일 시트<p style="text-align: left;"><span style="font-size: 14px"><strong></strong> </span></p> <style> 내부 스타일 시트 <p style="text-align: left;"><span style="font-size: 14px"></span></p> <ul class=" list-paddingleft-2"> <li> < ;link rel="stylesheet" href="" /> 외부 스타일 시트( 가장 많이 사용됨) <p style="text-align: left;"><span style="font-size: 14px"></span></p> </li> <li> <style>@import ""</ style> 가져오기 방법, <p style="text-align: left;"> 사용하지 마세요! ! ! <span style="font-size: 14px"></span></p> </li> <li> <p style="text-align: left;"><span style="font-size: 14px"> 1.2 </span>도입방법</p>우선순위</li> <li><p style="text-align: left;"><span style="font-size: 14px"><span style="background-color: #d8d8d8"></span> Inline> ;내부>외부>가져오기</span></p></li> </ul> 1.3 <p style="text-align: left;">링크 유형과 가져오기 유형의 차이점: <span style="font-size: 14px"><strong><a href="//m.sbmmt.com/code/6066.html" target="_blank"></a></strong></span></p> <link/> 태그는 XHTML에 속하고 @import는 CSS2.1에 속합니다. <p style="text-align: left;"><span style="font-size: 14px"></span></p> <p style="text-align: left;"><span style="font-size: 14px"> <link/> 파일은 먼저 웹 페이지에 로드된 다음 <strong></strong></span></p> <ul class=" list-paddingleft-2"> <li> @import로 가져온 CSS 파일을 사용하여 HTML 구조를 표시합니다. 그런 다음 CSS 파일을 웹 페이지에서 로드합니다. <p style="text-align: left;"><span style="font-size: 14px"></span></p> </li> <li> @import는 CSS2.1에 고유하며 CSS2와 호환되지 않는 브라우저에는 유효하지 않습니다. 1; <p style="text-align: left;"><span style="font-size: 14px"></span></p> </li> <li>2. <p style="text-align: left;">선택자<span style="font-size: 14px"></span></p> </li> <li> 2.1 선택자 및 우선순위<p style="text-align: left;"> <span style="font-size: 14px"></span></p> </li> </ul> <p style="text-align: left;"> <span style="font-size: 14px"> 2.2 선택자 우선순위 <strong></strong></span></p> ID > CLASS ><p style="text-align: left;"><span style="font-size: 14px">3. <strong>기본 스타일(텍스트, 그림, 목록에 일반적으로 사용됨)</strong></span></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>background背景</pre><div class="contentsignin">로그인 후 복사</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre> 1.background-color 背景色 （16进制数 rgb rgba 英文名）</pre><div class="contentsignin">로그인 후 복사</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre> 2.background-image 背景图</pre><div class="contentsignin">로그인 후 복사</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre> 3.background-size 背景大小 （像素、百分比）</pre><div class="contentsignin">로그인 후 복사</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre> 4.background-repeat （repeat-x repeat-y no-repeat）</pre><div class="contentsignin">로그인 후 복사</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre> 5.background-position (通过方向值来指定，通过百分比指定，通过确切的像素值指定)</pre><div class="contentsignin">로그인 후 복사</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre> 6.background-attachment 是否随着浏览器滚动，使用它图片会相对浏览器固定住（bg-position和bg-attachment不要一起使用）</pre><div class="contentsignin">로그인 후 복사</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre> 7.background复合属性 可以把之前的属性定义在这一个里面，【一般书写顺序：颜色、图片、是否重复、是否固定、位置】</pre><div class="contentsignin">로그인 후 복사</div></div> <p style="text-align: left;"><span style="font-size: 14px"><strong>색상</strong></span></p> <ol class=" list-paddingleft-2"> <li><p style="text-align: left;"><span style="font-size: 14px">color는 텍스트의 색상을 지정합니다. </span></p></li> <li><p style="text-align: left;"><span style="font-size: 14px">opacity는 요소의 투명도를 설정합니다. 1 불투명 0 완전 투명</span></p></li> </ol> <p style="text-align: left;"><span style="font-size: 14px"><strong>글꼴 글꼴</strong></span></p> <ol class=" list-paddingleft-2"> <li><p style="text-align: left;"><span style="font-size: 14px"><a href="//m.sbmmt.com/wiki/826.html" target="_blank">글꼴 - style</a>은 텍스트의 글꼴 스타일을 지정합니다(<strong>normal, italic</strong>) </span></p></li> <li><p style="text-align: left;"><span style="font-size: 14px"><a href="//m.sbmmt.com/wiki/862.html" target="_blank">font-variant</a> 작은 대문자에 대한 텍스트(영어에서 작동) </span></p></li> <li><p style="text-align: left;"><span style="font-size: 14px"><a href="//m.sbmmt.com/wiki/858.html" target="_blank">font-weight</a>가 텍스트의 두께를 지정하는지 여부를 지정합니다(<strong> 두 가지 스타일만 </strong>) 굵은 볼드</span></p></li> <li><p style="text-align: left;"><span style="font-size: 14px">font-size는 텍스트 글꼴 크기를 지정합니다</span></p></li> <li><p style="text-align: left;"> <span style="font-size: 14px"> <a href="//m.sbmmt.com/wiki/804.html" target="_blank">글꼴군</a> 특정 글꼴을 사용하도록 텍스트 정의 </span></p></li> </ol> <p style="text-align: left;"><span style="font-size: 14px">자주 사용하는 중국어 글꼴군 목록 http://www .php.cn/ xiazai/sucai/ziti</span></p> <p style="text-align: left;"><span style="font-size: 14px"><strong> 글꼴 </strong><strong>복합 속성</strong></span></p> <p style="text-align: left;"><span style="font-size: 14px"><strong> 일반적인 순서: 글꼴 스타일, 작은 대문자 여부, 글꼴 두께, 글꼴 크기, 글꼴 </strong></span></p> <p style="text-align: left;"><span style="font-size: 14px"> <strong>텍스트 텍스트 속성</strong></span></p> <p style="text-align: left;"><span style="font-size: 14px"> color , text-align , <a href="//m.sbmmt.com/wiki/864.html" target="_blank">line-height</a> , <a href="//m.sbmmt.com/wiki/865.html" target="_blank">letter-spacing</a> , <a href="//m.sbmmt.com/wiki/869.html" target="_blank">vertical-align</a> , <a href="//m.sbmmt.com/wiki/867.html" target="_blank">text-indent</a> ,<a href="//m.sbmmt.com/wiki/859.html" target="_blank">text-꾸밈</a> ;</span></p> <p style="text-align: left;"><span style="font-size: 14px">------[vertical-align------>1. 일반적으로 텍스트 상자 입력에 사용됩니다. 2. {<a href="//m.sbmmt.com/wiki/927.html" target="_blank">display</a>: table-cell;}과 결합하여 이미지를 수직으로 중앙에 배치할 수 있습니다.]</span></p> <p style="text-align: left;"><span style="font-size: 14px">----[valign---- -> 테이블 셀에만 적용됩니다. 예를 들어<td valign='<a href="//m.sbmmt.com/wiki/904.html" target="_blank">top</a>' height='100px'>이것은 셀입니다</td> >------ 【align----> <hr/>에 적용됩니다. 예: <hr align="</span>right</p>" <p style="text-align: left;">width<span style="font-size: 14px">=" 200" size="20" color="pink"/> ;<a href="//m.sbmmt.com/wiki/905.html" target="_blank"></a><a href="//m.sbmmt.com/wiki/835.html" target="_blank"></a> <table> 예: <table border="1" width="300" align ="center">·····</table> /> <span>이미지 상단을 기준으로 텍스트가 표시됩니다.</span></p> <p style="text-align: left;"> <span style="font-size: 14px"> 🎜></span></p>
