标签: inline-styles

我有一个案例,我必须编写内联CSS代码,我想在锚点上应用悬停样式.

如何a:hover在HTML样式属性中使用内联CSS？

例如,您无法在HTML电子邮件中可靠地使用CSS类.

我知道你可以在React类中指定样式,如下所示:

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

我是否应该以这种方式做所有样式,并且我的CSS文件中没有指定任何样式？

或者我应该完全避免使用内联样式？

做两件事似乎很奇怪和混乱 - 在调整样式时需要检查两个地方.

当我看到网站入门代码和示例时,CSS总是在一个单独的文件中,名称类似于"main.css","default.css"或"Site.css".但是,当我编写一个页面时,我经常试图将CSS与DOM元素内联,例如在图像上设置"float:right".我觉得这是"糟糕的编码",因为在例子中很少这样做.

我知道如果样式将应用于多个对象,那么遵循"不要重复自己"(DRY)并将其分配给每个元素引用的CSS类是明智的.但是,如果我不在另一个元素上重复CSS,为什么不在编写HTML时内联CSS呢？

问题:使用内嵌CSS被认为是坏的,即使它只会用在那个元素上？如果是这样,为什么？

示例(这很糟糕吗？):

<img src="myimage.gif" style="float:right" />

我正在使用内联CSS(即style属性中的CSS )制作HTML电子邮件签名,我很好奇是否可以使用:before和:after伪元素.

如果是这样,我将如何用内联CSS实现这样的东西？

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }

是否可以使用内联样式的伪类？

例:

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

我知道上面的HTML不起作用但有类似的东西吗？

PS我知道我应该使用外部样式表,我这样做.如果可以使用内联样式完成,我只是很好奇.

是否有CSS选择器通过其内联样式属性值选择此元素？

<div style='display:block'>...</div>

就像是

div[cssAttribute=cssValue]

我的一个朋友说使用<div style=""></div>而不是压缩的css文件放在link hrefhead部分给了一些性能提升.真的吗？

在我的脑海里,我总是知道在任何项目中使用内联样式的类.但是,是否有任何文章/帖子/博客定义每个的利弊？我正在讨论这个问题,我似乎无法找到很久以前我读过的关于此的博文.

我需要检查一个元素是否有给定的css属性,但是我在使用jQuery.css()函数时遇到了一些麻烦.

我正在寻找的属性是宽度.

如果元素没有定义的宽度,我试试这个:

if(base.$element.css('width') !== 'undefined')

我得到了浏览器的计算宽度.

我想根据角度控制器中函数的返回值设置div的位置

以下在Fi​​reFox和chrome中工作正常但在Internet Explorer中{{position($index)}}%被解释为文字字符串值,因此无效

<div ng-repeat="item in items" style="left:{{position($index)}}%"></div>

以下是此问题的示例:

var app = angular.module('app', []);

app.controller('controller', function($scope) {

    $scope.items=[1,2,3,4,5,6,7,8,9,10];

    $scope.position=function(i){
        var percent =[5,10,15,20,25,30,35,40,45,50,55,60,65,70];
        return percent[i+1];
    }
});

这是一个小提琴演示

有没有人有关于如何纠正的建议？