互联网html+css-思维导图模板-TreeMind树图

简单介绍html+css的内容

树图思维导图提供《互联网html+css思维导图》在线思维导图免费制作，点击“编辑”按钮，可对《互联网html+css思维导图》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：22eeaddd45be1f2ace6c585018f0ed2e

思维导图互联网技术开发

举报/反馈

思维导图大纲

html+css思维导图模板大纲

css的定义和作用

定义：层叠样式 | 级联样式表{cascadingstylesheets }

作用：给网页进行美化

地位：web三大标准

官网解释：用来描述HTML文档结构的语言，其用来控制如何显示HTML的元素

css书写的位置和方式

1.行内样式

直接写在标签上，只能给当前的这个标签修饰

2.页内样式

书写在当前的HTML文档里.通常写在<head>标签里，用<style></style>进行包裹

当前的样式只能作用到当前的这个页面上

3.外部样式

创建一个单独css文件，.css后缀

如何把HTML文件和css文件进行关联

通过<link/>标签进行关联

把所有要设置的样式写在这个文件里面

css语法规则

选择器

就是让我找到你要修饰或者美化的那个HTML标签

声明组

就是让我找到你要具体修饰或者美化的那个内容

学习属性名——声明===属性名：属性值；

css选择器

基础选择器

input{ }——标签选择器：通过HTML标签名来找到对应HTML标签

id选择器

1.给标签添加一个id属性

2.通过#id名的方式来找到这个标签

id选择器的特点：唯一性

类选择器：通过给HTML标签添加一个类名；来找到HTML标签，从而达到一个区分的效果

1.给标签添加一个css属性

2.通过.class名的方式来找到这个标签

类选择器的特点：一个标签可以起多个类名，而不同的标签可以设置相同的类名

通配符选择器

*{ }

选中HTML文档中所有的标签

基本上在我们的样式文件中只会出现一次

css声明

总的来说，学习css声明就是来学习这些属性名和一些对应常用属性

字体设置font

字体大小设置font-size: "n"em

字体类型font-family:"楷体"，"宋体"

字体样式font-style:italic/oblique

字体粗细font-weight:bold/lighter

简写-font:font-style font-weight font-size font-family

letter-spacing : ; 设置文字左右之间的间距

line-height ：；设置字体上下之间的间距

文本设置

颜色设置color:设置的具体颜色

文本修饰text-decoration

none:不设置任何装饰

underline:设置下划线

水平对齐text-align

left:设置文字水平方向上居左对齐

center:设置文字水平方向上居中对齐

right:设置文字水平方向上居右对齐

内容垂直对齐vertical-align

top设置文字顶部对齐

middle设置文字居中对齐

bottom设置文字居底对齐

行高line-height

具体数据值+px单位

能让一行中的内容在垂直方向上居中

文本缩进text-indent

具体数据值+px单位

首行缩进两个字符text-indent:2em；

背景设置

背景颜色background-color: ；

背景图片的摆放background-position: ;

通过方位为此进行位置摆放（top，bottom，left，right，center）

前提 : 背景图片平铺属性设置为不平铺

通过具体值来设置图片的摆放（px）

背景固定background-attachment

scroll 滚动

fixed 固定

简写: background：color image repeat attachment position ；

背景图片background-image: url（图表片地址）;

背景图片的平铺设置background-repeat:repeat；repeat | repeat-x | repeat-y | no-repeat

列表设置

列表样式 list-style-type

列表图片 list-style-image

列表项位置 list-style-position

list-style：none | 设置某个样式；

表格的设置

表格单元格的合并情况border-collapse

separate ：边框独立

collapse ：相邻边框合并

表格的边框 border: ;

solid 边框实线

dashed 边框虚线

浮动

浮动作用和影响

就是把每一个元素（设置好的样式）进行位置重新摆放

影响

浮动元素浮动之后会脱离文档流，根据设置的浮动方向来找到父元素的边缘，然后依次进行排列

浮动元素脱离文档流，这个时候在网页并不占据空间（位置）

清除浮动

2，添加一个空的标签（块标签）

1，给这个空标签起一个类名

2，通过类名找到这个空标签，然后给这个空标签添加一条样式{clear:both;}

3，通过伪类来清除浮动

给父元素添加伪元素的方式，父元素选择器{content:""; display:block; clear:both;}

4，在浮动元素之前和之后都做一次清除浮动

给父元素的最前面和最后面都添加一个模拟的空那个标签，然后清除浮动父元素选择器::before，父元素选择器::after{content:""; display:block; clear:both;}

清除浮动的属性名: clear: left / right / both;

1，overflow:hidden;

给所有浮动元素的直接父元素添加这条属性

float: ;

左浮动 left

右浮动 right

没（无）浮动

定位

作用：进行网页布局

属性：position：；分类：

绝对定位 absolute；

会脱离文档流，它是以谁为参照物呢？

有父元素的时候，而且父元素有定位，且是相对定位，以父元素为参照物（子元素是绝对定位，父元素是相对定位）

无父元素的时候或者父元素没有定位的时候，以浏览器为参照物

固定定位 fixed；

会脱离文档流，以浏览器窗口为参照物进行定位

静态定位 statlc；

所有元素默认定位

不存偏移量的结合使用

不用记

相对定位 relative；

不会脱离文档流，是当前这个元素所在的位置进行定位，以当前这个元素为参照物来计算偏移量

定位偏移量

left：偏离左侧多少

right：偏离右侧多少

top：偏离顶部多少

bottom：偏离底部多少

元素显示 display

属性值

block 让元素作为块元素进行显示

inline-block 让元素作为行元素进行显示会有1~3px的缝隙产生

none 让元素不显示

元素分类

行元素

块元素

行内块元素

概括思维导图模板大纲

互联网html+css思维导图

思维导图大纲

css的定义和作用

css书写的位置和方式

css语法规则

css选择器

相关思维导图模板

相关思维导图专辑

相似思维导图模板

思维导图模板推荐