入门笔记Day one

时间 2019-12-06

标签入门笔记 day 繁體版

原文原文链接

html、css

标签：<html>
标签对：<head></head>   <body></body>
单标签：<meta/> <img/>

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>标题</title>
    </head>
    <body>
        内容
        <div style="width（宽） : 200px; height（高）: 200px;font-size(字体大小): 30px ; baackground（背景）:（颜色）或者url(图片地址); border（边框）:8px solid（实线） red;">xxx
        </div>
    </body>
</html>
复制代码

js

<div onclick ="this.style.width = '800px';this.style.height = '400px';transition:1s;">xxx</div>
复制代码

行间样式表

内部样式表

<!doctype html>
<html>
   <head>
       <meta charset="UTF-8"/>
       <title>标题</title>
       <!--内部样式表-->
       <style> #div1{ width:100px; height:100px; background-color:red; /*颜色单词（red、yellow...）16进制（#0cc）rgb（111，111，111）*/ background-image:url(图片地址)； /*默认状态下，背景会平铺*/ background-repeat:no-repeat(不重复); /* repeat-x或者y 水平或垂直平铺 */ background-position:100px 200px; /*背景定位：也能够用% left center right... 位置单词 */ background-attachment:fixed; (固定图片) border(边框): 10px dashed(虚线)solid(实线)dotted(点划线) red; } #div2{ width:100px; height:100px; background:green; } </style>
   </head>
   <body>
      <div id="div1">qqq</div>
      <div id="div2">www</div>
   </body>
</html>
复制代码

外部样式表

<!doctype html>
<html>
  <head>
      <meta charset="UTF-8"/>
      <title>标题</title>
      <!--外部样式表-->
      <link rel="stylesheet" href="外部连接"/>
  </head>
  <body>
     <div id="div1">qqq</div>
  </body>
</html>
复制代码

文字设置

<!doctype html>
<html>
  <head>
      <meta charset="UTF-8"/>
      <title>标题</title>
      #div1{
          color: red;
          text-align(文字对齐方式): center;
          text-intent(缩进): 2em ;
          /*em是根据字体大小来进行计算的
            1em = 当前字体大小*/
          text-decoration(文字修饰）: underline;
          letter-spacing(字母间距): 10px ;
          word-spacing(单词间距): 10px ;
          /*以空格为解析单位*/
          white-space(强制不换行): normal ; 
          /*nowrap 不换行
            normal 正常  
          一个空格的大小为当前文字大小的一半（仅宋体）
          字体格式不同时，空格大小也不同。
          */
          
      }
  </head>
  <body>
     <div id="div1">qqq</div>
  </body>
</html>
复制代码

内边距padding

<!doctype html>
<html>
   <head>
       <meta charset="UTF-8"/>
       <title>标题</title>
       #div1{
              width: 100px ;
              height: 100px ;
              background-color: pink ;
              padding: 100px ;
       /*padding 内填充
       padding-top right left bottom
       padding复合写法  顺时针 top right bottom left
       只有一个属性值时：4个方向都是同一个值
       设置两个属性值时：
           第一个属性值设置的是上下两个方向，
           第二个属性值设置的是左右两个方向。
       设置三个属性值时：
           第一个属性值设置的是上边一个方向，
           第二个属性值设置的是左右两个方向，
           第三个属性值设置的是下边一个方向。
       设置四个属性值时：
           第一个属性值设置的是上边一个方向，
           第二个属性值设置的是右边一个方向，
           第三个属性值设置的是下边一个方向，
           第四个属性值设置的是左边一个方向。    
       */
       }
   </head>
   <body>
      <div id="div1">qqq</div>
   </body>
</html>
复制代码