热门搜索 :
宠物故事
您的当前位置:首页正文

开坑,写点Polymer1.1教程第6篇--样式(2)_html/css_WEB-ITnose

2023-11-28 来源:微宠网

前言

已经好久没有更新Polymer专栏,之前几个月由于受到工作上的突然变故,导致学习和撰写无法顺利开展,好在目前各方面都已经暂时稳定下来,期间有不少对Polymer感兴趣的坛友通过评论或者私信的形式向我表达了不要断更的期望,我在这里也想对他们说声谢谢。

今天我们继续Polymer的样式篇,刚刚在新机器下部署好了Polymer的开发环境,发现时隔2个月Polymer已然悄悄升级到了1.3版本(虽然我还没去了解新版本的变更),这也说明了Google对这个框架的重视程度,给我们学习Polymer的朋友们打了一针强心剂。(建议大家在阅读本文前执行bower update命令来更新Polymer到最新版)

正题 跨作用域的样式 背景

对于Webcomponent而言,Shadow Dom 带来了很多作用域以及样式封装之类的好处,使得组件在CSS影响范围上变得更加安全和简单。样式不会被上层的组件介入影响,更不会被内层组件影响。

这对保护样式不受未知的,不可控的外界因素所干扰非常有用。但是当你想要刻意去修改一个自定义组件的样式时该怎么办?我们经常要面临这个问题,比如在某个固定的主题(theme)下做一些针对某些组件的特殊的样式修改。举个例子,“custom-checkbox”组件使用 .checked这个class,而另外一个component也碰巧使用了.checked 这个class的时候Polymer提供的Shadow Style功能就很好的解决了同名class相互影响,相互污染的问题。

为了解决污染的问题传统的做法往往是,给css定义加上很多前缀,之前加上很多dom层级的定义(类似于namespace)来区分重名的class,而有了Shadow Style之后,妈妈就再也不担心class重名了。

自定义CSS属性(或者称为变量更加合适)

我们先来看一段代码,定义一个component

   

我们可以看到span上的className为title,而titile的定义里出现了奇怪的东西var (xxxxxx)

.title{ color: var(--my-toolbar-title-color);}

我们望文生义一下,从字面上理解这个color应该是个动态的值,具体颜色一定是由外部使用这个component的父component来决定的,而–my-toolbar-title-color应该就是一个变量名,存放外部传入的具体颜色值。接下去我们再定义一个父component来使用这个my-toolbar

   

运行结果一目了然,my-toolbar这个component中定义的css变量可以被外部使用它的my-element这个父component赋值。形式上感觉就是–my-toolbar-title-color这个自定义的变量称为一个新的css属性,可以被赋值(正如我们小标题上的称呼—— 自定义css属性)。

当然你也可以给var –my-toobar-title-color一个默认的初始值,以防外界没有给它赋值,如

color: var(--my-toolbar-title-color, blue);

这种自定义css属性,对于扩展我们传统的样式十分有帮助,尤其是切换不同配色的主题时,目前Firefox已经原生支持这种写法,chrome和safari也已经宣称要支持这一特性,鼓掌!

自定义CSS代码块

了解过sass的朋友应该对@mixin不陌生,polymer也提供了整块整块定义css样式的功能,先看代码,我们对之前的my-toolbar的代码稍作改动,使用@apply来声明了2个变量接收mixin的样式块。

   

之后对my-element也做一下修改

   

运行结果

我们可以看到@apply和之前的var作用其实是类似的,只不过@apply定义的变量接收的是由多条style规则组成的块。

好了,页已深,可能讲完整个style章节需要总共4-5个小节,今天第2小节就讲到到这里吧,我尽量抽时间写完。

小编还为您整理了以下内容,可能对您也有帮助:

css居中的几种方式_html/css_WEB-ITnose

居中分水平和垂直两种,使用的频度也算是很高,下面分情况来讨论一下几种常用的实现方式。

欢迎指正文中的错误,同时如果有学习到新的方式也会更新在后面,也方便以后温故知新。

1.margin 这种方式只能实现固定宽度的块级元素水平居中,如果该元素没有设置宽度或者不是块级元素,则不会生效。

/*以div元素为例*/div{ width: 100px; height: 100px; margin: auto; /*或者margin: 0 auto;*/}

2.line-height 将单行文字line-height值设置为其父元素高度可以实现该行文字的垂直居中,局限也很明显。

文字内容

#container{ height: 30px;}#content{ line-height: 30px;}

3.表格 如果你使用表格的话,那么可以利用td元素的align:center和valign:middle属性轻易的做到水平和垂直居中,但是考虑到现在表格布局的使用频率已经很低了,实用性其实并不强。

4.display: table-cell 由于单元格可以轻易的实现水平和垂直居中,所以可以把父元素容器模拟成单元格元素,通过样式text-align:center以及vertical-align:middle来达到一样的效果。但是要注意的是text-align:center只能使非块级子元素水平居中而对块级子元素无效。

#table{ display: table-cell; width: 200px; height: 200px; vertical-align: middle; text-align: center;}

5.绝对定位居中 这个方法使用的相对也较多,但是需要子元素有固定的宽高,不多说直接上代码。

