HTMLベースのCSS

31187 ワード

cssスタイルの適用には、3つの方法があります
1、ラベルの内部はstyle属性を通じて、ラベルにcssスタイルを設定する

<div id=i1 style="background-color: rebeccapurple;height: 100px;width: 100px">   div>

2、headにstyleラベルを追加し、styleラベルの内部でidセレクタでターゲットhtmlにcssスタイルを構成する(id属性は使用時に#番号を追加する必要がある)

<head>
<style>

        #i1{
        background-color: gold;
        height: 100px;
        width: 100px;
        }
style>
head>

<body>
<div id="i1">   div>
body>

3、スタイルシートファイルを作成する**.css、headラベルでlinkで現在のhtmlに導入
新しいStylesheetファイルをcssで終わります---demo.css

demo.css    ：
#i2{
    background-color: palevioletred;
    height: 100px;
    width: 100px;
}



<head>

<link rel="stylesheet" href="demo.css">

head>

CSS優先度
ラベルの中でstyleの優先度が最も高く、次にラベルを中心にコードの中で近く探します.つまり、下から上へ探して、どれに近いかを優先します.
セレクタ
idセレクタ
classセレクタ
ラベルセレクタ
レベルセレクタ
属性セレクタ

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        /*id   */
        #i1{
            background-color: green;
            width: 100px;
            height: 100px;
        }

        /*class    */
        .c1{
            background-color: green;
            width: 100px;
            height: 100px;
        }
        .wh{
            width: 100px;
            height: 100px;
        }
        .bc-1{
            background-color: red;
        }
        .bc-2{
            background-color: blue;
        }
       
        /*     */
        div {
            background-color: green;
        }

        /*         */
        div span{
            background-color: red;
        }
        #i1 span{
            
        }
        .c1 span{
            
        }

        /*     */
        div[dsx="nb"]{
            background-color: red;
        }
    style>

head>
<body>

    <div id="i1">ID   div>


    <div class="c1">class   div>


    <div class="wh bc-1">div>
    <div class="wh bc-2">div>


    <div class="wh">1111div>


    <div>
        <span>dsxspan>
    div>


    <div dsx="nb" class="wh">div>

body>
html>

ディスプレイのプロパティ:


 
<div style="height: 100px;background-color: black;display: inline">    div>
 

 
<span style="height: 100px;background-color: red;display: block;">    span>
 

 

 
<span style="background-color: blue;width: 100px;height: 100px;">   span>
 

 
<span style="background-color: blue;width: 100px;height: 100px;display: inline-block;">   span>
 

 
<span style="background-color: #336699;display: none">     span>
 
 
 

 

 
<div style="border: 1px solid red;height: 100px">
 
<div style="background-color: blue;height: 70px;margin-top: 30px">div>
 
div>
 

 
<div style="border: 1px solid red;height: 100px">
 
<div style="background-color: blue;height: 70px;padding: 10px">     div>
 
div>

例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
       
        .wh {
            width: 100px;
            height: 100px;
        }

        .bc-1 {
            background-color: red;

        .dis-inline {
            /*     ，      */
          display: inline;
        }
        .dis-block{
            /*     */
            display: block;
        }
        .dis-block-inline{
            /*       */
            display: inline-block;
        }
        .c1{
            border: 1px solid red;
            width: 100%;
            height: 200px;
        }
        .c2{
            background-color: blue;
            width: 100%;
            height: 48px;
            /*   */
            /*margin-top: 0;*/
            /*   */
            padding-top: 0;

        }
    style>

head>
<body>










<input type="text" placeholder="">
    <div class="c1">
        <div class="c2">div>
    div>

body>
html>

技術学習博6

1.5 css位置決め-stacking contextsとBFC-refer to『CSS in Depth』