CSS를 구현하는 네 가지 방법과 선택기 소개
- 零下一度원래의
- 2017-06-24 14:18:491412검색
CSS 구현 및 선택기
이번 강의 내용:
1. CSS를 구현하는 네 가지 방법
1. 각 html 태그에는 스타일 스타일 속성이 있으며, 이 속성의 값은 CSS 코드입니다. (태그 1개당)
2, style 태그를 사용하세요. 일반적으로 head 태그에 정의됩니다. (여러 개의 동일한 태그의 경우)
3. 여러 페이지에서 동일한 스타일을 사용하는 경우 해당 스타일을 CSS 파일Import
4, HTML 헤더 태그의 link 태그를 통해 CSS 파일 연결
2. Selector
label selector div{}
class selector .haha
id selector #qq (id 값은 페이지 내에서 고유합니다. 이 속성을 사용하기 때문입니다. CSS뿐만 아니라 JavaScript에서도 사용됩니다.)
클래스 선택자는 ID 선택자와 동일하게 사용됩니다. 우선 순위가 낮을수록 높습니다
3개, CSS 참고
css: 웹페이지 콘텐츠와 표시 스타일을 분리하여 표시 기능을 개선합니다.
CSS 캐스케이딩 스타일 시트
는 웹 페이지의 스타일을 분리하고 CSS로 완전히 제어되므로 스타일 재사용성과 확장성을 향상시킵니다.
형식: 선택기 {속성 이름: 속성 값;...}
CSS를 HTML과 결합하는 4가지 방법:
1. 각 HTML 태그에는 스타일 속성이 있습니다
2. 페이지에 동일한 스타일이 있는 여러 레이블이 있으면 재사용할 스타일 레이블 패키징 스타일을 정의할 수 있습니다.
& lt 스타일 유형 = "text/css" & gt; css code & lt;/style & gt; 여러 페이지 사용 동일한 스타일을 사용하는 경우 해당 스타일을 CSS 파일로 별도로 패키징하여 가져올 수 있습니다
,,,,,,,,,,,,,,,,,,,,,,,,, , , 라벨의 링크 라벨 링크
& lt; link rel = "styleSheet" href = "1.CSS" 미디어 속성 선택 사항, 기본 장치 화면/& gt; 확장성, 여러 스타일을 CSS 파일로 개별적으로 정의 및 캡슐화 as p.css, div.css... 전체 CSS 파일에서 import를 사용하여 이러한 CSS 파일을 가져온 다음 HTML 페이지의 link 태그를 사용하여 이를 추가합니다. 전체 CSS 파일을 가져오기만 하면 됩니다.
우선순위: 근접성 원칙 태그에 설정된 스타일 속성은 다른 스타일을 무시할 수 있습니다.
선택기:
1. 태그 선택기: 각 HTML 태그 이름은 선택기입니다.
2. 태그를 지정하고 스타일을 정의할 때 몇 가지 포인트를 추가하세요. js
3. ID 선택기: 태그의 id 속성은 JavaScript가 요소
를 얻을 수 있도록 고유한지 확인하세요.
a. 연관 선택: 签 라벨의 태그
TABLE DIV는 테이블의 DIV 영역을 나타냅니다. B,조합
선택기: 다중 선택기 쉼표 구분C, 요소 선택기: 요소의 기본 상태 하이퍼링크의 기본 상태로는 클릭 상태, 마우스오버 상태 등이 있습니다. ~ | : 풍부한 스타일로 디자인할 때
웹 페이지 디자인,DIV+CSS
DIV 및 P 태그는 행 수준 영역, Enter 효과에 속하며 SPAN 태그는 블록 수준 영역이며 캐리지 리턴 효과가 없습니다. 테두리 및 색상과 같은 속성을 추가할 수 있습니다. P 태그에 DIV 태그를 중첩하지 마세요.
4. 코드 1
1 <!-- 2 本课内容： 3 一、实现CSS四种方式 4 1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签) 5 2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签) 6 3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入 7 <style type=”text/css”>@import url(“1.css”);</style> 8 4，通过HTML头标签中的link标签链接一个CSS文件 9 <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>10 二、选择器11 标签选择器 div{}12 类选择器 .haha13 id选择器 #qq (id的取值在页面中是唯一的，因为该属性除了给CSS使用，还要给javascript使用)14 类选择器和id选择器用法一样，id选择器的优先级比类选择器高，优先级越少越高
15 -->16 <!DOCTYPE html>17 <html>18 <head>19 <meta charset="UTF-8">20 <title>Insert title here</title>21 <!-- type指定下面的css以什么方式解析 -->22 <!--指定这两个样式都作用与div，所以用div后的大括号括起来-->23 <!-- css一般放在头部，因为要预先加载，所以每个出现div的位置都已经被换了样式 -->24 <!--25 第二种方式：26 标签选择器27 div{28 background-color: #000;29 color: #FFF
30 }31 32 -->33 <!-- @IMPORT url("div.css?1.1.11");第三种方式 -->34 <!-- 第四种 link -->35 <link rel="stylesheet" href="div.css?1.1.11" type="text.css?1.1.11">36 <style type="text/css">37 /*38 @IMPORT url(1.css);39 @IMPORT url(div.css);40 @IMPORT url(span.css);41 */42 div.haha{43 background-color: #000;44 }45 </style>46 <!-- 类选择器div.haha 优先级比标签选择器高 约少数，优先级越高 -->47 <!-- 类选择器不仅可以相同标签的少部分做，还可以对不同的标签做 -->48 <!-- div.haha中的div可以不写，.haha，那就所有的有哈哈类的都变了 -->49 <!-- 按钮加多套这样的.haha实现动态样式 -->50 </head>51 <body>52 <!--53 css和html相结合的第一种方式54 1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签)55 2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)56 3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入57 <style type=”text/css”>@import url(“1.css”);</style>58 4，通过HTML头标签中的link标签链接一个CSS文件59 <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>60 61 -->62 <!-- -->63 64 65 <!-- 样式的重叠 重复样式一最后加载为主，不重复样式层叠，其实都是层叠 -->66 <!-- color: #F00 为颜色的缩写 -->67 <div style ="color: #F00">这是一个div区域1</div>68 <div class="haha">这是一个div区域2</div>69 <span>span区域1</span>70 <span>span区域2</span>71 <p>这是一个段落1</p>72 <p>这是一个段落2</p>73 74 75 </body>76 </html>
五、代码二
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><!--link rel="stylesheet" href="1.css?1.1.11" type="text/css" /--><style type="text/css">/*@import url(1.css);
div{
background-color:#09F;
color:#FFF;
}
.haha{
background-color:#FF3;
color:#0C0;
}*//*预定样式，实现动态的加载。.hehe{
background-color:#C93;
color:#00F;
}*//*#qq{通常ID的取值在页面中是唯一的，因为该属性除了给css使用，还可以被js使用。id通常都是为了去标示页面中一些特定区域使用的。
background-color:#000;
color:#FFF;
}*//*span b{关联选择器 选择器中的选择器background-color:#09F;
color:#FFF;
}*//*组合选择器*//*.haha,div b{对多种选择器进行相同样式定义background-color:#000;
color:#C00;
}*//*伪元素
超链接的状态。*//*未访问*/a:link{background-color:#06F;color:#FFF;text-decoration:none;font-size:18px;}/*鼠标悬停*/a:hover{background-color:#FFF;color:#F00;font-size:24px;}/*点击效果*/a:active{background-color:#000;color:#FFF;font-size:36px;}/*访问后效果*/a:visited{background-color:#FF9;color:#000;text-decoration:line-through;}p:first-letter{font-size:36px;color:#F00;}div:hover{background-color:#F00;color:#FFF;}input:focus{background-color:#09F;}#qq{float:left;}/*L V H A*/</style></head><body><input type="text" /><input type="text" /><hr /><a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a><hr /><!--css和html相结合的第一种方式。
1，每一个html标签中都有一个style样式属性。该属性的值就是css代码。
2，使用style标签的方式。 一般都定义在head标签中
优先级：标签选择器<类选择器<id选择器<style属性 --><div id="qq">这是一个div<b>区域</b>1</div><div class="haha" id="qq">这是一个div区域2</div><span>span<b>区域</b>1</span><span class="haha">span区域2</span><p>这是一个段落1</p><p class="haha">这是一个段落2</p></body></html>
위 내용은 CSS를 구현하는 네 가지 방법과 선택기 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!