Heim > Artikel > Web-Frontend > So implementieren Sie CSS und teilen Beispielcode von Selektoren

So implementieren Sie CSS und teilen Beispielcode von Selektoren

黄舟Original: 2017-06-04 11:45:251342Durchsuche

CSS-Implementierung und -Selektor

Inhalt dieser Lektion:

1. Vier Möglichkeiten zur Implementierung von CSS

1, in jedem HTML--Tag Da ist ein style style -Attribut , und der Wert dieses Attributs ist der CSS-Code. (Für ein Tag)
2, verwenden Sie das Style-Tag . Im Allgemeinen im head-Tag definiert. (Für mehrere identische Tags)
3. Wenn mehrere Seiten denselben Stil verwenden, kann der Stil einzeln als CSS-DateiImport
e69e6b0aecd264995d7265062946ddc9
4. Verknüpfen Sie eine CSS-Datei über das Link-Tag im HTML-Header-Tag
ba165ece2c5fd0323117363af96f7c3f

2 {}

Klassenselektor .haha
id-Selektor #qq (Der Wert von id ist in Es ist eindeutig auf der Seite, da dieses Attribut nicht nur von CSS, sondern auch von Javascript
verwendet wird)Die Verwendung von Klassenselektor und ID-Selektor ist dieselbe und die Priorität von id SelektorHöher als der Klassenselektor, Je niedriger die Priorität, desto höher ist sie
3. CSS-HinweiseCSS: Separater Webseiteninhalt und Anzeigestil, verbesserte Anzeigefunktion.

CSS-Kaskadierung

Stylesheets, kaskadierende Stylesheets Trennen Sie die Stile auf der Webseite und steuern Sie sie vollständig durch CSS, wodurch die Wiederverwendbarkeit und Skalierbarkeit von Stilen verbessert wird.

Format: Selektor {Attributname: Attributwert;...🎜>4 Möglichkeiten, CSS mit HTML zu kombinieren:

HTML-Tag

hat das Stilattribut

2. Wenn auf der Seite mehrere Tags mit demselben Stil vorhanden sind, können Sie den Stil-Tag definieren, um den Stil zur Wiederverwendung zu kapseln

3. Wenn mehrere Seiten denselben Stil verwenden, kann der Stil einzeln als CSS-Datei gepackt und importiert werden

4 Verknüpfen Sie eine CSS-Datei über den Link-Tag HTML-Header-Tag

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

Tipp: Um die Wiederverwendbarkeit und Skalierbarkeit von Stilen zu verbessern, definieren und kapseln Sie mehrere Stile separat in CSS-Dateien, z. B. p.css, p.css... Verwenden Sie in einer gesamten CSS-Datei den Import, um diese CSS-Dateien zu importieren, und verwenden Sie dann das Link-Tag in der HTML-Seite, um die gesamte CSS-Datei zu importieren.

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

Priorität: Proximity-Prinzip Das auf dem Tag festgelegte Stilattribut kann andere Stile überschreiben

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

Selektor:

1 Der HTML-Tag-Name ist ein Selektor

2. Klassenselektor: Das Attribut

class

im Tag wird angegeben. Fügen Sie beim Definieren des Stils einen Punkt

hinzu Referenz Verwenden Sie className

wenn 3. ID-Selektor: Das ID-Attribut des Tags sollte so eindeutig wie möglich sein, damit JavaScript das Element erhalten kann 4. Erweiterter Selektor: a, Assoziationsselektor: Das Tag in der

Tag-Tabelle p repräsentiert den p-Bereich in der

Tabelle

b Selektor: Mehrfachauswahl Gerät durch Kommas getrennt

c. Für Elementselektor : -Status des Elements

, z. B. Standardstatus, Klickstatus, Hover-Status von

Hyperlink Warten

ein

:linkein:visitedein:hoverein:aktive

LV HA-Bestellung

删除超链接默认下划线：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>

五、代码二

06ec0da0662b81b627d11320d6a4fb2d0f3eabac747cdf61a51589c5584ae6e8
b2386ffb911b14667cb8f0f91ea547a7无标题文档6e916e0f7d1e588d4f442bf645aedb2f513977f72c8b82327f1824abcf935081
46d5fe1c7617e3914f214aaf043f4ccf/*@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*/531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d3e0bbf3d1134cd26a111abe10200bc543e0bbf3d1134cd26a111abe10200bc54
    cdcaaee4c9b94464012808ae8e1b67a4e78e5c9c377b77d69dde185bfc3c8b9c伪元素选择器演示5db79b134e9f6b82c0b36e0489ee08edcdcaaee4c9b94464012808ae8e1b67a4

    2fed77d005fcf32fa800c5b796f623ba

        a1d1e34741b1023c91014f88114a0fce这是一个pa4b561c25d9afb9ac8dc4d70affff419区域0d36329ec37a2cc24d42c7229b69747a194b3e26ee717c64999d7867364b1b4a3
        09cf2dde204ba4b4bc44bbca1e10d69a这是一个p区域294b3e26ee717c64999d7867364b1b4a3
        45a2772a6b6107b401db3c9b82c049c2spana4b561c25d9afb9ac8dc4d70affff419区域0d36329ec37a2cc24d42c7229b69747a154bdf357c58b8a65c66d7c19c8e4d114
        d93be627cf66ed4f811209a75bc3477fspan区域254bdf357c58b8a65c66d7c19c8e4d114
        e388a4556c0f65e1904146cc1a846bee这是一个段落194b3e26ee717c64999d7867364b1b4a3
        1c10a5d70aec9f56ea5abb290ee967f3这是一个段落294b3e26ee717c64999d7867364b1b4a336cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

Das obige ist der detaillierte Inhalt vonSo implementieren Sie CSS und teilen Beispielcode von Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erzielen Sie mit CSS3 den Effekt einer Schleife nach rechtsNächster Artikel：So erzielen Sie mit CSS3 den Effekt einer Schleife nach rechts

In Verbindung stehende Artikel

Mehr sehen