第一天

  1.   HTML 负责页面结构搭建

      CSS 负责給标签(标记)添加展示样式

      JS 负责在页面上添加交互行为

    <html></html> 标签对  有开始 有结束

    <img/> 单标签

    html > head +body 嵌套关系

    父级。          子集

              head 和 body 是兄弟标签

    父级网上的元素统称为祖先元素

    meta charset =“UTF-8 ”

    标签名  属性名 = “ 属性值”

    Title 修改在浏览器中tab页中展示的标题

    Head 文件引入以及不需要展示在浏览器中的内容

    Body 需要展示在浏览器中的内容

    行间样式

    属性语法 

    <标签名 属性名=“属性值”></标签名>. 

    css语法

    样式名:样式值 样式值 样式值;

    谁需要加样式 ,加到css命令上所需的【标签】上

    行间样式

    在标签的style属性中添加的样式,改样式的作用范围仅在该标签上。

    缺点:不利于后期的维护/修改。

    内部样式表

    在style标签对中,进行css语法的书写

    选择器(标签名){

    样式名:样式值;

    }

    选择范围: 当前的HTML页面

    缺点: 只能在当前页面中进行修改

    外表样式表

    <link rel = “srtysheet ” href =“”/> 单标签

    rel 声明引入文件的类型

    herf 路径/地址

    <link rel = “srtyleSheet” href = “css/index.css”>

    路径

    从当前html文件去找所需引入的文件

    html——css

    文件的名称(包括后缀)

    文件夹名称/ 文件的名称(保留后缀)

    边框

    样式规则

    后面的覆盖前面的

    边框由哪些部分组成的

    border :width style color;

    border  

    border-top

    border-top-width

    border-top-style

    border-top-color

    border-right

    border-right-width

    border-right-style

    border-right-color

    border-bottom

    border-bottom-width

    border-bottom-style

    border-bottom-color

    border-left

    border-left-width

    border-left-style

    border-left-color

    border-style : solid 实线; dotted 点线; dashed 虚线; double 双线;

    没有声明样式,就相当于 border-style: none 

    背景

    background-color: red;  背景颜色

    background-image:url(img/img1.png); 背景图片 背景不占位置 铺满整个容器

    background-repeat  背景图是否重复  

    1. no-repeat  不重复 2. repeat xy都重复  3 repeat - y 轴重复 4 repeat-x x轴重复

    background-position:x y ; 背景图定位 

    1 具体数值 2 x:left right center y 同理; 3只有一个值的时候 移动的是x的方向 y轴默认居中。

    原点 (x:0,y:0) 页面中的内容,默认都是从当前容器的原点(左上角)开始显示。

    background-attachment 背景图片是否可以滚动

    1.scroll 跟随滚动条滚动(默认值)2. 固定,始终显示在浏览器可视区域,不会随滚动条滚动

     1

原文地址:https://www.cnblogs.com/panfeng1104/p/7010048.html