CSS 之怀疑自己的审美 1 （Day49）

CSS概述

CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

一.css的四种引入方式

1.行内式

行内式是在标记的style属性中设定css样式，这种方式没有体现css的优势，so不推荐使用

 <p style="background-color: rebeccapurple">hello yuan</p>

2.嵌入式

嵌入式是将css样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p{

            background-color: #2b99ff;

        }

    </style>

</head>

3.链接式（推荐使用）

将一个.css文件引入到HTML文件中

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

4.导入式

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

 <style type="text/css">

           @import"mystyle.css"; 此处要注意.css文件的路径

 </style>

注意：

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

二.css的选择器（Selector）

“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

1 基础选择器

＊ ：           通用元素选择器，匹配任何元素                    * { margin:0; padding:0; }

E  ：          标签选择器，匹配所有使用E标签的元素               p { color:green; }

.info和E.info: class选择器，匹配所有class属性中包含info的元素   .info { background:#ff0; }    p.info { background:blue; }

#info和E#info  id选择器，匹配所有id属性等于footer的元素         #info { background:#ff0; }   p#info { background:#ff0; }

2 组合选择器

E,F         多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔         div,p { color:#f00; }

 E F         后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔    li a { font-weight:bold;

 E > F       子元素选择器，匹配所有E元素的子元素F                            div > p { color:#f00; }

 E + F       毗邻元素选择器，匹配所有紧随E元素之后的同级元素F                  div + p { color:#f00; }

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div1>p{

            background-color: aqua;

            color: deeppink;

        }

        .main2>div{

            background-color: blueviolet;

            color: chartreuse;

        }

    </style>

</head>

<body>

      <div class="div1">hello1

          <div class="div2">hello2

              <div>hello4</div>

              <p>hello5</p>

          </div>

          <p>hello3</p>

      </div>

      <p>hello6</p>

<hr>

     <div class="main2">1

       <div>2

           <div>

           </div>

       </div>

       <div>

           </div>

     </div>

</body>

</html>

示例

注意嵌套规则：

块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        [suoning]{

            color: blueviolet;

        }

        .he>div{

            color: bisque;

        }

    </style>

</head>

<body>

<div class="he">111

    <p class="fr">222

        <div>333</div>

    </p>

    <div>444</div>

</div>

***************************

<div suoning="sb">ddd

         <p>pppp</p>

     </div>

     <p suoning="sb2">ddd2

         <p>pppp2</p>

     </p>

</body>

</html>

3 属性选择器

E[att]         匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）   p[title] { color:#f00; }

 E[att=val]     匹配所有att属性等于“val”的E元素                                 div[class=”error”] { color:#f00; }

 E[att~=val]    匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素      td[class~=”name”] { color:#f00; }

 E[attr^=val]    匹配属性值以指定值开头的每个元素                     div[class^="test"]{background:#ffff00;}

 E[attr$=val]    匹配属性值以指定值结尾的每个元素                     div[class$="test"]{background:#ffff00;}

 E[attr*=val]    匹配属性值中包含指定值的每个元素                     div[class*="test"]{background:#ffff00;}