学HTML5 + CSS，用什么软件好?HTML5 和CSS3是一入门就能用的最好的语言，最简单同时也最好的的方式就是直接开始做!那么生成器就在自动生成代码时扮演者重要角色，它们非常适用于那些要做很多重复性工作的开发人员和设计人员，生成器可以帮他们解决这些繁琐的工作。HTML5、CSS3已经越来越成熟，特别是在排版绘图等方面有了很大的改进虽然现在各家的浏览器引擎解析出来的还并不算专业，但是一些像内阴影、内发光、阴影、外发光、图片圆角等效果都支持的非常不错。而写程序的码农们则欢呼了，再也不需要用PS去处理图片直接使用css进行各种绘图。
 
CSS3类
 
CSS3PS是一个免费的基于云端的 photoshop 插件，用来将 Photoshop 的图层转成用 CSS3 实现的方式，外观完全一致。
 
您可以选择多个图层和图层组，一键转换。行程转换为CSS边框属性。内阴影，内发光，阴影，外发光转换成CSS的box- shadow属性。
 
CSS3PS怎么用?
 
CSS3Ps支持Photoshop CS3-cs6这四个版本，它的使用方法非常的简单，在CS3与CS4中选中你要转换的图层，通过菜单“文件”>“脚本”>“浏览”选中下载好的CSS3Ps插件即可完成转换，在CS5与CS6中使用CSS3Ps要首先在”Adobe 扩展管理“里安装插件，最后在Photoshop的“窗口“>”扩展“中选中”CSS3Ps“，以下是通过CSS3Ps转换出来的代码效果图。
 
安装详细教程：
 
针对photoshop cs5和CS6版本的安装过程(来至官方教程)：
 
1.如果Adobe Photoshop的运行，将其关闭。
 
2.下载“CSS3Ps.zpx”文件。
 
3.在Adobe Extension Manager中点击“Accept”按钮。
 
CSS3PS：点击左侧链接下载
 
HTML5类
 
易企秀电脑版是一款功能全面的H5页面微场景制作工具，易企秀官方版是针对移动互联网营销的手机网页DIY制作工具。使用易企秀网页版微场景制作工具一键生成H5酷炫页面，制作互动视频，H5转小程序等，可直接去尾页标识，还有防刷单的独特功能。
 
软件特色
 
极简制作：易企秀可以极简的制作H5页面，方便用户制作出超酷的 H5 页面微场景。
 
海量模板：包含个人、企业、行业、节假日等海量模板，方便用户快速进行制作。
 
便捷分享：便捷分享场景到微信、朋友圈、微博、 qq 、 QQ 空间、邮箱、短信联系人等渠道进行推广和营销;
 
实时查看：通过手机客户端查看推广场景的访问量、潜在客户报名量;
 
畅易沟通：查看手机页面收集到的潜在客户联系方式，并可直接拨打潜在客户的电话进行沟通。
 
功能介绍
 
【一键生成H5】易企秀创作只需几秒钟，拜年贺卡、生日祝福、宝宝照、旅游照统统一键生成，摇一摇还可以更换模板。还可以分享至微信朋友圈，微博，QQ群和QQ空间等。
 
【海量模板素材】请帖，贺卡，电子相册，邀请函，简历模板，企业招聘，公司宣传、产品介绍均可轻松套用。
 
【随时随地查数据】动态图表展示H5场景的浏览次数，实时掌握客户提交的信息，金牌数据管家，助力市场营销。
 
【手机&电脑跨平台操作】手机与电脑的场景数据互通，登录app可编辑、分享、管理电脑上的场景。
 
易企秀：点击左侧链接下载

 
有很多的同学是非常想知道，网页设计需要学什么，用什么软件呢，小编整理了相关信息，希望会对大家有所帮助！
 

 
网页设计学习课程
 
