zoukankan      html  css  js  c++  java
  • CSS Day04 css核心基础

    1.在HTML中引入CSS的方法

      (1)行内式

        行内式即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用
         例如:
            <h1 style=“color:white; background-color:blue”>这是一行文本/h1>

        例1:

    1 <html>
    2     <head>
    3         <title>行内式</title>
    4     </head>
    5     <body>
    6         <h2 style="text-align: center;background-color: red;color: #eeeeee;">这是行内式</h2>
    7         <p style="text-align: center;background-color: blue;color: green;500px;height:200px;line-height:200px;">这是一个段落!</p>
    8     </body>
    9 </html>

      (2)嵌入式
         嵌入式将对页面中各种元素的设置写在<head></head>之间
         例如:
           <style type="text/css">
           h1{
               color:white; 
               background-color:blue
            }
           </style>

        例2:

     1 <html>
     2     <head>
     3         <title>嵌入式</title>
     4         <style type="text/css">
     5             h2{
     6                 text-align: center;background-color: blue;color: green;
     7             }
     8             p{
     9                 text-align: center;background-color: red;color: #eeff11; width:300px;height:300px;line-height:300px;
    10             }
    11         
    12         </style>
    13     </head>
    14     <body>
    15         <h2>这是嵌入式</h2>
    16         <p>这是一个段落!</p>
    17     </body>
    18 </html>

      (3)导入式
         <style type="text/css">
            @import"mystyle.css";
         </style>

       例3: 1)

     1 <html>
     2     <head>
     3         <title>嵌入式</title>
     4         <style type="text/css">
     5             @import"mystyle.css";
     6         </style>
     7     </head>
     8     <body>
     9         <h2>这是嵌入式</h2>
    10         <p>这是一个段落!</p>
    11     </body>
    12 </html>

          2)

    1 @charset "utf-8";
    2 /*css*/
    3     h2{
    4         text-align: center;background-color: blue;color: green;
    5         }
    6     p {
    7         text-align: center;background-color: red;color: #eeff11; width:300px;height:300px;line-height:300px;
    8     }

     

      (4)链接式
        <link href="mystyle.css" rel="stylesheet" type="text/css" />

      例:

     1 <html>
     2     <head>
     3         <title>链接式</title>
     4         <link href="mystyle.css" rel="stylesheet" type="text/css"/>
     5     </head>
     6     <body>
     7         <h2>这是链接式</h2>
     8         <p>链接式的段落!</p>
     9     </body>
    10 </html>

      mystyle.css


    1
    @charset "utf-8"; 2 /*css*/ 3 h2{background-color: red;color: blue;text-align: center;} 4 p{background-color: blue;color: red;text-align: center;width: 500px;height: 300px;line-height:300px;}
  • 相关阅读:
    hdu6315 Naive Operations
    noi.ac #525 神树的权值
    JSOI2018 潜入行动
    GXOI/GZOI2019 旅行者
    Educational Codeforces Round #67
    [六省联考2017] 分手是祝愿
    NOI2014 随机数生成器
    NOI2012 随机数生成器
    USACO19JAN Redistricting
    HNOI2015 菜肴制作
  • 原文地址:https://www.cnblogs.com/kylyww/p/5233616.html
Copyright © 2011-2022 走看看