CSS学习（页外引用还不懂）

CSS的语法结构为   选择符 {属性：值；}    Selector {Property : Value；}

选择符：通配 *{....}  ， 元素  body{....} 、h1{....}、p{....}  ， 群组 h1,h2,h3,p {....} 同时可一个给多个标签赋予相同的属性

           关系选择符：包含  h1 a{....}　

【一些基本属性：文字装饰text-decoration:    字体 font-family    字体颜色 color    字体大小font-size:px;   外边距margin    内边距padding】

CSS的引入方式用就近原则

行内引用 （直接在标签里写入style属性）

     例如：<body style="background-color:#8484FF;">
                <h1 style=" font-size:20px; font-family:仿宋;">在H1标签里写入style属性</h1>
                <p style="font-size: 10px;">在P标签里写入style属性</p>
          </body>

页内引用  （当单个文件需要特别样式时，就可以使用内部样式表）

定义单文件个在<head> 部分通过 <style>标签定义内部样式

例如：     <head>
             <style type="text/css">
                  body {
                   background-color:#cccccc;
                }
             </style>
          </head>
　　　　         <body>
                     <h1>这是一个H标签</h1>
                     <h1>这是一个H标签</h1>
　　　　　　　　　</body>

页外引用

 

CSS的代码注释用  /* ~ */    开始~结束    /*导航开始*/  #nav{....}  /*导航结束*/

通配选择符用 *{....}    同时定义body里所有标签的样式

          例如： <style>
                    *{
                        color:red;
                        font-family:仿宋;
                          }
                </style>
              </head>
                <body>
                    <h1>标签</h1>
                    <p>第一个标签</p>
                    <p>第二个标签</p>
                    <p>第三个标签</p>
                </body>

 

元素选择符用 body{....} ，h1{....},  p{....}    选择性定义body里的单个标签样式    （ 例如我选择性的定义b标签）

        例如：<style>
                b {
                    color:red;
                    font-family:仿宋;
                     }
              </style>
              </head>
             <body>
                 <h1>标签</h1>
                 <b>第一个标签</b>
   　　　         <p>第二个标签</p>
                 <p>第三个标签</p>
             </body>
           </html>

 

群组选择符 需要修改的标签进行挑选   例如：h1, h3, h6 {....}    选择性的定义body里的多个标签样式   （例如我选择性定义b和Pb标签，必须用逗号隔开）

 

　　　　　　例如：<style>
    　　　　　　　　　b,p {
  　　　　　　　　　　  color:red;
    　　　　　　　　　　font-family:仿宋;
  　　　　　　　　　　　　  }
   　　　　　　　 </style>
　　　　　　　　　</head>
　　　　　　　　　<body>
    　　　　　　　　　　<h1>标签</h1>
   　　　　　　　　　　 <b>第一个标签</b>
    　　　　　　　　　　<p>第二个标签</p>
   　　　　　　　　　　 <p>第三个标签</p>
　　　　　　　　　</body>
　　　　　　　　　</html>

 

关系选择符分为4种：1.包含选择符   一个标签被另一个标签所包含，包含关系不限包含层次（注意：多个选择符组成的包含选择符一定要使用空格隔开）

单用h1{....}h1标签是红色，单用em{....}p标签和h1标签的em是绿色，单用h1 em{....}则h1里面的em是绿色，p标签则没获得任何样式。

 例如：    <style>
              h1{
                color: red;
                }
              em{
                 color:green;
                }
           h1 em{
                  color: red;
                }
            </style>
            </head>
            <body>
                   <h1>标签</h1>
                   <b>第一个标签</b>
                   <p><em>第二个标签</em></p>
                   <p>第三个标签</p>
                   <h1>红色文字<em>绿色文字</em> 红色文字</h1>
            </body>
            </html>

 

posted @ 2016-08-11 13:59  A潇老师A  阅读(189)  评论(0)  编辑  收藏  举报