2020-03-09

css简述

1、css是什么 ？ 有什么作用

  HTML--页面结构，人的面部

CSS--美化页面，给人化妆

2、css：层叠样式表

层叠：一层一层叠加的

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

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

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

css通常称为css样式或叠层样式表，主要用途设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）、一级版面的布局等外观显示样式

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

3、css作用：修饰HTML页面，更丰富多彩地展示超文本信息

布局

float

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

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

left：元素向左浮动

right：元素向右浮动

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

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

css的语法：

格式：

选择器{

属性名1:属性值1;

属性名2:属性值2;

.......

}

1.id选择器：选择具体的id属性值元素。建议在每一个html元素中id值唯一。

#id属性值{

//css代码

}

2.元素选择器：选择具有相同标签名称的元素。

标签名称{

//css代码

}

3.类选择器：

.class的属性值{

//css代码

}

边框：

border：HTML元素盒子的框体

四个属性：

broder-top：上边框

broder-right：有边框

broder-bottom：下边框

broder-left：左边框

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

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

内边距

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

四个属性：

  padding-top： 上内边距

padding-fight：右内边距

padding-bottom：下内边距

padding-left：左内边距

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

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

-------------------------------------------------------------------------------------------------------------------------------------