hj_html&css
w3c教程 html-w3c教程 . css-w3c教程 .
HTML: 超文本标记语言 (Typer TExt Markup Language) ,一套标记标签,描述网页,由浏览器解析,<>;
html 常用标签:
head(头部) -> title(标题), l ink(导入css样式), base(页面链接的默认地址或目标),
meta(元数据,网页搜索关键词等),<meta content="3;https://www.sz-tools.cn/">3秒后跳转数值,骚操作,
script(导入js), style(定义css样式) ;
body(主体) -> h1~h6(标题), p(段落), b,strong(加粗标签), strike(文字加中线), em(文字斜体), sup,sub(上下角标),
br,hr(换行,水平线), div,span(块,内联标签),hgroup(标题分组), blockquote,q(长短引用),
table,form(表格表单), ul,ol,dl 列表, img,video,audio(图片视频音频), iframe,frameset(内联框架);
布局 -> header, session, footer, nav, aside, main, article, div, span;
总结:html相对来说如买是非常简单的,看看文档,逛逛博客,基本都问题不大,在实战中再精进咯.
CSS: 层叠样式表(Cascading Style Sheets),
- 选择器 -> 群组选择器[p,body,img,div{}], 兄弟选择器[p+p{}], 属性选择器[p[title]{}], 后代选择器[body ul li{}] ,
子元素选择器[div > p{}], ID选择器[#hjDiv{}], 类选择器[.hjDiv{}], 伪元素选择器[E::first-line,E::before{}],
伪类选择器[E::first-child,E::visited,E::focue,E::enabled{}] 注:后代选择器空格分隔,子选择器只对直接后代有影响; - 盒子模型 -> border[width,style,color], border-radiud, box-shadow, padding, margin, box-sizing[border-box,content-box];
- 文档流 -> 网页是多层级结构,最底下的一层称为文档流,是网页的基础,创建的元素默认都是在文档流中排序的.
浮动float 会脱离文档流,不再占位,可能发生覆盖.也会伴随有高度塌陷问题. .clearfix ,clear after伪类可解决高度塌陷 ::after{content:'';clear:both}; - 定位 -> 相对定位(relative,偏移量,相对对象),绝对定位(absolute脱离文档流,相对坐标原点),固定定位(脱离文档流,fixed,参照对象是浏览器可视窗口);
- 行内元素, 块元素, 空元素
叠加性:同一个元素可被多条样式规则制定;
继承性:后代元素可继承前辈元素的一些样式和属性<背景,盒子,布局属性不会被继承>;
优先级:权重越高,优先级越高;
background属性 ->color, image, repeat, attachment, position, size
- background-image:url("图片的网址") ; //背景图
- background: url("图片的网址") ; //背景
- background-color:#色码 : //背景颜色
- background-position: 0% 0% ; //定位,可能值:top left , center left ~
- background-repeat:repeat ; //重复
- background-size: 50% ; //尺寸,50%是缩放图片,cover拉大填满背景区,container缩放适合背景区, 80px 40px 调整宽高像素.
- background-color: #eee;
background-image:url(hj.gif);
background-repeat:repeat-x;
background-attachment:scroll; //scroll是背景图像随对象内容滚动为默认值
background-position:top right;
可缩写为-> background: #eee url(hj.gif) repeat-x top right;
布局 -> 固定宽度, 流动, 弹性 .
- 固定宽度:布局大小不会随用户调整浏览器大小而变化,一般是900-1350px像素宽,960px最常见;
- 流动布局:大小会随用户浏览器窗口大小而改变,能更好的适应屏幕大小,但可能随着页面宽度的变化,
文本行的长度和页面元素之间的位置关系都可能变化,页面变形; - 弹性布局:在浏览器窗口变宽或变窄时,布局跟着变化,而且所有内容元素的大小等也跟着变化,相对较复杂,现主流是弹性布局.
行内元素<inline>的一些属性 ->
- 不会有width,height属性,由内容撑开,但高度可通过line-height调整;
- padding属性只有padding-left与padding-right生效,-top,-bottom会改变元素范围,但不会对其他元素造成影响;
- margin属性只有margin-left与margin-right有效,-top,-bottom无效,
- overfolw溢出属性无效.vertical-align属性无效.
动效 -> transition, transforms, animation
- transition:过渡,用于平滑的改变CSS值,如
change{ width: 200px; height: 200px; background: green; transition: background 5s; } change:hover{ background: blue; }
transition属性是以下几个属性的缩写. transition-property , transition-duration , transition-delay , transition-timing-function ;+
- transform: 用来产生变化,如选择,缩放等,但是transform的变化是没有过渡效果的.一般是与transition一起使用,这样就能产生渐变的动效,如
旋转,移动等.
.change{ transition: all 3s ease; } .change:hover{ transform: rotate(720deg) scale(2,2); }
2D旋转 -> translate(x,y) rotate scale(a,b) skew(deg,deg)^skewX,skewY ; transform变换的参照点默认是中心点,可通过transform-origin(a,b)
来改变参照点的位置,a,b的值可以是百分比,px等或者是 left right center top bottom .
3D转换 -> translate3d(x,y,z) 3D移动 scale3d(x,y,z) 3D缩放 rotate3d(x,y,z,angle) 3D旋转 prespective(n) 透视视图
- animations: 动画,使用关键帧@keyframes创建动画
@keyframes hj{ from{ //start css } to{ //end css } } //or @keyframes hj{ 0%{ //start css } 50%{ //center css } 100%{ //end css } }
使用关键帧先定好动画变换过程中的关键样式,然后再使用连续变化或不连续变化实现动画效果,可简写
div{ width: 200px; height: 200px; background: green; animation: hj 5s; } @keyframes hj{ from { background:green; } to { background:blue; } }
主要属性 -> animation-name @keyframes动画的名称 animation-duration周期 animation-timing-function动画的速度曲线<linear,ease,ease-in~~~>
animation-delay延时 animation-iteration-count播放次数 animation-direction正反向 ~~~
简写 ->animation: name duration timing-function delay iteration-count direction fill-mode play-state; animation: hj 3s linear 2s infinite alternate both running;
工具
EnjoyCSS 生成器大大简化了自定义类声明,能加快工作流,简单易用.
css3生成器 简单易用,可以玩玩~
css3 maker 简单易用,可以玩玩~