学HTML，必须的。学好这个然后学DIV+CSS，当然要把网页做的好看。必须学会PS,也就是PHOTOSHOP。这两样学会了。就会做一般的静态网站了。如果想做一些动态效果，就得学FLASH。要是想做动态数据，就要学，PHP,ASP,JSP ,.NET中的某种。最重要的还是，HTML CSS 和PS了。这个是基础。
 
从哪入手，学什么软件，怎么学。
 
先学会做第一个HTML网页，学DREAMWEAVER做。看一本书，先大概看完，看完后，主要是手动操作，要忘记书，书这东西有时候是好东西，可是你看完后，到操作上了，就要忘记书。大概了解后。就可以直接操作了。
 
不出一个星期你定能学会必要的操作。然后学TABLE做表格。两三天，这个学好了，然后学TABLE+CSS，做漂亮的表格。两三天，这个学好了。学DIV+CSS做网页，最多一个月。DIV+CSS是最高难度的。因为涉及到非常多的兼容仍属，这个你都学会了。就是一个基础前端了。会做网站了。
 
用案例来学，积极性会很高。建议，直接找一个网页。然后照那个网页的样子，模仿出来。等你能仿出任何网站了，说明你的基本功就到位了。
 
网页设计需要掌握哪些技能
 
一、制作网页首先要有一些美工基础(photoshop)，因为制作网页是由图文、动画、视频等因素构成，构图框架显得尤为重要，基本框架设计的好，整体效果就会美观，吸引访客。
 
二、要学习html的css样式表，这是网页构成的关键，也是整体框架形成的支撑点，现在的网页都是利用css样式里的
 
三、学习编程软件的使用，比较容易上手的软件是Adobe Dreamweaver CS4，页面直观，图文和代码可以分别浏览，便于调试，适用于初学者使用。
 
四、会架设本地测试用的web服务器，这个可以在网上搜索，做网页时刻要浏览的，要看看效果怎么样？这也是必须要做的事情。
 
网页设计好就业吗
 
在网页设计中，总是有倾向的特定技术来观察，或跟踪的网页设计师加强的趋势。这里有专有和开源和免费的技术专用的支持者。然而，近些年来，又增加自由和开放源码技术，包括由W3C和WHATWG进行监控和批准，监督和实施增加。
 
趋势可以发现，不仅在看在时尚领域的使用的技术，如网站和匹配的标志是清晰的喜好确定。著名的艺术字Web 2.0至今的重要作用的帮助。
 
网页设计是一个不断更新换代、推陈出新的行业，它要求设计师们必须随时把握最新的设计趋势，从而确保自己不被这个行业所淘汰。2013年，网页设计主要流行响应式设计、扁平化设计、无限滚动、单页、固定标头、大胆的颜色、更少的按钮和更大的网页宽度。

 

 
写网站前端css用什么软件？
 
vscode，sublimeText , vim , atom等都可以，如果已经习惯window操作系统，建议用vscode和sublime text。
 
1、vscode
 
Visual Studio Code是一个轻量且强大的跨平台开源代码编辑器(IDE)，支持Windows，OS
 
X和Linux。内置JavaScript、TypeScript和Node.js支持，而且拥有丰富的插件生态系统，可通过安装插件来支持
 

 
(相关课程推荐：css视频教程)
 
2、sublime text
 
Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的Python API，Goto功能，即时项目切换，多选择，多窗口等。
 
sublime text软件退出时不需要保存，下次打开，编辑状态仍然存在，只有关闭文件才会提示保存
 
另外，启动速度很快，支持css的插件也很多，可以使用less2css插件，直接编写less代码，保存后即可自动编译为css代码。
 

 
其他的就不一一介绍了，感兴趣的可以自己百度。
 
本文来自css3答疑栏目，欢迎学习！

 
 
