TreeMind树图在线AI思维导图
当前位置:树图思维导图模板IT互联网互联网干货互联网html+css思维导图

互联网html+css思维导图

  收藏
  分享
免费下载
免费使用文件
树图周树人 浏览量:342022-11-08 19:59:53
已被使用6次
查看详情互联网html+css思维导图

简单介绍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/>标签进行关联

<link rel="stylesheet" type="text/css"href="css/文件名.css"/>

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

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  让元素不显示

元素分类

行元素

块元素

行内块元素

概括思维导图模板大纲

相关思维导图模板

互联网金融背景下保定银行的战略转型研究思维导图

树图思维导图提供 互联网金融背景下保定银行的战略转型研究 在线思维导图免费制作,点击“编辑”按钮,可对 互联网金融背景下保定银行的战略转型研究  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:362219fda42aa4d11880b743a14e6e56

互联网营销师培训流程思维导图

树图思维导图提供 互联网营销师培训流程 在线思维导图免费制作,点击“编辑”按钮,可对 互联网营销师培训流程  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:b0bb621afea2c56345be09e11b8d57d0