2020-03-09

HTML 页面的结构

CSS 美化页面

CSS：层叠样式表

层叠：一层一层的叠加

样式表：存储样式的地方，多个样式

给一个人的面部化妆：画口红，画眼影，打粉底

HTML 标签，       样式1   样式2   样式3

CSS通常称为CSS样式或层叠样式表，主要用于设置HTML

页面中的文本内容（字体，大小，对齐方式等），图片的

外形（宽高，边框样式，边距），以及版面的布局等外观

显示样式

Css可以是HTML页面更好看，，CSS+DIV布局更加灵活，更容易绘制出用户需要的结构

CSS作用：修饰HTML页面，更丰富多彩的展示超文本

CSS入门案例

1.创建一个HTML文件

2.在HTML上创建一个字体标签

3.字体标签中新建一个

为什么使用CSS替代HTML属性设置样式

因为HTML属性在单独使用时有一定的局限性，所以要配合CSS

样式代码才可以展示更为丰富的效果

CSS代码规范

1.放置规范

（1）在style标签内容体中书写CSS样式的代码

style标签放置在head标签之中

2.格式规范

选择器名称(属性名：属性值，属性名：属性值)

选择器：即指定CSS样式作用在那些HTML标签上

3.代码规范

属性名和属性值之间是键值对关系

属性名和属性值之间用：连接，最后；结尾

边框属性

所有的HTML标签都有边框，默认边框不可见

border设置边框的样式

格式： 宽度 样式 颜色；

例如 vorder： 1px solid red; 表示1像素粗的实线的洪泽边框

线条样式：solid实线、none无边框、double双线边框

width 用于设置标签的宽度

height 用于设置标签的高度

background-color 设置标签的背景颜色

背景颜色设置的两种主流方式：

1、英文单词： red  blue  yellow

2、颜色代码 ： 格式 #红禄蓝 每一个颜色用凉粉16进制位数表示

例如 ff1100  红色颜色最重，绿色其次，蓝色几乎没有

布局

float

    通常默认的排版方式，将页面中的元素从上到下一一罗列，二实际开发中，需要左右暗示进行排版，就需要使用浮动属性

 格式：选择器（float：属性值;）

left：元素向左浮动

right：元素向右浮动

注意：因为元素设置浮动属性后，会脱离原有文档流，从而会影响其他元素的样式，

所设置浮动以后，页面模式需要重新调整

转换

display

  块元素：独占一行，常见 h1  p  div  ul

行内元素（内联元素）：只占自身大小，自动换行span a input 

display属性可以使得元素在行内元素和块元素之间相互转换

格式：选择器{display：属性值；}

常用的属性值：

block：块元素

inline：行内元素

inline-block:行内块元素，既可以设置宽高，又不会独占一行

< img src=" " alt=" " />

none：元素将被隐藏，不会显示，也不占用页面的空间

visbility

  hidden隐藏

  隐藏的元素虽然不显示，但是它的位置会依然保持

字体

font-size 用于设置字体的大小

color：用于设置字体的颜色

CSS盒子模型

什么是盒子模型

  所有HTML元素：我们都可以看成一个四边形，即一个盒子

用CSS来设置元素盒子的内边距，边框，外边距的样式的方式，称为盒模型

2、边框：

border：HTML元素盒子的框体

四个属性：

broder-top：上边框

broder-right：有边框

broder-bottom：下边框

broder-left：左边框

通用设置（简写）一次性设置上下左右边框样式

border:1px solid red; 1像素的实线红色边框

3、内边距

padding：HTML元素里的内容体到HTML元素边框的距离

四个属性：

  padding-top： 上内边距

padding-fight：右内边距

padding-bottom：下内边距

padding-left：左内边距

通用设置（简写）一次性设置上下左右边框样式

padding： 10px；

4、外边距

margin：HTML元素边框到其他HTML元素边框的距离

四个属性：

  margin-top： 上外边距

margin-fight：右外边距

margin-bottom：下外边距

margin-left：左外边距

通用设置（简写）一次性设置上下左右边框样式

margin： 10px；

CSS和HTML的结合方式

内部样式

    行内样式：通过标签的style属性来设置元素的样式

格式：

适用环境：更加针对性修改某个标签的效果

标签方式：当某些样式在页面中被多个标签重复使用，同意写入到style标签中

格式：

使用环境：适合页面中进行样式复用

外部样式

链入式： .css为扩展名的外部样式表文件中，通过引入

格式：

rel="stylesheet" ：固定值，表示样式表

type="text/css" ：固定值，表示CSS类型

href="css文件路径" ： 表示CSS文件位置

使用范围：不同页面进行样式复用

作业 

1 palte   2   bento   3   #fancy   4   place apple   5   #fancy pickle 6  .small