摘要:文档流指的是元素按照在中为的位置顺序决定排布的过程,在排布过程中,将窗体自上而下分为一行行,并在每行中从左至右的顺序排放元素。
前提知识 选择器介绍一篇文章包你学会使用pure.css框架,理解其原理,并学会其包含css知识,学会自己写css组件
优先级就是分配给指定css声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。而当优先级与多个css声明中任何一个声明的优先级相等时,css中最后的那个声明将会被应用到元素上。
选择器是用于定位文档中的元素以便设定相应的样式代码
选择器分类
基础选择器
选择器 | 含义 | 实例 |
---|---|---|
* | 通用选择器,匹配任何元素 | *{font-size:16px} |
E | 标签选择器,匹配所有使用E标签的元素 | a{font-size:16px} |
.error | class选择器,匹配所有class属性中包含error的元素 | .error{font-weight:bold;} |
#correct | id选择器,匹配所有id属性值为correct的元素 | #correct{font-style:italic;} |
组合选择器
选择器 | 含义 | 实例 |
---|---|---|
E,F | 多元素选择器,同时匹配所有E元素或F元素 | div,p{background-attachment:fixed;} |
E F | 后代元素选择器,匹配所有属于E元素的后代F元素 | div a{background-color:blue;} |
E>F | 子元素选择器,匹配所有E元素的子元素F | |
E+F | 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F |
属性选择器
选择器 | 含义 | 实例 |
---|---|---|
E[att] | 匹配所有具有att属性的E元素 | p[style]{background-repeatrepeat-y;} |
E[att=val] | 匹配所有att属性等于"val"的E元素 | div[class="c1"] |
E[att~=val] | 匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素 | div[class~=c2] |
E[att=val] | 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以"val"开头的E元素 | p[lang =en] |
伪类选择器
选择器 | 含义 | 实例 |
---|---|---|
E:first-child | 匹配父元素E下的第一个子元素 | div:first-child{text-align:center;} |
E:link | 匹配所有未被点击的链接 | |
E:visited | 匹配所有已被点击的链接 | |
E:active | 匹配鼠标悬停其上的E元素 | |
E:hover | 匹配鼠标悬停其上的E元素 | |
E:focus | 匹配获得焦点的E | |
E:lang(c) | 匹配lang属性等于c的E元素 |
伪元素
选择器 | 含义 | 实例 |
---|---|---|
E:first-line | 匹配E元素的第一行 | p:first-line{color:red;} |
E:first-letter | 匹配E元素的第一个字母 | .c1:first-letter{color:blue;} |
E:before | 在E元素之前插入生成的内容 | .ctn before{} |
E:after | 在E元素之后插入生成的内容 | .ctn after{} |
(解释了众多css样式被覆盖的问题)
首先!important的css定义是拥有最高的优先级
优先级计算分为a,b,c,d四个位数,这四个位数的优先级依次递减。
内联样式:a=1;
ID选择器:b=1;
属性选择器和类选择器:c=1;
元素选择器和伪类选择器: d=1;
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */文档流
(主要应用于menu中,垂直和水平导航栏)
css文档流(document flow)和普通流(normal flow)实际上指的是同一个概念。
文档流 指的是元素按照在HTML中为的位置顺序决定排布的过程,在排布过程中,将窗体自上而下分为一行行,并在每行中从左至右的顺序排放元素。
非浮动的块级元素(block)独占一行,行内元素(inline)不会独占一行。
块级元素的效果内联元素的效果div1div2
超链接1 超链接2绝对定位
(主要是用于含有重叠菜单的子菜单定位问题)
绝对定位其实是相对了某个东西的,而这个东西就是元素的第一个有position且position不能为static的祖先元素。就是这个东西必须是有一定地位的(position:absolute或position:relative),不能是一个穷鬼(position:static)或者没有地位的(position).这个时候,绝对定位,它才能以之为标杆。
给他爸爸加上相对定位,然后他是绝对定位
基础红色:太公绿色:爷爷黄色:老爸div1div2div3
所有pure模块都是基于normalize.css构建,对比base.css详细normalize.css内容请查看《Normalize.css》
Normalize.css是一个小的CSS文件,为HTML元素样式提供跨浏览器的一致性。它是一个现代的、支持HTML5的、传统CSS重置的替代。
html { font-family: sans-serif; /* 1 */ //无衬线体,字的比划开始及结束地方没有额外装饰 -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ //iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能. }
abbr[title] { border-bottom: 1px dotted; } //缩略词显示详情,含有title属性的abbr标签缩略词的底部边线
svg:not(:root){ overflow: hidden; } //svg(可缩放矢量图形),是基于可扩展标记语言(XML),用于描述二维矢量图形 :root,匹配文档的根元素,在HTML中,根元素永远是HTML :not(selector)选择器匹配非指定元素 则以上是svg非根元素的元素隐藏元素
[hidden], template { //template模板标签 display: none; } .hidden, [hidden] { //!important最高优先级 display: none !important; }
html元素添加hidden属性,可以实现display:none !important;
响应式图片添加class .pure-img,配合viewport可以实现图片伸缩
.pure-img { //最小宽度(min-width)与最大宽度(max-width)用于设置图片最小最大宽度限制比较多。 比如一个图片为主列表,对象里图片大小不定时候,为了不想让他太小不统一这个时候我们可以使用css最小宽度样式。再如,一个盒子里有文章有图片混排的时候,有时图片宽度不能确定,这个时候如果html img图片宽度超出了盒子宽度,可能图片就会撑破div盒子造成图片混乱。 max-width: 100%; height: auto; display: block; }
max-width详细情况可以查看《CSS max-width 属性》
栅格 .pure-g的样式letter-spacing: -0.31em;
1em == 16px,因为浏览器默认的字体大小是16px,em可以在浏览器改变字体大小时作出相应的放大和缩小,弹性布局
*word-spacing: -0.43em
在样式属性名前加*,这样的样式可以被IE6和IE7所识别,而其它浏览器则会当做错误忽略,所以,这样的样式写法只对IE6/7生效. 而_开头的属性只有IE6才能识别.
关于letter-spacing和word-spacing的区别
word-spacing属性增加或减少单词之间的空白
letter-spacing属性增加或减少字符之间的空白
text-rendering: optimizespeed;
text-rendering属性常被用在windows和linux系统中,用来给渲染引擎提供信息,让文本在速度和可读性方面得到优化,控制在线字体的微妙细节,目前只有firefos和google支持。
optimizespeed取值 Gecko内核的浏览器将强调可读性和几何精度,同时绘制文本渲染速度,禁用字距和连写
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
常用的字体
display: -webkit-box;/ Chrome 4+, Safari 3.1, iOS Safari 3.2+ /
display: -webkit-flex;/ Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 /
display: -ms-flexbox;/ IE 10 /
display: flex; / Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ /
webkit是一个开源的浏览器引擎,与之对应的有Gecko和Trident,加上之后表示私有属性
-moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属性
关于display:box和display:flex的区别
flex是2012年以后的标准语法,大部分浏览器已经实现了无前缀版本,box是2009年语法,需要加上前缀
以上其实是该属性的兼容性代码
flex布局,弹性布局,用来为盒装模型提供最大的灵活性
通过添加.pure-g和未添加进行对比,可以发现,.pure-g的效果主要就是flex属性,而flex属性在此处的重要作用是给.pure-u元素添加float浮动属性
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
flex-flow:
row表示行内方向,即弹性项目在弹性容器中的起始放置方向,flex-wrap表示需要拆行以使得弹性项目能被容器包含
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
多行项目时,让弹性元素始终排在头部,中间没有间距,详细flex教程请查看《Flex布局教程:语法篇》
@media all and (min-width:xxx) and (max-width:xxx){ /*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/ table .pure-g { display: block; } }
写这一行是因为flex在ie10中的table时不起作用
.pure-g [class *= "pure-u"] {font-family: sans-serif;}
表示的是设置class属性值包含有pure-u 字符串的所有pure-g元素的样式
div[class^="something"] { }表示以之开始 div[class$="something"] { }表示以之结尾.pure-u的样式
.pure-u { display: inline-block; *display: inline; /* IE < 8: fake inline-block */ zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; }
zoom: normal |
normal:使用对象的实际尺寸
vertical-align垂直对齐属性
.pure-u-x-y{ display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; }
这个样式和.pure-u是相同的
pure栅格默认支持5列和24列
x/y表示的是列数所占的比重
.pure-u-1-24 { width: 4.1667%; *width: 4.1357%; }
可以发现IE67和其他浏览器之间的宽度存在细微差别,微调后可修复
表单 .pure-form样式.pure-form input[type="text"]
不同的表单类型
padding: 0.5em 0.6em; //设置表单内部填充 display: inline-block; //显示为行内元素 border: 1px solid #ccc; //边界线 box-shadow: inset 0 1px 3px #ffffd; //盒子阴影,inset设置在内边框 border-radius: 4px; //圆框边角 vertical-align: middle; //让行内元素居中显示,主要是表单 box-sizing: border-box; //设置盒子尺寸
input:not([type]) //这个属性需要分离出来,因为ie8在一堆css2.1中包含一个css3属性的时候不会执行
:not()否定选择器,可以让你定位不该匹配该选择器的元素,IE6-8浏览器不支持:not()选择器
.pure-form input[type="color"]{
padding: 0.2em 0.5em;
} //chrome显示色彩选择器需要额外的空间
input[type="text"]:focus {
outline:0;
border-color:#129FEA;
}
为聚焦的时候添加样式
outline和boder区别
outline是不占空间的,既不会增加额外的width或者height
border可应用于几乎所有有形的html元素,而outline是针对链接、表单控件和imageMap等元素,outline会随元素focus出现,随blur而消失
详细的情况可以查看《深入浅析border和outline区别》
input[type="text"][disabled] input[readonly]
这两种写法都会使显示出来的文本框不能输入文字
但disabled会使文本框变灰,而且通过request.getParameter("name")得不到文本框中的内容(如果有的话)
而readonly只是使文本框不能输入,外观没有变化,而且通过request.getParameter("name")可以得到内容,可以复制
input:focus:invalid
同类型的方法
:required必须,要求input不能为空
:valid有效,即当填写内容符合要求时触发
:invalid无效,即当填写内容不符合要求时触发
可以看到符合要求时,显示的边框颜色为蓝,右边的没有添加:focus选择器的表单在无效的时候一直都是红色
疑问:
input:focus:invalid和input:focus:invalid:focus差别并没有试验出来
.pure-form fieldset
.pure-form legend
fieldset和legend标签的组合使用
实现的手段是添加border:0和border-bottom
.pure-form-stacked样式可以生成堆叠式表单,即为同一列
实现的手段是添加display:block将它变成块级元素,独占整行和margin: 0.25em 0;
.pure-form-aligned样式可以生成对齐式表单,label显示在input左边末端对齐
nline-block显示成行内元素,然后设置width使之可以撑满,再设置text-align:right使之向右对齐,此时与表单过于靠近,添加margin属性,使和表单之间间距变大。考虑到字数过长产生换行,使用vertical-align让行内元素居中显示
可以为表单标签分组,使用方法是为fieldset添加该class
区别不大,主要是阴影部分,以及结束部分相连r-radius:0将圆角样式去除,然后使用:first-child和:last-child选择器,重新设置这两个元素的圆角等样式,达到此效果
.pure-form .pure-group input:first-child:last-child
通过伪类选择器设置第一个和最后一个同类标签的样式
.pure-form .pure-input-2-3
设置表单大小
按钮 .pure-button样式//这个样式应该主要是运用在移动端 display: inline-block; //行内元素 zoom: 1; //缩放比例 line-height: normal; //默认行高 white-space: nowrap; //如何处理元素内的空白,normal空白会被浏览器忽略,nowrap文本不会换行 vertical-align: middle; //实现行内元素的水平居中 text-align: center; //使文本水平居中 cursor: pointer; -webkit-user-drag: none; //user-drag:auto | element | none设置和检索一个元素能否被拖拽 -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; //user-select:none | text | all | element设置和检索是否允许选中文本 box-sizing: border-box; //设置的内边距和边框不会增加宽度
//网页端主要样式 .pure-button { font-family: inherit; font-size: 100%; padding: 0.5em 1em; color: #444; /* rgba not supported (IE 8) */ color: rgba(0, 0, 0, 0.80); /* rgba supported */ border: 1px solid #999; /*IE 6/7/8*/ border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ background-color: #E6E6E6; text-decoration: none; border-radius: 2px; }伪类选择器样式
//设置鼠标在上和焦点在上时的样式 .pure-button-hover, .pure-button:hover, .pure-button:focus { /* csslint ignore:start */ filter: alpha(opacity=90); //透明度使用 /* csslint ignore:end */ background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); } //用线性渐变创建图像 rgba(0,0,0, 0.05) 40%和rgba(0,0,0, 0.10));分别为起始颜色和终止颜色,第一个参数一般是渐变方向,top 是从上到下、left 是从左到右,如果定义成 left top,那就是从左上角到右下角
线性渐变
linear-gradient([ [
详细情况可以查看《css参考手册》.htm)
疑问:
background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
transparent这个参数的作用和效果
表格 .pure-table的样式.pure-table { /* Remove spacing between table cells (from Normalize.css) */ border-collapse: collapse; //为表格设置合并边框模型 //collapse边框会合并成一个单一边框,忽略border-spacing和empty-cells属性,而separate会使边框分开,inherit规定应该从父元素继承border-collapse属性 border-spacing: 0; //设置相邻单元格边框间的距离,不过仅用于边框分离模式 empty-cells: show; //设置是否显示表格中的空单元格,仅适用于边框分离模式 border: 1px solid #cbcbcb; }
.pure-table caption表格标题
.pure-table td,.pure-table th,.pure-table thead
th:表头单元格-包含表头信息
td: 标准单元格-包含数据
thead:结合tbody和tfoot元素结合使用
.pure-table-odd td{
background-color: #f2f2f2;
}
隔行添加可以实现斑马纹的效果或者直接加上pure-table-striped
.pure-table-striped tr:nth-child(2n-1) td{
background-color: #f2f2f2;
}
:nth-child(n)选择器 规定属于其父元素的第n格子元素,不论元素类型
:nth-of-type() 选择器的意思是“规定属于其父元素的第二个 p 元素”,这个需要从同类元素开始机选
.pure-table-bordered tbody > tr:last-child > td
有边框的表格,>选择器,可以缩小范围,只选择某个元素的子元素
菜单 .pure-menu的样式 纵向菜单的实现//设置盒子大小不因为boder变化 .pure-menu { box-sizing: border-box; } //清除列表原有样式 .pure-menu-list{ list-style: none; margin: 0; padding: 0; } //清除a标签原有样式,填充a标签,并变为块级元素 .pure-menu-link{ display: block; text-decoration: none; white-space: nowrap; color: #777; padding: .5em 1em; } //在父级元素使用inline-block将之变为行级元素并同一高度 .custom-restricted-width { /* To limit the menu width to the content of the menu: */ display: inline-block; /* Or set the width explicitly: */ /* width: 10em; */ } //添加:hover,:link等样式 .pure-menu-link:hover, .pure-menu-link:focus { background-color: #eee; }
疑问之处:
inline-block怎样自动确定并统一行级元素的宽度
横向菜单的实现![clipboard.png](/img/bVNrDC) .pure-menu-heading{ padding: .5em 1em; display: block; text-decoration: none; white-space: nowrap; text-transform: uppercase; color: #565d64; } //给a标签的父级标签li标签添加display:inline-block,使三个a标签同行 .pure-menu-horizontal .pure-menu-item, .pure-menu-horizontal .pure-menu-heading, .pure-menu-horizontal .pure-menu-separator { display: inline-block; *display: inline; zoom: 1; vertical-align: middle; } //为li的父级ul标签添加display:inline-block,使所有标签同行 .pure-menu-horizontal .pure-menu-list { display: inline-block; } //清除列表原有样式,统一间距 .pure-menu-list{ list-style: none; margin: 0; padding: 0; }
关键样式
清除列表原有样式
使用padding: .5em 1em填充a标签
清除a标签原有样式
为a标签的父级标签li标签添加display:inline-block,使三个a标签同行
为标题的a标签和li的父级ul标签添加display:inline-block,使所有标签同行
为ul标签添加margin:0和padding:0清除ul原有样式
含有子菜单的横向菜单的实现//样式整合 .pure-menu-link{ display: block; text-decoration: none; white-space: nowrap; //可自定义部分 color: #777; padding: .5em 1em; } .pure-menu-list{ list-style: none; margin: 0; padding: 0; } //实现横向菜单 .pure-menu-horizontal .pure-menu-list{ display: inline-block; } //实现下拉菜单符号 .pure-menu-horizontal .pure-menu-has-child > .pure-menu-lin:after{ content: "25BE"; } //子菜单的样式 .pure-menu-children{ display: none; position: absolute; left: 100%; top:0; margin: 0; padding: 0; z-index: 3; background-color: #fff; } //鼠标移动显示下拉菜单 .pure-menu-allow-hover:hover > .pure-menu-child{ display: block; position: absolute; } //子菜单移动至下方 .pure-menu-horizontal .pure-menu-children { left: 0; top: auto; width: inherit; }
content属性与:before和:after伪元素配合使用,来插入生成内容
特殊字符 | 对应号码 |
---|---|
► | 9658 25BA |
▲ | 9650 25B2 |
▼ | 9660 25BC |
◄ | 9668 25C4 |
menu-has-children > .pure-menu-link:after { padding-left: 0.5em; content: "25B8"; font-size: small; } //显示隐藏的子元素 .pure-menu-allow-hover:hover > .pure-menu-children{ display: block; position: absolute; }滚动菜单的实现
//限制了边框才显示滚动条 .custom-restricted { height: 160px; width: 150px; border: 1px solid gray; border-radius: 4px; } //y轴可滚动,x轴溢出隐藏 .pure-menu-scrollable { overflow-y: scroll; overflow-x: hidden; } //将li标签设为块级元素 .pure-menu-scrollable .pure-menu-list { display: block; } //水平菜单时,显示为行级元素 .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list { display: inline-block; } //水平菜单针对的只是移动端,触摸横向滚动 .pure-menu-horizontal.pure-menu-scrollable { white-space: nowrap; overflow-y: hidden; overflow-x: auto; //指示元素不显示滚动条或者筛选指标,即使内容溢出 -ms-overflow-style: none; //可以让页面在native端滚动时模拟原生的弹性滚动 -webkit-overflow-scrolling: touch; /* a little extra padding for this style to allow for scrollbars */ padding: .5em 0; } //存在疑问 .pure-menu-horizontal .pure-menu-scrollable::-webkit-scrollbar { display: none; }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111978.html
摘要:文档流指的是元素按照在中为的位置顺序决定排布的过程,在排布过程中,将窗体自上而下分为一行行,并在每行中从左至右的顺序排放元素。 一篇文章包你学会使用pure.css框架,理解其原理,并学会其包含css知识,学会自己写css组件 前提知识 选择器介绍 优先级就是分配给指定css声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。而当优先级与多个css声明中任何一个声明的优先...
摘要:纯,不使用,能实现怎样的视觉效果这里收集整理了一些相关资源与工具,欢迎各位补充。出品的纯框架,体积小巧。仅一个标签实现的纯图标库。一个令人印象深刻的图片悬停效果集合,完全基于实现。纯模拟移动设备纯实现模态框使用库把图像转换成属性。 awesome-pure-css-no-javascript 纯 CSS + HTML,不使用 JavaScript,能实现怎样的视觉效果? 这里收集整理...
摘要:纯,不使用,能实现怎样的视觉效果这里收集整理了一些相关资源与工具,欢迎各位补充。出品的纯框架,体积小巧。仅一个标签实现的纯图标库。一个令人印象深刻的图片悬停效果集合,完全基于实现。纯模拟移动设备纯实现模态框使用库把图像转换成属性。 awesome-pure-css-no-javascript 纯 CSS + HTML,不使用 JavaScript,能实现怎样的视觉效果? 这里收集整理...
摘要:注意此处的定位是以即的外沿框进行定位的。关于单位,这个单位代表的意思即,即浏览器可视区域的高度。,我们现在来看效果将会是下面这张图片显示的样子。设置目的即让的高度为,即到顶部的距离减去的距离。 简单的说明一下,使用这个标题并不就是说要使用全英文来写这篇文章,主要是实在想不到更好的叫法了,也不知道怎么样能够更好的翻译成中文。 可以简单地理解为:使用 CSS 来实现一个阅读文章时的简单的...
阅读 2652·2021-11-08 13:16
阅读 2281·2021-10-18 13:30
阅读 2205·2021-09-27 13:35
阅读 1962·2019-08-30 15:55
阅读 2413·2019-08-30 13:22
阅读 545·2019-08-30 11:24
阅读 2035·2019-08-29 12:33
阅读 1785·2019-08-26 12:10