day04

01 布局标签

<div>
    
</div>
<!--
         默认的时候，div就是一个模块，至于模块的范围，间距，颜色等
         都是需要依赖css配合
          
         -->

02 span和hr

<!-- 水平线  hr 语法如下 -->
        <hr>
        <hr/>
        <!-- span  文本节点 -->
        <span>我是小的文本标签</span>
        <span>我是小的文本标签</span>
        <!-- 默认横着排列 -->

03其他标签

上标

下标

版权 &copy；

商标&reg；

空格&nbsp；

尖括号 左：&lt 右：&gt；

04css基础

<!--
         CSS是什么？ cascading  style  sheet  层叠样式表
         CSS的作用？可以修饰网页内容，类似生活中的化妆师
         CSS的引入方式
            外部样式 适合整站开发或者是比较长的页面
            内部样式 适合案例或者短小的页面
                使用过程：
                1、在body中创建想要修饰的对象，<div></div>
                2、在head标签内创建一个<style type="text/css"></style>标签
                    说明：
                    A、type="text/css"可以写可以不写
                    B、style标签放在任何地方都可以，但是建议放在head里面，原						因是因为浏览器在加载页面的时候，是从第1行开始加载的，如					   果把css代码放在前面，这样浏览器就会先加载css，在没有					   加载HTML的时候，就会先存储一下css代码，等到加载HTML的						  时候，就可以立即进行修饰，有利于用户体验。
                3、在style标签内部去书写css代码进行修饰
                    在内部样式里面，css的语法
                    选择器{属性：属性值；属性：属性值；}
                    选择器的目的是为了拿到想要修饰的对象
            		行内样式 几乎不用
                使用过程：
                1、在body创建想要修饰的对象，<div></div>
                2、在创建好的对象中添加style属性
                    <标签 style="中间书写css代码"></标签>
                3、css代码的语法
                    如果是在行内样式：语法是 属性:属性值;
                    例如  width:200px;
                    注意点：css中如果没有特殊规定，必须带单位
                    常用单位是px
         -->

引入样式

a.行内样式

b.内部样式

c.外部样式

解析规则

<!--
当内部样式和行内样式同时修饰一个对象，且样式冲突的话
 浏览器优先解析行内样式，原因是因为行内样式的权重比较高，是1000
  
 权重：
  A、什么是权重：就是衡量一个或者一些当前修饰对象的样式指标
  B、不同的css样式，是有权重值的
    1、行内样式的权重是1000
    2、内部样式中的类型选择器（标签选择器）的权重值是0001
    3、class选择器的权重是0010
  C、解析规则1：权重不同的时候，权重大的样式优先解析（高踩低）
  D、解析规则2：权重相同的时候，解析规则是后面书写的css代码优先解析（后来者居上）
 -->

选择器

class与id选择器

id选择器和class选择器的相同和不同点
相同点：都可以区分相同的标签，实现不同的css样式
不同点：
1、class选择器的语法是.属性值{} id是#属性值{}
2、class选择器的权重是0010，id的选择器权重是0100
3、class的属性值可以是多个，但是id的属性值是唯一的

常常的用法： 当写css样式的时候多用class选择器，id主要用来后面的js操作

命名规则

a. 不建议使用中文

b. 不能纯数字开头

c. 建议语义化命名，可以使用-和_

06 src,url和href的区别

<!--
 src  url  href之间的区别
 目前来看 img搭配的是src  a搭配的是href  import引入搭配的是url
 区别1：src和href大部分使用在HTML标签里面，而url大部分使用在css样式表里面
 区别2：
  href  是来引入指定的网络资源位置，目的是为了建立关联和联系
  src  目的是为了把要显示的内容精准显示在页面中
  url  是为了统一资源定位
  
  
 -->

07文本属性

文本大小：font-size

文字颜色：color

文字水平对齐：text-align

​ 居中：center

​ 两端对齐：justify（单行无效，单行text-align-last：justify）

首行缩进：text-indent

文本修饰：text-decoration

​ 下划线：underline

​ 上划线：overline

​ 删除线：line-through