html和css基础1

html基础

什么是html

• html是一种超文本标记语言（Hypertext markup language）
• html是一种表示语言，并不是编程语言
• html可以用标签来描述一个页面

html的元素组成

html是由标记名、属性、元素内容组成

<a href="/classroom/17">立即加入</a>

<a></a>其中前面的a是一个起始标签，后面的a是结束标签
href="/classroom/17"中的href是属性名，/classroom/17是属性标志
元素内容：就是起始标签和结束标签中的内容。

空元素

空元素就是在元素的内容上去除内容和结束标签。

例如：<img src="" alt="">就是一个空元素

展示一张html的标签集合图

css基础

基础知识

• css样式表的定义
• css：（Cascading Style sheets）层叠样式表

css的引用

外部样式表

css代码在一个独立的文件中，html通过link元素引入到页面
使用外部样式表的特点：

1. 实现了内容结构和表现形式代码分离，方便复用和维护
2. 是html代码更加纯净，有利于程序员和搜索引擎的阅读
3. 是开发页面的常见做法

内部样式表

使用内部样式表的特点：

1. 没有了样式表文件，在某些时候可以提高效率
2. 多个页面难以共享模式，不利于代码复用
3. html和css代码混杂，不利于程序员和搜索引擎的阅读
4. 在某些时候对效率要求苛刻或测试的场景下使用。

行内样式表

使用行内样式表的特点：

1. 没有了样式表文件，在某些时候可以提高效率
2. 多个页面难以共享模式，不利于代码复用
3. html和css代码混杂，不利于程序员和搜索引擎的阅读
4. javascript操作的行内样式
5. 在测试的场景下使用

css选择器

选择器都是选中的离大括号最近的元素，其他都是对这个元素的条件。

• 选择器：

  • class类选择器可以重复利用
  • id选择器唯一

• 标签选择器

  • 什么是选择器：css选择器就是要改变样式的对象

• 选择器{属性:值;属性:值;}

• 标签选择器：页面中所有的标签都是一个选择器 p{color:red;}

• ID选择器

  • 选择id命名的元素 以 # 开头 #p1{color:#0f0;}
  • 注：一个页面ID值不可以重复
  • 权重最高

• 类选择器

  • class选择器，选择clas命名的元素 以.开头 .first{color:#00f;}

• 通配符选择器

  • 书写格式：*{声明块}

    例子：*{color:red;}

• 并集选择器

  • 书写格式：类名，元素名，ID名{声明块}
  • 例子：h1,h2,p,.box,#f74{color:red;}

【命名规范】适用范围（ID，类）

1. 不要以数字开头

2. 包含的字符（字符、数字、下划线、连字符）

3. 区分大小写（大小写敏感）

• 层次选择器

  • 子级选择器

    • 格式： 父元素>子元素{声明块}
    • 例子 ：article>section{color:red;}

  • 后代选择器

    • 格式：祖元素+空格+后代元素{声明块}
    • 例子：article section{color:red;}

  • 兄弟选择器

    • 格式：兄弟元素A+“+”+兄弟元素B{声明块}

    • 功能：选中元素A后面的第一个兄弟元素（即相邻选择器）

    • 例子：p+p{color:red;}

    • 格式：兄弟元素A+“~”+兄弟元素B{声明块}

    • 功能：选中元素A后面的所有兄弟元素B

    • 例子：p~p{color:red;}

• 伪类选择器

  [选中第一个元素]

  格式：元素:first-child

  例子：p:first-child{color:red;}

  [选中最后一个元素]

  格式：元素:last-child

  例子：p:last-child{color:red;}

  [选中第n个元素 (方式1)]

  格式：元素:nth-child(n) n是第几个元素

  例子：p:nth-child(2){color:red;}

  注：若所有兄弟元素的名字不相同，可能会无法选中元素

  [选中第n个元素 (方式2)] 使用场景：兄弟元素的名字可以不相同

  格式：元素:nth-of-type(n) n是第几个元素

  例子：p:nth-of-type(3){color:red;}

  注：先筛选类型，在结果中选择第n个元素。

  [选中奇数项元素]

  注：n的起始值为0

  格式：元素:nth-child(odd) add是第奇数项元素

  例子：p:nth-child(add){color:red;}

  [选中偶数项元素]

  格式：元素:nth-child(even) even是偶数项元素

  例子：p:nth-child(even){color:red;}

  [扩展:选中前m个元素]

  格式：元素:nth-child(-n+m)

  例子：p:nth-child(-n+3){color:red;}

  [否定伪类选择器]

  格式：元素:not(nth-child(n))

  例子：p:not(:nth-child(3)){color:red;}除了第三个p元素其他都是红色。

css盒模型

####　盒子的分类

不同的元素产生的盒子类型可能不同

一个元素，产生什么样的盒子，取决于它css的display属性

属性：display 是否继承：否 默认值：inline

display：none;	不生成盒子
display：inline;	行盒
display：black;	块盒
display：其他元素;

盒子的组成

盒子有content（内容）、padding（内边距）、border（边框）、margin（外边距）四个组成。

背景色的渲染区域包含content、padding、border

盒模型中只有margin可以去负值。

padding的取值

例子
padding:10px;   上、下、左、右
padding:10px 20px;   上下、左右
padding:10px 20px 30px;  上、左右、下
padding: 10px 20px 30px 40px;  上、右、下、左

margin的取值和padding的取值一样。

border的格式

border边框的样式
soild 实线    dashed 虚线  double 双实线  dotted 点线

border-方向-style  边框样式
border-方向-color  边框颜色
border-方向-width  边框粗细

border的边框默认颜色
如果没有设置border-color , 那么边框将取元素内容的前景色，也就是文本的颜色，即color属性对应的颜色。

border的边框粗细默认值是3px(双实线)

<!-- 扩展 -->
圆角边框  
border-radius:10px;
border-radiu:10px 20px  对角线

content内容

含义：用于存放文本或其他元素的区域，类似于一个箱子存放东西的空间

CSS Overflow

CSS overflow 属性可以控制内容益处元素框时在对应的元素去间内添加滚动条。overflow属性有以下值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪，则浏览器会显示滚动条一遍查看其余的内容
inherit	规定应该从父元素继承overflow属性的值

断词规则

英文：空格、标点符号

中文：标点符号、【空格】

数字：空格、标点符号

####　边框盒（border-box）

由border、padding、content组成

填充盒（padding-box）

由padding、content组成

内容盒（content-box）

由content组成

背景

1. 背景图

   url统一资源路径

   url括号里是图片的地址。需要加引号

​ background-image: url("../img/OIP.jpg");

2. 设置背景的显示区域

   border-box（默认值） 边框盒的左上角开始

   padding-box（默认值） 填充盒的左上角开始

   content-box（默认值） 内容盒的左上角开始

   例子background-clip: content-box;

3. 设置背景的渲染区域

   border-box（默认值） 边框盒的左上角开始

   padding-box（默认值） 填充盒的左上角开始

   content-box（默认值） 内容盒的左上角开始

   例子background-origin: content-box;

普通盒模型和IE盒模型的区别

当设置元素宽高的时候（计算不同）

box-sizing设置盒子的计算规则

content-box （默认值）（标准盒模型、普通盒模型）

content-box IE盒模型

IE盒模型的适用场景

宽度给100%的场景，又添加了其他盒子的尺寸

为解决滚动条的问题，因此更改盒子的计算规则来实现效果

outline轮廓

跟border一样是边框

优点：不占像素

缺点：不可以分别设置四个方向的值（即四个方向样式统一）