HTML和CSS整合笔记 |
您所在的位置:网站首页 › 怎么把css和html合并在一起 › HTML和CSS整合笔记 |
HTML(负责页面结构) P标签:段落标签。 Img:图片标签。Src属性:所要引入的图片 A:超链接,实现页面的跳转。Href属性:所要跳转的目标文件。Target=”_blank”.在新页面中打开 title:鼠标移入显示的文字 H1-h6标题标签 Video:视频标签.controls Audio:音频标签.controls播放控制条 autoplay自动播放 Br:换行 Nobr:不换行 Pre:预设 B U I Hr:水平线 Font文字控制标签 Sub:下标签 Sup:上标签 Span:小块、小区域 Div:大区域、大面积 Header头部 Nav导航 Article文章 Section区域标题 Aside侧边栏 Footer尾部 Dl>dt+dd一般用于图文混排(我的乐视) Ul>li。无序列表(我的淘宝)ul的儿子只能是li Ol>li。有序列表(轮播图+千寻浏览器) Table>tr>td。表格 表单元素 maxlength:限制长度。Required提交的时候必须填写。Disabled禁止操作。Autofocus自动聚焦。Placeholder:默认显示文本。Selected默认选中。Checked(多选框或者单选框)。 input:类型: text、password、number、radio、checkbox、button、submit、reset、range、color、date、week、month。 Textarea文本域,不能伸缩,添加样式resize:none; Select>option下拉条 Form:表单提交 单标签img input 双标签p ul li ol dl dt dd a 标准文档流:说白了,就是一个“默认”状态。标准文档流中,标签分为两种:块级元素、行内元素。(块级元素垂直排列,行内元素水平排列) 块级元素:一定是霸占一行的,能设置宽、高,不设置宽度默认就是占满父亲。div、p、h、li、ul 行内元素:和其他行内元素并排,不能设置宽、高,默认宽度就是文字宽度。span、a、b、i、u 容器级(块级)的标签,里面可以放置任何东西;文本级的标签里面,只能放置文字、图片、表单元素。 p标签是一个文本级标签,就要死死记住:p里面只能放文字、图片、表单元素。其他的一律不能放。 再次强调,p是一个文本级的标签,p里面只能放文字、图片、表单元素 超链接 CSS(负责页面样式) Css的书写位置行内式。 嵌入样式里面 内联样式(行内式)写在style里面 外联样式通过引入 盒子模型:
width:宽 height:高 padding:内边距 值得情况可以参考margin; margin:外边距 margin:10px;四个方向都是10px; margin:10px 20px;上下10px 左右20px margin:10px 20px 30px; 上10px 左右20px 下30px margin:10px 20px 30px 40px 四个值上右下左;
也可以单独书写某一个方向的值: margin-top: ; margin-left: ; margin-right: ; margin-bottom: ; 特殊情况盒子水平居中margin:100px auto;盒子一定要有宽度。 border:边框 border,边框,三个值 线粗细 线样式 线颜色 3要素,4条边。 3要素:border-width、border-style(solid dashed dotted)、border-color; 4条边:border-top、border-right、border-bottom、border-left。 Opacity:文字和背景都变。 Background:背景 background: rgba(0, 0, 0, 1.0)背景变透明 包含四个值 1 background-color背景颜色 2 background-image背景图片 3 background-repeat是否平铺 4 background-position图片位置 5 background-size背景图片大小
line-height:行高。单行文字在盒子垂直居中
Text-align:center文字水平居中 Font-size:字体大小; Font-weight:bold加粗 Font-weight:normal正常 Font-style:italic;文字倾斜 Font-style:normal正常 Text-decoration:none不加下划线; Text-decoration:underline下划线 Font-family:设置字体; Color:文字颜色 Display:none;隐藏 Display:block;转化成块级元素也可以是显示的意思 Display:inline;转化成行内元素 Display:inline-block转化成行内块 Cursor:pointer;小手; Overflow:hidden; 1、溢出隐藏(百度图片展示) 2、清除浮动影响(子级元素浮动之后,父级检测不到子级元素的高度,加此属性可以解决浮动影响) 3、解决外边距塌陷(子级元素接了上外边距之后父级跟着下来) 4、滚动条 Overflow-X:auto(hidden)出现滚动条或者溢出隐藏 Overflow-Y:auto(hidden) 盒子投影 Box-shadow:水平方向光照 垂直方向的光照 羽化程度 颜色; 文本投影 Text-shadow: 水平方向光照 垂直方向的光照 羽化程度 颜色 三大动画模块 转化模块: 关键属性:Transform: 属性值: Translate(0px,0px) rotate(30deg)旋转 scale()缩放 值与值之间用空格隔开 也可以书写XYZ一个方向(具体参考音乐盒的制作) Transform-origin:center center;旋转中心点。
过渡模块 关键属性: Transition:all 时间; 过渡模块书写步骤:(不是只有一种写法,可以通过增加删除类来控制,具体参考千寻案例) 1、 书写默认样式 2、 触发之后的样式:hover 3、 回到默认样式书写transition:all 时间(all也可以单独改成某一个属性:比如:width)
动画模块: 关键属性:animation:name 时间 linear(平缓) infinite(循环) 使用步骤: 定义动画:@keyframes name {a) 每一帧的状态 b) 每一帧都是一个样式条 } 使用动画:animation:name 时间 linear(平缓) infinite(循环)
3D效果transform-style:preserve-3d可以让其内部的元素以该元素作为参照物进入三维坐标 Border-radius:5px; 出现圆角(可以四个不同的值:左上 右上 右下 左下) Border-radius:50%;变成圆形 所有css3的属性前面都要加私有前缀:-moz-,-ms-,-o-,-webkit 也就是都要写五遍
Float:left;左浮动:脱离标准流 Float:right;右浮动:脱离标准流 浮动之后的元素可以给宽高 浮动之后同级元素也要浮动
相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。 相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘。 相对定位有坑,所以一般不用于做“压盖”效果。页面中,效果极小。就两个作用: 1) 微调元素 2) 做绝对定位的参考,子绝父相 一个绝对定位的元素,如果父辈元素中出现了也定位了的元素,那么将以父辈这个元素,为参考点。 要听最近的已经定位的祖先元素的,不一定是父亲,可能是爷爷: 不一定是相对定位,任何定位,都可以作为参考点 定位之后(固定或绝对)盒子居中 当做公式记忆下来。就是 left:50%; margin-left:负的宽度的一半。 top:50%; margin-top:负的高度的一半。
固定定位,就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。 固定定位脱标!
z-index值表示谁压着谁。数值大的压盖住数值小的。 ● 只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的东西不能用。 ● z-index值没有单位,就是一个正整数。默认的z-index值是0。 ● 如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。
选择器: 标签(直接书写标签名字) P{ } Id(命名:id=””,选择的时候通过#ID名字,id具有唯一性,类似我们的身份证号码) #ID名字{ } 类名(命名:class=””,选择的时候通过.类名字,类名可以重复,类似我们的名字) .类名{ } Div p 空格 后代 Div>p子代 H3.special 交集选择器
H3,h1并集选择器 *通配符,选择所有标签
继承性。有一些属性给祖先元素,所有的后代元素都集成上了。 哪些属性能继承:color、font-、text-、line- 层叠性。层叠性是一种能力,就是处理冲突的能力。当不同选择器,对一个标签的同一个样式,有不同的值,听谁的?这就是冲突。css有着严格的处理冲突的机制: ■ 选择上了,数权重,(id的数量,类的数量,标签的数量)。如果权重一样,谁写在后面听谁的。 ■ 没有选择上,通过继承影响的,就近原则,谁描述的近听谁的。如果描述的一样近,比如选择器权重,如果权重再一样重,谁写在后面听谁的。 !important标记 !important提升的是一个属性,而不是一个选择器 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |