hj_html&css

CSS文章/教程1个月前发布勤奋小助

0 0

–>

w3c教程 html-w3c教程 . css-w3c教程 .

菜鸟教程 html-菜鸟教程 . css-菜鸟教程 .

深圳市数值软件有限公司深圳市数值软件有限公司 . 数值软件 . 数值 .

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 简单易用,可以玩玩~

在线工具–开源中国

OverAPI–齐全的API文档

原文链接：https://www.cnblogs.com/hua-jian/p/15188818.html
本文来源互联网收集，文章内容系作者个人观点，不代表本站对观点赞同或支持。如需转载，请注明文章来源,如您发现有涉嫌抄袭侵权的内容，请联系本站核实处理。