CSS の実装とセレクター

このレッスンの内容:

1. CSS を実装する 4 つの方法

1. 各 html タグには style 属性があり、この属性の値は css コードです。 (1つのタグの場合) 2、
styleタグを使用します。通常は head タグで定義されます。 (複数の同一タグの場合) 3. 複数のページで同じスタイルを使用する場合、スタイルを
CSS ファイルImport
4、HTML ヘッダータグの
link タグを介して CSS ファイルをリンクします

2. セレクター

ラベルセレクター p{}
クラスセレクター .haha
idセレクター #qq (idの値はページ内で一意です) , この属性は、CSS によって使用されるだけでなく、javascript でも使用されるためです。クラスセレクターは ID セレクターと同じように使用されます。ID セレクターの
優先度は、クラスセレクターのよりも高くなります。優先度が高いほど

3. CSS ノート

css: 表示機能を改善するために、Web ページのコンテンツと表示スタイルを分離します。 CSS レイヤー样样

カスケードスタイルシート

は Web ページ内のスタイルを個別に分離し、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 ヘッダータグの link タグを通じて CSS ファイルをリンクします

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

ログイン後にコピー

ヒント: スタイルの再利用性とスケーラビリティを向上させるには、複数のスタイルを個別に定義し、それらを CSS ファイルとしてカプセル化します。 .css、p. css... 一般的な CSS ファイルでは、import を使用してこれらの CSS ファイルをインポートし、HTML ページで link タグを使用して一般的な CSS ファイルをインポートします。

優先度: 近接性の原則タグに設定されたスタイル属性は他のスタイルをオーバーライドできます

セレクター:

1. タグセレクター: 各 HTML タグ名はセレクター

2. クラスセレクター:

クラス

を指定します。スタイルを定義するときにいくつかのポイントを追加します

jsを参照する場合は className を使用します 3. ID セレクター: JavaScript が要素を取得しやすくするために、タグの id 属性はできる限り一意である必要があります

4 。

ハイパーリンク

:リンク

:訪問済み a:ホバー a:アクティブ

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 中国語 Web サイトの他の関連記事を参照してください。