css是什么软件(前端css样式库)

css是什么软件

CSS即层叠款式表，是一种用来表现HTML（标准通用标记言语的一个使用）或XML（标准通用标记言语的一个子集）等文件款式的计算机言语。
CSS不只能够静态地润饰网页，还能够配合各种脚本言语动态地对网页各元素进行格式化。
CSS能够对网页中元素方位的排版进行像素级精确操控，支持简直一切的字体字号款式，拥有对网页目标和模型款式修改的才能。
CSS是一种定义款式结构如字体、色彩、方位等的言语，被用于描述网页上的信息格式化和现实的方法。CSS款式能够直接存储于HTML网页或许单独的款式单文件。

前端css样式库

css介绍：层叠款式表，用于规矩html元素怎样显现
css款式过错查看东西：https://jigsaw.w3.org/css-validator/#validate_by_input
一、运用形式：
（1）行内款式：经过运用元素的特点style=“color:red;margin-left:20px”设置（写法便是正常的款式特点，不是驼峰命名）尽量少用，不好保护
（2）嵌入款式：经过style标签结合，选择器进行款式的定义（本质是在html结构中。所以只对当时的页面有用。若多页面需求引进相同的款式表，这种方法不合适，冗余）
//款式css文件夹中
.content{
background:red;
}
//项目中一般将款式抽离到另一个文件，使更清晰
二、常用的款式特点：
1、文本
2、字体
3、链接
4、列表
5、表格
6、盒子模型：
（1）IE盒子模型：IE盒子设置的宽高.其实是内容+padding+border（即运用的是内减形式box-sizing：border-box）
（2）规范盒子模型：规范盒子设置的宽高是内容的宽高，总元素的宽度=宽度+左填充+右填充+左面框+右边框+左面距+右边距（即css3新增的box-sizing:content-box外加形式）
（3）css3新增盒子模型设置：box-sizing:content-box(外加形式)|border-box（内减形式，会减少内容占的巨细）
7、边框
8、轮廓
9、外边距
10、内边距
11、尺度
12、显现diaplay
13、定位
position:static静态定位，它是默许值，是浏览器自主决议元素的方位，即按正常的页面流布局，此刻设特点值top、bottom、left、right无效
position:relative相对定位，它相关于自己默许的方位进行偏移（即文档流方位），能够设偏移方向和间隔top、bottom、left、right
position:absolute肯定定位它是相对父级定位的元素进行定位的（不能是静态定位，不然便是文档），文档流中不占有方位，脱离文档流,不影响周边元素
position:fixed固定定位，相对浏览器窗口进行定位，不会随网页的翻滚而改动如同固定死相同.一般用于做网页的顶部导航
position:是relative和fixed定位的结合，会产生动态固定作用。例如完成网页的搜索东西栏，初始时relative定位，文档流中方位，当翻滚页面时就变成fixed定位。页面翻滚时依据设置的偏移值生效时切换定位。
14、内容溢出怎样展现overflow
15、起浮float
//float:left/right
//怎样清除起浮的元素：
1
2
16、水平、笔直对齐
17、透明度
18、选择器、伪类、伪元素
弥补：js怎样获取dom(便是经过增加的类或特点等拿到对应的元素，再经过修正款式或特点控制)
三、css3新增的款式特点：
1、边框
2、圆角
3、布景
4、突变
5、文本作用
6、字体
7、2D转化
8、3D转化
9、过度
10、动画
11、多列
12、用户界面
13、图片
14、按钮
15、分页
16、框巨细
17、弹性盒子（flex布局）：后边有详细介绍
18、多媒体布局（一般用于呼应式布局，针对不同的屏幕设置不同的款式）
四、flex布局：弹性布局，任何一个元素都能够设置为flex布局（成为flex容器）（css3新增的弹性盒子，合适web端也合适移动端，因为宽度可份额化，所以也适用于移动端）
容器：任何元素容器都能够指定称为flex容器，经过给盒子设款式：display:flex,即成为flex容器
项目：容器的直接子元素称为Flex项目，此刻子元素的float（起浮）、clear（清除起浮）和vertical-align（笔直展现方法）
1、容器特点（都是规矩项意图摆放等方法）
（1）flex-direction：(默许)row|row-reverse|column|column-reverse（主轴的方向，即里边的项目怎样摆放，项目都是依据主轴的方向摆放的），默许水平方向摆放，起点在左端
（2）flex-wrap：nowarp|wrap(换行，当宽度放不下时后边的换行，榜首行在上方)|wrap-reverse（换行但榜首行在下面，当榜首行放不下向上换行）??(是否拆行，默许状况下在一条轴线上，不换行，即便子项意图总宽大于容器的宽也不换行，会主动减缩项意图宽度)
（3）flex-flow:rowwrap（flex-direction，flex-wrap主轴方向和是否换行的缩写）
（4）justify-content：flex-start（左对齐）|flex-end（右对齐）|center（居中）|space-between（两头对齐，项目之间的间隔持平，但距左右边框不必定）|space-around（每个项目两边的间隔持平）（主轴对齐方法）
（5）align-items：flex-start（穿插轴起点对齐）|flex-end（穿插轴终点对齐）|center|baseline（项目榜首行文字的基线对齐|stretch（占满容器的高度）（穿插轴的对齐方法，只针对单行）
（6）align-content：（穿插轴多行对齐方法）
??：首要记住4个特点：主轴方向（规矩子项目怎样摆放），是否拆行，主轴对齐方法，穿插轴对齐方法
2、项目特点
（1）order：number（数值越小越靠前，默许为0），项目在html中的摆放次序，一般不设该特点便是html靠前的先摆放（即经过款式可调整html结构）
（2）flex-grow：number（默许0，假如有剩下空间也不扩大，值为1扩大，2是1的双倍巨细）项目扩大份额，当项意图总宽小于容器宽时是否扩大撑满容器，还有一个运用形式便是经过设置该特点规矩各项目按什么份额占满容器宽度
（3）flex-shrink：number（默许为1，假如空间缺乏则会缩小（当宽度不行时项目会缩小），值为0不能缩小），数值越大缩放份额越大
（4）flex-basis：number/auto（默许auto，可设置固定的值50px/50%）项目本身巨细，auto便是原项目自己的宽度
??扩大、缩小、本身控制的都是主轴上的份额
（5）flex:flex-growflex-shrinkflex-basis(它是这三个特点的缩写默许01auto)auto(即11auto会扩大会缩小本身宽)和none(即00auto不扩大不缩小本身宽)flex:1flex特点只有一个值的时分，省略的两个并不是默许值
（6）align-self：auto|flex-start|flex-end|center|baseline|stretch项目本身对齐（只影响本身项意图穿插轴的摆放）
??共5个，首要记住：扩大、缩小
flex在演化过程有三个版别：
旧版别display:box|inline-box,
混合版别display:flexbox|inline-flexbox,
新版别display:flex|inline-flex
flex:initialflex:01auto初始值，常用：运用flex容器宽度不行主动收缩，当子的内容较多时主动换行的场景
flex:0flex:010%适用场景少（终究尺度表现为最小内容宽度）
flex:noneflex:00auto引荐（固定尺度由内容决议，元素不具有弹性，一般为最大内容宽度，flex容器不行时直接溢出），适用当flex子项的宽度便是内容的宽度，且内容永久不会换行
flex:1flex:110%引荐当尺度缺乏时会优先最小化尺度，即优先牺牲自己。场景：期望充分利用剩下空间，但不会侵占其他元素尺度，合等分布局；
flex:autoflex:11auto适用场景少，当尺度缺乏时会优先最大化自己的内容，即优先霸占住自己的方位，让其他进行换行缩放。元素充分利用剩下空间，但是各自的尺度按照各自内容进行分配的时分，例如导航按钮的宽度是依据按钮文字的多少分配宽度的。
五：BFC盒子布局:块格式化上下文
（1）概念：能够理解为一块阻隔的区域，独立的烘托区域，它规矩内部怎样布局，与外部毫无关系。有一套自己的烘托规矩，它决议了其子元素将怎样定位，以及和其他元素的关系和相互作用
（2）触发条件：
【1】根元素，即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed
BFC布局规矩：
1.内部的Box会在笔直方向，一个接一个地放置。
2.Box笔直方向的间隔由margin决议。属于同一个BFC的两个相邻Box的margin会产生堆叠（若笔直设了下边距，一起后边的设了上边距此刻会产生堆叠）
3.每个元素的marginbox的左面，与包括块borderbox的左面相触摸(关于从左往右的格式化，不然相反)。即便存在起浮也是如此。
4.BFC的区域不会与floatbox堆叠。
5.BFC便是页面上的一个阻隔的独立容器，容器里边的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，起浮元素也参加计算
运用它的好处起浮的元素也占有高
7、同一个BFC下外边距会产生折叠（可经过在创立bFC容器处理）
8、BFC能够阻止元素被起浮元素掩盖（即改动盒子与起浮元素触摸区域的摆放）
六、呼应式规划：同一页面在不同屏幕尺度下有不同的布局（依据屏幕的巨细主动调整页面的的展现方法以及布局）代表Bootstrap
1、需考虑的点：
（1）同一页面在不同巨细和份额上看起来都应该是舒适的；
（2）同一页面在不同分辨率上看起来都应该是合理的；
（3）同一页面在不同操作方法（如鼠标和触屏）下，体会应该是统一的；
（4）同一页面在不同类型的设备（手机、平板、电脑）上，交互方法应该是符合习惯的。
呼应式界面的根本规矩
（1）可伸缩的内容区块：内容区块的在必定程度上能够主动调整，以保证填满整个页面
（2）可自由排布的内容区块：当页面尺度变动较大时，能够减少/增加排布的列数
（3）习惯页面尺度的边距：到页面尺度产生更大改动时，区块的边距也应该改动
（4）能够习惯份额改动的图片：关于常见的宽度调整，图片在隐去两边部分时，依旧保持美观可用
（5）能够主动隐藏/部分显现的内容：如在电脑上显现的的大段描绘文本，在手机上就只能少数显现或悉数隐藏
（6）能主动折叠的导航和菜单：打开还是收起，应该依据页面尺度来判断
（7）放弃运用像素作为尺度单位：用dp尺度等方法来保证页面在分辨率相差很大的设备上，看起来也能保持一致。一起也要求供给的图片应该比料想的更大，才干习惯高分辨率的屏幕。不然，就会像我的Photoshop相同呈现一下展现不清楚的状况：
原理：检测设备设置不同的css(依据市面上不同的设备尺度设置css款式)
过程
（1）设置可视区域：Viewport(用户网页的可视区域)
(可设置的特点用时查)
（2）创立网络视图（按列分割屏幕）即给一切的元素增加*{box-sizing:border-box//保证内容在边框内}
（3）用媒体查询设置分割点（针对不同的设备设置不同的款式，针对不同的屏幕尺度设置不同的款式，特别是假如你需求设置规划呼应式的页面）假如是PC端优先，则用max-width,移动端优先，则用min-width
@mediascreenand(max-width:1920px){//当屏幕小于1920px页面款式…}
@mediascreenand(min-width:992px)and(max-width:1200px){…}//最大宽度便是屏幕的最大宽度
（4）图片的宽度设置；100%，即会依据上下范围完成呼应式，max-width特点设置为100%,图片永久不会大于其原始巨细：依据需求看图片怎样排版布局，可利用布景图片的特点background-size,也可在不同的屏幕尺度上加载不同的源图片
（5）宽度利用100%及max-width：100%
（6）百分比布局
（7）rem单位布局，css3新增Android2.x+,ios5+都支持，rem单位都是相关于根元素html的font-size来决议巨细，即不同视图改动跟元素的
font-size，所以以rem为单位的巨细都会改动，然后快速调整页面整体字的巨细
（8）视口单位：vw（相关于视图窗口的宽度，1vw等于视口宽度的1%。总的视口宽度是100vw）/vh(css3新增)，
呼应式规划与自习惯规划的区别：
呼应式开发一套界面，经过检测视口分辨率（屏幕巨细），针对不同客户端在客户端做代码处理，来展现不同的布局和内容；（开发时会习惯各个视口）
自习惯需求开发多套界面，经过检测视口分辨率，来判断当时拜访的设备是pc端、平板、手机，然后恳求服务层，回来不同的页面（让一个网站在不同巨细的设备上显现同相同的页面，让同一个页面习惯不同巨细屏幕，依据屏幕的巨细，主动缩放。）
常用的css扩展言语
1、Less
2、scss
pc端页面常用布局：
（1）常用页面布局：导航、内容、底部
我是头部内容
//头部
我是内容1
我是内容2
我是底部内容
#Page{
text-align:center;
}
.bg{
background-color:pink;
}
#Header{
width:100%;
height:60px;
line-height:60px;
}
#Content{}
#Contentdiv{
/*高度不是写死，内容撑开*/
min-height:500px;
line-height:500px;
}
#Footer{
width:100%;
height:200px;
line-height:200px;
}
（2）单列布局：关于网站不是许多，只是经过导航一列的展现用户所需的内容，内容一般有固定的宽度，高度由内容撑开
//上下固定，内容超出翻滚完成（移动端运用较多），只需求给头部和底部加上肯定定位，再增加内容标签（留意：父元素不能有定位）
//PS：固定能够运用Fixed，但是有兼容性问题
//肯定定位与文档流无关，它本质是不占有方位的，脱离文档流。而相对定位是相对原自己在文档流的方位进行定位的，在文档流中。肯定定位弱祖先都没有定位，则相对最早包括的元素（body）
#Header{
position:absolute;
top:0;
}
#Content{
position:absolute;
top:60px;//即留了60px给导航
bottom:200px;//即留了200px给底部内容
width:100%;//依据自己的需求设置，一般不要写死宽度，这样可依据屏幕的巨细习惯
overflow-y:scroll;//超出内容高度翻滚完成
}
#Footer{
position:absolute;
bottom:0;
}
//内容过少时底部固定，过多时正常摆放（即底部不固定，正常内容完结后底部再展现）
html{
height:100%;
}
body{
min-height:100%;
position:relative;
}
//内容撑开盒子，高度不设
#Footer{
position:absolute;
bottom:0;//始终在底部
}
（3）两列布局：一边导航一边内容的，例如常用的组件库排版（左/右边固定宽度，右/左面宽度自习惯）