html,body{ width: 100%; height: 100%;}body{ position: relative;}body>div{ position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; /*此时的元素并不是居中的,向右偏了一半的宽度,向下偏了一半的高度*/ /*所以要使用margin把元素拉回来*/ margin: -50px 0 0 -50px; }

如何利用CSS实现各种几何图形形状效果_html/css_WEB-ITnose

如何利用CSS实现各种几何图形形状效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度。大家都知道CSS具有强大的功能,能够让页面变得美观靓丽,随着CSS的版本的提高,功能也越来越强大,下面简单介绍一下如何使用CSS实现各种几何图形效果。一.实现正方形:

蚂蚁部落.mytest{ width:100px; height:100px; background-color:green;}

二.实现矩形:

蚂蚁部落.mytest{ width:150px; height:100px; background-color:green;}

三.实现圆形:IE8和IE8以下的浏览器不支持。

蚂蚁部落.mytest{ width:100px; height:100px; background:green; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px;}

四.实现椭圆形:IE8和IE8以下的浏览器不支持。

蚂蚁部落.mytest{ width:200px; height:100px; background:green; -moz-border-radius:100px / 50px; -webkit-border-radius:100px / 50px; border-radius:100px / 50px;}

五.实现三角形:以下代码可以根据实际需要设置其他方向的角北京色为白色,就可以实现某一方向为三角形。

蚂蚁部落.mytest{ width:0px; height:0px; border-left:100px solid green; border-right:100px solid black; border-bottom:100px solid red; border-top:100px solid blue;}

六.平行四边形:IE8和IE8以下的浏览器不支持。

蚂蚁部落.mytest{ width:150px; height:100px; margin-left:20px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background:green;}

七.鸡蛋形状:IE8和IE8以下的浏览器不支持。

蚂蚁部落.mytest{ display:block; width:126px; height:180px; background-color:green; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;}

八.提示框:

蚂蚁部落.parent{ width:300px; height:100px; margin:40px auto; background-color:green; position:relative;}.square{ width:0px; height:0px; border-bottom:10px solid white; border-left:10px solid white; border-right:10px solid green; border-top:10px solid green; position:absolute; left:-20px; top:10px;}

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/591.html

最原始地址是:http://www.softwhy.com/

html代码编写过程中的几个警惕点_html/css_WEB-ITnose

本文想说的警惕点与浏览器兼容无关,主要是几个本人在项目中遇到的几个小问题的总结,问题虽小,但是却有时很困扰人,在此记录一下,如果后期有此类问题会持续添加到这里。

1.内联标签之间的空格

正常情况下书写html代码的时候都有换行、缩进等习惯,比如

html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{ margin: 0; padding:0; } #myDIV { width: 200px; height: 200px; background-color: #ff0; } #myDIV > div{ width: 50px; height: 50px; display: inline-block; background-color: #f00; } div1 div2

显示效果为

中间有一个空白。原因是如果两个内联标签(或者设置display:inline或inline-block)之间有连续的空格符、回车符、换行符,则会这些符号会被默认处理为一个空格符号。

比如我们在两个div标签之内加入" ddd dd d ",效果如下,无论有多少个相连的空白符号,最终呈现的效果都只有一个空格符

这个和在内联元素中直接写入字符类似

但是内联元素会去掉头部和尾部的空白字符。

所以需要提示的是:

内联元素排列时如果需要避免标签之间的空白则需要使标签紧密相连。

内联元素要填写内容时尽量使用.innerText或.textContent(Firefox不支持innerText,但是支持该属性)。

非要在html代码中写入空白,请使用html的空格表示方法

说道这里,我想有些人对内联元素理解有偏差。所谓内联是和所谓的“块”对立的。内联元素不成块的,感觉就像水流一样,遇到阻碍就环绕而行。比如源码

div1 ddd dd d div2 d dd d

显示效果

span里面的内容被分成了两段,不是一个完整的块了。

2.body标签默认的margin边框

这个没有什么说的,现代浏览器(支持CSS3)和IE8的body都默认了一个css样式margin:8px。其他有的标签也是有这样的,这里不举例了。很多时候我们都不需要,需要一般的项目样式开头都有一个类似的设置。

html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{ margin: 0; padding:0; }

3.特殊空白字符导致显示异常

举个例子,下面的源码中看似没有问题

html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{ margin: 0; padding:0; } *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #myDIV { width: 200px; height: 40px; background-color: #ff0; } #myDIV a{ float: left; width: 200px; background-color: #f00; } test0

实际上a标签前面的有一个非正常的的空白字符,显示效果如下

a的宽度和#myDIV的宽度应该是相同的,且a是浮动,显示效果却换行了,这也太让人抓狂了,有么有。

正常的显示效果是

我们来看一下这个非正常的空白是啥。

第一个是非正常的空格,其URI组件编码为"%E3%80%80"

第二个是正常的空格,其URI组件编码为"%20"

第三个是正常的Tab建,其URI组件编码为"%20%20%20%20",实际上就是4个空格。

看出来了吧。所以有的时候再网站中拷贝的代码运行效果异常可能就是这个原因导致的。

未完待续,后期如果想到其他的点补上。也希望童鞋们提一些相关的点,本人一定补上。

如果觉得本文不错,请点击右下方【推荐】!

Top