2021年3月1日，中国专业的IT开发者社区 C站（CSDN，以下简称C站） 正式推出“软件工程师能力认证标准”。该认证与国际标准接轨，面向全球的IT开发者，同时具备标准全开源、系统化学习、真实业务场景、完全上机实操、所有过程留痕、存档不可篡改等特点。
 
 
我们每天将都会精选CSDN站内技术文章供大家学习，帮助大家系统化学习IT技术。
 
 
CSS基础部分自学笔记
 

 内联样式
 
也称行内或行间样式，是在html标签上添加style属性来实现的
 
内部样式
 
在<style></style>标签内添加的样式，内部样式的代码可以复用、符合W3C标准，尽量让结构和样式分开处理
 
外部样式
 
<link rel="stylesheet" href=""> 
  
rel：指定资源跟页面的关系
href：资源的地址
@import url(./common.css); 
  
这种方式有很多问题，不建议使用
颜色表示法
 
单词表示法
十六进制表示法
RGB三原色表示法（范围0-255）
CSS背景样式
 
background-color：背景颜色
 background-image：背景图片（URL背景地址，默认水平垂直都铺满背景图）
 background-repeat：背景图片的平铺方式（repeat-x、repeat-y、repeat、no-repeat）
 background-positon：背景图片位置（x y）=>（数字[px/%] | 单词[x:left/center/right],[y:top/center/bottom]）
 background-attachment：背景图随滚动条的移动方式（scroll默认值，背景位置是按当前元素进行偏移的；fixed背景位置是按照浏览器进行偏移的）
 复合样式：background:red url() repeat 0 0;（颜色 背景图 平铺方式 位置）
 
CSS边框样式
 
border-style：边框样式（solid实线、dashed虚线、dotted点线…）
 border-width：边框大小（px）
 border-color:边框颜色
 【注】可单独对一个边框进行设置（border-top/right/bottom/left-）
 
//利用CSS边框实现三角形
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        width: 0px;
        height: 0px;
        border-top-color: transparent;
        border-top-style: solid;
        border-top-width: 30px;
        border-right-color: red;
        border-right-style: solid;
        border-right-width: 30px;
        border-bottom-color: transparent;
        border-bottom-style: solid;
        border-bottom-width: 30px;
        border-left-color: transparent;
        border-left-style: solid;
        border-left-width: 30px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
 
复合样式：border:1px red solid;（边框大小 颜色 样式）对单个边也可以用
 
CSS文字样式
 
font-family：字体类型
 
设置多字体方式（使其能够适应更多的计算机和设备）
引号的问题（有的字体中间有空格，必须用引号引起来）
font-size：字体大小（默认大小16px），字体大小一般为偶数
 
 

 font-weight：字体粗细（单词[normal正常、bold加粗]； 数字[100-500正常、600-900加粗]）
 font-style：字体样式（normal正常、italic斜体[italic所有带有倾斜字体的可以设置；oblique没有倾斜属性的字体也可以设置倾斜]）
 color：字体颜色
 复合样式：font:weight style size family、font:style weight size family、font:weight style size/line-height family
 
CSS段落样式
 
