CSS 구현 및 선택기

이번 강의 내용:

1. CSS를 구현하는 네 가지 방법

1. 각 html 태그에는 스타일 스타일속성이 있으며, 이 속성의 값은 CSS 코드입니다. (태그 1개당)
2, style 태그를 사용하세요. 일반적으로 head 태그에 정의됩니다. (여러 개의 동일한 태그의 경우)
3. 여러 페이지에서 동일한 스타일을 사용하는 경우 해당 스타일을 CSS 파일Import

4, HTML 헤더 태그의 link 태그를 통해 CSS 파일 연결

2.Selector

label selector p{}
class selector .haha
id selector #qq (id 값은 페이지에 있습니다. 고유합니다. , 이 속성은 CSS에서 사용되는 것 외에도 javascript)
클래스 선택기와 동일하게 사용되기 때문에 ID 선택기의 우선순위는 클래스 선택기의 보다 높습니다. 우선순위가 높을수록

3. CSS 노트

css: 웹 콘텐츠와 표시 스타일을 분리하여 표시 기능을 개선합니다.

CSS 레이어 样样

계단식 스타일 시트

는 웹페이지의 스타일을 별도로 분리하고 CSS로 완벽하게 제어하며 향상된 스타일 재사용 및 확장성을 제공합니다.

형식: 선택기 {속성 이름: 속성 값; 속성 이름: 속성 값;...}

CSS를 HTML과 결합하는 4가지 방법:

1 각 HTML 태그에는 스타일 속성이 있습니다

2. 페이지에 동일한 스타일의 태그가 여러 개 있으면 스타일 태그를 정의하여 재사용을 위해 스타일을 캡슐화할 수 있습니다

       <style type=”text/css”>css代码</style>

로그인 후 복사

3. 여러 페이지에서 동일한 스타일을 사용하는 경우 해당 스타일을 별도의 CSS 파일로 캡슐화하여 가져올 수 있습니다.

       <style type=”text/css”>@import url(“1.css”);</style>

로그인 후 복사

4 , HTML 헤더 태그의 링크 태그를 통해 CSS 파일을 연결하세요

       <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>

로그인 후 복사

팁: 스타일의 재사용성과 확장성을 높이려면 여러 스타일을 별도로 정의하고 p와 같은 CSS 파일로 캡슐화하세요. css, p.css... 일반 CSS 파일에서는 import를 사용하여 이러한 CSS 파일을 가져온 다음 HTML 페이지의 link 태그를 사용하여 일반 CSS 파일을 가져옵니다.

우선순위: 근접성 원칙 태그에 설정된 스타일 속성은 다른 스타일을 재정의할 수 있습니다.

선택기:

1 태그 선택기: 각 HTML 태그 이름은 선택기입니다.

2 클래스 선택기: 지정합니다. js 참조 시 className을 사용하세요. 3. ID 선택기: JavaScript에서 요소를 쉽게 얻을 수 있도록 태그의 id 속성이 최대한 고유해야 합니다. . 확장 선택기 :

~ 연결 선택기:

의

태그

테이블 p는

테이블 의 p 영역 을 나타냅니다.

: 요소의

상태 (예: 기본 상태, 클릭 상태, 마우스 오버 상태 등) hyperlink

:link a:visited a:hover a:active

LVHA 주문

删除超链接默认下划线：text-decoration：none

p:first-letter p:first-line focus:IE6不支持

CSS滤镜：通过一些代码丰富了的样式

网页设计时，p+CSS

p和P标签都属于行级区域，回车效果，SPAN标签为块级区域，无回车效果

可加border、color等属性，P标签中不要嵌套p标签

四、代码一

<!--
本课内容：
一、实现CSS四种方式
1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签)
2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)
3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入
    <style type=”text/css”>@import url(“1.css”);</style>
4，通过HTML头标签中的link标签链接一个CSS文件
    <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>
二、选择器
标签选择器 div{}
类选择器 .haha
id选择器 #qq  (id的取值在页面中是唯一的，因为该属性除了给CSS使用，还要给javascript使用)
类选择器和id选择器用法一样，id选择器的优先级比类选择器高，优先级越少越高 
 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- type指定下面的css以什么方式解析 -->
<!--指定这两个样式都作用与div，所以用div后的大括号括起来-->
<!-- css一般放在头部，因为要预先加载，所以每个出现div的位置都已经被换了样式 -->
<!--
第二种方式：
标签选择器
div{
        background-color: #000;
        color: #FFF    
    }

 -->
<!-- @IMPORT url("div.css");第三种方式 -->
<!-- 第四种 link -->
<link rel="stylesheet" href="div.css" type="text.css">
<style type="text/css">
/*
    @IMPORT url(1.css);
    @IMPORT url(div.css);
@IMPORT url(span.css);
*/
div.haha{
    background-color: #000;
}
</style>
<!-- 类选择器div.haha 优先级比标签选择器高 约少数，优先级越高 -->
<!-- 类选择器不仅可以相同标签的少部分做，还可以对不同的标签做 -->
<!-- div.haha中的div可以不写，.haha，那就所有的有哈哈类的都变了 -->
<!-- 按钮加多套这样的.haha实现动态样式 -->
</head>
<body>
    <!--
    css和html相结合的第一种方式
    1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签)
    2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)
    3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入
    <style type=”text/css”>@import url(“1.css”);</style>
    4，通过HTML头标签中的link标签链接一个CSS文件
    <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>

     -->
     <!--  -->


    <!-- 样式的重叠 重复样式一最后加载为主，不重复样式层叠，其实都是层叠 -->
    <!-- color: #F00 为颜色的缩写 -->
    <div style ="color: #F00">这是一个div区域1</div>
    <div class="haha">这是一个div区域2</div>
    <span>span区域1</span>
    <span>span区域2</span>
    <p>这是一个段落1</p>
    <p>这是一个段落2</p>

    
</body>
</html>

로그인 후 복사

五、代码二

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 
<html xmlns=" 
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><!--link rel="stylesheet" href="1.css" type="text/css" /-->
<style type="text/css">/*@import url(1.css);

p{
        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,p 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;}p: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属性    
    -->

        <p id="qq">这是一个p<b>区域</b>1</p>
        <p class="haha" id="qq">这是一个p区域2</p>
        <span>span<b>区域</b>1</span>
        <span class="haha">span区域2</span>
        <p>这是一个段落1</p>
        <p class="haha">这是一个段落2</p></body></html>

로그인 후 복사

위 내용은 CSS를 구현하고 선택기의 샘플 코드를 공유하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!