第一天

HTML -超文本标记语言- 结构

CSS - 层叠样式表 - 样式

JS -脚本语言 - 行为


Sublime text 快捷键

新建文档 ctrl+n
保存文档 ctrl+s
返回上一步 ctrl+z
位移快捷键 ctrl+[ 或者 ctrl+]

注释 ctrl+/
关闭文件 ctrl+w


HTML基础结构

  • html父元素,head/body 子元素

  • 父子关系要用tab换行,兄弟关系要处于同一列

<!-- 文档头(类型)声明 -->
<!DOCTYPE html>

这行命令告诉浏览器我们要书写html文档了
文档类型是HTML5

注意:不是标签


<!-- 根元素 -->
<html> 

    <!-- 头部 -->
    <head>
         <!-- title:定义页面(文档)标题 -->
         <title> wu  </title>
     
            <!-- meta:定义页面的元数据 
                属性:
                charset :针对搜索引擎和解析格式的属性    
                                                   -->
             <meta charset="utf-8">

    </head>
    head内部包含的内容绝大部分是不可见的,主要是用来辅助页面的功能 

    <!-- 身体 -->
    <body> </body>
    body内部绝大部分都是可见的,主要是用来搭建HTML结构

</html>
HTML内容要全部书写在根元素当中

CSS的引入(掌握)

CSS的选择器(重点)

  • 内联样式表
  • 内部样式表(三种选择器):多用Class, 少用ID。
    * 标签选择器
    *类选择器
    *ID选择器
  • 外部样式表

内联样式表:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
         第一种 :内联样式表
              直接写在标签的内部

            CSS基础语法 
               属性名: 属性值;                
                 (width->宽度)
                 (height->高度)
                 (background-color->背景颜色)
                 (px:像素)
 
     -->
        <div  style="
            width: 300px;
            height: 300px;
            background-color: red;
              "></div> 
</body>
</html>

<div></div> 语义:无意义

内部样式表-标签名选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>


<!-- 第二种:内部样式表 
               需要书写在head标签的内部 -->

               
        <style >
        /* CSS选择器 */
        /*1:标签名选择器*   (作用范围:所有的“同标签”) */
        div{
            width: 300px;
            height: 300px;
            background-color: black;
        }
        </style>

</head>
<body>
    <div> </div>
</body>
</html>

内部样式表-类选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
   <style >
  
   /*2:类选择器   (作用范围:所有同类名的标签,类选择器可以被多个标签同时使用) */
         .a{
            width: 300px;
            height: 300px;
            background-color: green;
         }
   </style>
</head>
<body>
        <div  class="a"><div>
</body>
</html>

内部样式表-ID选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style >
     /*3:ID选择器   (作用范围:具有这个ID名称的唯一标签,ID选择器只允许作用在一个标签上 */
          
         #div_1{
            width: 300px;
            height: 300px;
            background-color: blue;
        }

       </style>
</head>
<body>
    <div id ="div_1"></div>
</body>
</html>

外部样式表:

需要另外创建style.css在css文件名下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

<!-- 3.外部样式表 
             需要书写在head标签的内部
             (rel ->关系)
             (stylesheet->样式表)
             (type-> 类型)
             (href->链接的路径)
             -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- href="../css/style.css" -->


    </head>
    <body>
        <div></div>
    </body>
    </html>
style.css
div{
            width: 300px;
            height: 300px;
            background-color: black;
        }

选择器优先级: 谁控制的越精确,谁的优先级就越高
  • 标签名:整个标签
  • 标签名:相同的类型
  • ID: 一个ID名称
    内联样式表>ID选择器>类选择器>标签名选择器
引入方式的优先级:
  • 当选择器的优先级相同的时候,谁后加载谁生效。
  • 当选择器的优先级不同的时候,谁的优先级越高,谁生效。
    内联>内部样式表?外部样式表
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • *CSS的定义 》CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体...
    竹溪穆褕阅读 303评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 公司内部开发流程 产品需求 产品经理(第一次例会去掉不合理的需求); 项目设计 视觉设计师 /交互设计(第二次例会...
    冰爷05阅读 222评论 0 0
  • CSS基础入门 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) CSS通常...
    alienskywalk阅读 285评论 0 2
  • 压力是一个很有意思的词汇,不同的语境会有不同的体会和效果。“我挺有压力的。”这句话在不同的环境下有不同的理解。有的...
    xiaoM敏阅读 1,073评论 0 3