text-decoration：文本修饰（underline下划线、line-through删除线、overline上划线、none不添加任何修饰），可添加多个修饰，用空格隔开
 text-transform：文本大小写（针对英文段落，lowercase小写、uppercase大写、capitalize首字母大写）
 text-indent：文本缩进（首行缩进font-size的两倍，或2em[em相对单位，永远跟一个字体设置的大小相同）
 text-align：文本对齐方式（left默认、right、center、justify[两端点对齐，中间自行调节]）
 line-height：定义行高（不是固定值，根据当前字体的大小变化，用数字+px或scale[相对于原来字体的比例]表示）
 letter-spacing：定义字间距
 word-spacing：定义词间距（针对英文）
 强制折行
 
word-break：break-all; 非常强烈的折行
word-wrap：break-word; 不是那么强烈的折行
CSS选择器
 
 
 
ID选择器
 css:#elem{}
 html:id=“elem”
 【注】1.在一个页面中，ID值是唯一的
 2.命名规范，字母 _ - 数字 （命名的第一位不能是数字）
 3.命名方式：驼峰式（小驼峰[mainBox]、大驼峰[mainContentBox]）、下划线式[main_box]、短线式[main-box]
 【补充】骆峰式命名法就是当变量名或函式名是由一个或多个单字连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母!
 小驼峰法：变量一般用小驼峰法标识。驼峰法的意思是：除第一个单词之外，其他单词首字母大写。譬如int studentCount=0； 变量myStudentCount第一个单词是全部小写，后面的单词首字母大写。
 大驼峰法：相比小驼峰法，大驼峰法把第一个单词的首字母也大写了。常用于类名，函数名，属性，命名空间。譬如public class StudentInfomation;
 补充说明，在JAVA中：类名的标识符一般用大驼峰式书写格式，方法和变量的标识符则多用小驼峰式书写格式。
 
 
 
 
CLASS选择器
 css:elem{}
 html:class=“elem”
 【注】1.class选择器是可以复用的
 2.可以添加多个class样式
 3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
 4.标签+类的写法
 
 
 
 
标签选择器
 css:div{}
 html:<div></div>
 
 
 
 
群组选择器/分组选择器
 css:div,p,span{}
 通配选择器
 *{}
 尽量避免使用通配选择器，因为会给所有的标签添加样式
 
 
 
 
层次选择器
 后代：M N{}
 父子:M > N{}
 兄弟：M ~ N{} 当前M下面的所有兄弟N标签
 相邻：M + N{} 当前M相邻的N标签
 
 
 
 
属性选择器
 div[class]{}
 div[class][id]{}
 div[class=box]{}
 div[class*=search]{} //只要search在class中出现过都可以选中
 =：完全匹配 *=：部分匹配 ^=:起始匹配 $=:结束匹配
 
 
 
 
伪类选择器
 css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
 :link 访问前的样式（只能给a标签）
 :visited 访问后的样式（只能给a标签）
 :hover 鼠标移入时的样式（可以给所有标签）
 :active 鼠标按下时的样式（可以给所有标签）
 如果四个伪类都生效，顺序为：L V H A
 
 
 
 
伪元素选择器
 div:after{content: ;color: }
 div:before{content: }
 :checked、:disabled、:focus 都是针对表单元素
 
 
 
 
结构性伪类选择器
 :nth-of-type(){}、:nth-child(){} 角标从1开始，n值表示从0到无穷大即都被选中，隔行换色（2n）(2n+1)
 选中第一项 :first-of-type{} :first-child{}
 选中最后一项 :last-of-type{} :last-chile{}
 只有一项的时候被选中 only-of-type{} 
 【注】type和child的区别：type看孩子类别，child不区别孩子类别
 
 
CSS样式继承
 
文字相关的样式可以被继承
 布局相关的样式不能被继承（默认不继承，可以使用inherit值让其继承）
 
CSS优先级
 
相同样式优先级
 当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
 内部样式与外部样式
 内部样式与外部样式优先级相同，如果都设置了相同的样式，那么后写的引入方式优先级高
 单一样式优先级
 style行间（权重1000）> id（权重100） > class（权重10）> tag（权重1）> 继承
 !important（不能针对继承的属性进行优先级的提升）
 提升样式优先级，非规范方式，不建议使用 #elem{color:red !important;}
 标签+类与单类
 标签+类 > 单类
 群组优先级
 群组选择器与单一选择器的优先级相同，靠后写的优先级高
 层次优先级
 权重比较、约分比较
 

 CSS盒子模型
 
 
 
 

 padding/border/margin
 只写一个值：上右下左
 写两个值：上下、左右
 写三个值：上、左右、下
 写四个值：上、右、下、左
 1.背景颜色会填充到margin以内的区域（不包括margin区域）
 2.文字会在content区域
 3.padding不会出现负值，margin是可以出现负值的
 box-sizing（盒尺寸，可以改变盒子模型的展示形态）[content-box]/[border-box]
 使用场景：1.不用再去计算一些值
 2.解决一些百分比的问题input{width:100%;padding:30px;box-sizing:border-box;}
 margin叠加
 当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题（取两者中大的值作为叠加值），只有上下有，左右没有
 解决方案：
 1.BFC规范
 2.想办法只给一个元素添加间距
 margin传递
 传递问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向没有传递问题
 解决方案：
 1.BFC规范
 2.给父容器加边框
 3.margin换成padding（加给父元素，padding-top: ;并进行调整）
 margin自适应居中（只可以左右，不可以上下）
 margin-left:auto;margin-right:auto;居中
 一般写法：margin：0 auto;(margin:auto auto;)
 
 
标签分类
 
布局一般用块标签，修饰文本一般用内联标签
 
 
 
按类型：
 block：块 div p ul li h1…
 独占一行；支持css中所有的样式；不写宽时，和父元素宽相同；所占区域是一个矩形
 inline：内联 span a em strong img…
 挨在一起；有些样式不支持（宽、高、margin、padding的某些）；不写宽时，宽度由内容决定；所占区域不一定是矩形；内联标签之间会有空隙（换行产生），解决，找到两个内联的父元素：font-size:0;然后两个内联在设置font-size;16px;空隙消失
 inline-block：内联块 input select…
 挨在一起，支持宽高
 
 
显示框类型
 
display:block/inline/inline-block/none（让指定标签隐藏）
 disp:none不占空间的隐藏；visibility:hidden占空间的隐藏
 
标签嵌套规范
 
块标签可以嵌套内联标签
 块标签不一定能嵌套块标签
 内联标签不能嵌套块标签
 
溢出隐藏
 
overflow:visible（默认）/ hidden / scroll（有滚动条）/ auto（内容多的时候有滚动，内容少的时候没有）
 overflow-x、overflow-y:针对x、y分别设置
 
透明度与手势
 
 
 
opacity
 0（透明）~ 1（不透明）0.5
 rgba( , , ,0.5) 最后一个为透明度，只针对背景，不针对文字，可以让指定样式透明，不改变其他样式
 cursor 手势
 default：默认透明
 自定义鼠标样式：pointer（手型）、move（十字米可移动的样式）、help（箭头带问号）
 自定义，准备图片 .cur .ico的才可以，`cursor:url(),auto;
 
 
 
 
最大、最小宽高
 
min-width、max-width
 min-height、max-height
 一个容器怎么适应屏幕的高：
 
html,body{height:100%}
.contrainer(height:100%}
 

 CSS的默认样式
 
没有默认样式：div、span、…
 有默认样式：
 body(margin:8px)、h1(margin:上下16px)-h6、p、ul(margin:上下16px padding:左40px 默认点:list-style:disc)、a(text-decoration:underline)…
 
CSS重置样式
 
*{margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;color:#666;}
img{display:block;}

 

 图片和容器底部有一些空隙
 
vertical-align:baseline;基线对齐 ==> vertical-aglin:bottom;底线对齐
 display:block; //推荐
 
 
 
 
 
扫描下方二维码，添加小助手，开启能力认证预约直播学习，预约考试，大咖带你组建学习小组，免费学习，领取系统学习资料，记录自己的成长过程，更多详情可点击链接（https://ac.csdn.net）
 
 
 
 
 
 
 
 
原文链接：https://blog.csdn.net/rfalcon/article/details/106136426?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161473422616780271581298%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=161473422616780271581298&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-1-106136426.pc_search_result_before_js&utm_term=CSS&spm=1018.2226.3001.4187
 
————————————————
 版权声明：本文为CSDN博主「rfalcon」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
 原文链接：https://blog.csdn.net/rfalcon/article/details/106136426