前端Day - 01

HTML

标签
<html> <img/>
单标签
<meta/>

换行符
标签对
<html></html>
常用标签对

 <head></head>   头部
 <body></body>   内容
  <title>标题<title>     标题
 <div></div>        块状
 <!doctype html>     开头声明类型
 <meta charset="UTF-8"/>   字符集(写在headn内)

注释
```

```

CSS 层叠样式表

标准属性+冒号+值+分号

  <div style="width : 200px; 
height:200px;
 background:red;
 boder : 8px solid red;
backgroud : url(http://xxxx);
transition:1s;
 ">
</div>

-注释

   /*xxxx*/

JavaScript 脚本语言

行为+=+""+属性+=+' '+值

<div onclick="this.style.width = '800px'; "></div>

id选择符样式表位置

id选择符

//标签名字
<div id="div1">aa</div>

样式表

//行间样式表，只适用于单个块级元素
  <div style="width:100px; height:200px; font-size:30px;">aaa<br/>bbbbbbbbb</div>


//内部样式表,写于</head>前面,#代表取出名字为div1的样式的元素
<style>
#div1{
  width:300px
}
</style>


//外部样式表
<link rel="stylesheet" href="123.css"/>

常见样式

颜色值模式

//颜色单词
#div1{
  width:200px;
  height:200px
background-color:red
}

//16进制
#div1{
  width:200px;
  height:200px
background-color:#222
}

//rgb模式
#div1{
  width:200px;
  height:200px
background-color:rgb(140,164,234)
}

背景图片


  #div1{
  width:200px;
  height:200px
/*默认状态下平铺*/
  background - image:url(img/1.jpg)
/* 
  no-repeat 不重复
  repeat-x 水平平铺
  repeat-y 垂直平铺
*/
  backgroud-repeat:no-repeat;
/*
  背景定位:x y 坐标
         : 50% 30% 父控件的百分比
         : right top  靠右边 靠上边(默认为center )
*/
backgroud-position:100px 30px;

/*
  scroll 滚动(默认)
  fixed 固定
*/
backgroud-attachment:scroll
}
/*背景图片超出部分默认裁剪*/

/*单一样式*/
/*backgroud-attachment:scroll  */
/*复合样式*/
/*backgroud:scroll red no-repeat  */

边框

  #div1{
  width:200px;
  height:200px
/*
  10px 粗细
  solid  实现 dotted 点划线 dashed 虚线
  red 颜色
  boder-top: 只有上边有边框
  
*/
  boder:1px dashed #033;
}

前端Day - 01

HTML

CSS 层叠样式表

JavaScript 脚本语言

id选择符 样式表位置

id选择符

样式表

常见样式

颜色值模式

背景图片

边框

推荐阅读更多精彩内容

id选择符样式表位置