CSS学習(一)

31488 ワード

CSS(Cascading Style Sheets)は、ページを美化するための積層スタイルシートと呼ばれています.

一、応用方式

cssのスタイルにはいろいろありますが、cssスタイルを特定のラベルに適用するには3つの方法があります.

1.1ラベルに記入

適用範囲:ラベルを指定します.【推奨されないマルチタグはスタイルを多重化できません】

<div style="color:green;">KOBEdiv>

1.2 headタグで定義

適用範囲:現在のページのすべてのラベル.【推奨、複数のラベル多重化可能スタイル】

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS  title>
    <style>
        /*    div    */
        div {
            color: green;
        }
    style>
head>
<body>
    <div>Alexdiv>
    <div>mjjdiv>
body>
html>

1.3 cssファイルで定義し、適用範囲:cssファイルを導入したすべてのページ。

適用範囲:cssファイルを導入したすべてのページ.【推奨、複数ページ、複数のラベルを多重化できるスタイル】

cssファイルを作成します.例えば、common.css

div {
    color: green;
}

htmlファイルを作成します.例えば、index.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS  title>
    <link rel="stylesheet" href="common.css">
head>
<body>
    <div>Alexdiv>
    <div>   div>
body>
html>

後で企業でcssスタイルを適用すると、単一ページを書くときにheadヘッダにスタイルを書きます.複数ページを書く場合は、スタイルをcssファイルに書き込み、適用するhtmlページにcssを導入すればよい.

二、セレクタ

学習セレクタの目的はhtmlページにラベルを指定することで、後でスタイルを適用するのに便利です.

2.1ラベルセレクタ

bodyで指定したすべてのラベルを見つけます.たとえば、すべてのaラベルを見つけて、色を緑にします.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS  title>
    <style>
        a {
            color: green;
        }
    style>
head>
<body>
    <div>   div>
    <a href="https://www.oldboyedu.com">Alexa>
    <p>Alexp>
    <ul>
        <li>
            <a href="#">  a>
        li>
    ul>
body>
html>

2.2 idセレクタ

bodyでidが一致するラベルを探します.(HTMLではID属性が唯一で、人の身分証明書番号に相当する)、例えばidがi 1に等しいラベルを見つけて、色を緑にします.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS  title>
    <style>
        /*    a  ，       */
        #i1 {
            color: green;
        }
    style>
head>
<body>
    <div>   div>
    <div>
        <span id="i1">  span>
    div>
    <p>  p>
body>
html>

2.3 classセレクタ

bodyにすべてのclass属性値が一致するラベルを見つけます.たとえば、すべてのclassがheadに等しいラベルを見つけて、緑にしました.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS  title>
    <style>
        .head {
            color: green;
        }
    style>
head>
<body>
    <div class="head">   div>
    <div>
        <a href="http://www.sb.com">  a>
    div>
    <p class="head">   p>
body>
html>

2.4属性セレクタ

bodyでclass属性値が一致するラベルを見つけます.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS  title>
    <style>
        /*   class=head  name=boy    */
        .head[name="boy"] {
            color: green;
        }
    style>
head>
<body>
    <div class="head" name="boy" >   div>
    <div>
        <a href="http://www.sb.com">  a>
    div>
    <p class="head" name="hanshuo" >  p>
body>
html>

2.5子孫セレクタ

bodyラベルに親子関係に基づいて指定したラベルを見つけます.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS  title>
    <style>
        .head ul .hat {
            color: green;
        }
    style>
head>
<body>
    <a href="#">   a>
    <div class="head">
        <a class="hat">  a>
        <ul>
            <li>  li>
            <li>
                <a class="hat">     Alexa>
            li>
            <li>
                <a>     Alexa>
            li>
        ul>
    div>
    <div class="head">
        <a href="#">   a>
    div>
body>
html>

2.6セレクタグループ

セレクタをグループ化し、繰り返し記述する必要はありません.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS  title>
    <style>
        /*       */
        /*
        h1 {
            color: green;
        }
        .head h2{
            color: green;
        }
        h3{
            color: green;
        }
        h4{
            color: green;
        }
        */
        h1, .head h2, h3, h4 {
            color: green;
        }
    style>
head>
<body>
    <h1>kobeh1>
    <div class="head">
        <h2>lebronh2>
    div>
    <h3>curryh3>
    <h4>jamesh4>
body>
html>

ASP.NETはHTMLページ要素に対して権限制御を行う(三)

マイクロソフトWebMatrix