less定义一个通用的样式怎么定义_安全

2
3
4
5
6
7
8

//LESS源码
@color:#4D926F;
#header{
color:@color;
}
h2{
color:@color;
}
1
2
3
4
5
6
7

/编译后的CSS/
#header{
color:#4D926F;
}
h2{
color:#4D926F;
}
混合
混合是指在一个 CLASS 中引入另外一个已经定义好的的 CLASS，就像在当前 CLASS 中增加一个属性一样。Less实现了这种嵌套。我们还可以使用参数，就好像我们再用一个函数一样。
1
2
3
4
5
6
7
8
9
10
11
12

//LESS源码
rounded-corners(@radius:5px){
border-radius:@radius;
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
}
#header{
rounded-corners;
}

一般写在<head>和</head>之间，参考下面写法：

body {margin:0 auto; width:100%; font-size:12px; color:#666;}

c{border-collapse:collapse; margin:0 auto;}

</style>

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。总体来说，CSS具有以下特点：

（1）丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力;允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

（2）易于使用和修改

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

（3）多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

如果出现这种问题有可能说明你正在使用的浏览器是 IE678首先他们不支持 html5的新标签
换成firebox、chrome浏览器是没问题的。
或者百度去搜一下html5shivjs文件，然后注释引入ie8以下就能修改样式了。

涉及到ColumnHeader、RowHeader、Row、Cell 的各种样式设置。

ColumnHeaderStyle 属性

一般来讲列表头是用户首先注意的内容，那么如何在DataGrid 中设计一个美观的表头呢。我们既可以在<DataGrid>中通过<DataGridColumnHeaderStyle>来全局定义；也可以针对个别列在<DataGridColumns>中通过<DataGridColumnHeaderStyle>定义。

DataGrid x:Name="dataGrid" ItemsSource="{Binding}" AutoGenerateColumns="False"
SelectionUnit="CellOrRowHeader" IsReadOnly="True">
<DataGridColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Background">
<SetterValue>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Yellow" Offset="05"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</SetterValue>
</Setter>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="13" />
</Style>
</DataGridColumnHeaderStyle>

其效果如下图所示，Name、Age、Sex 列会按各自的样式显示。未定义样式的Pass Exam 和Email 列将按<DataGridColumnHeaderStyle>全局定义显示，并且当鼠标移置到这两列上方时会有"Sort by Column"提示信息。

一导入依赖

在app-module中添加RecycleView和SmartRefreshLayout的依赖

//recyclerview implementation 'comandroidsupport:recyclerview-v7:2610' implementation 'comandroidsupport:design:2610' //SmartRefreshLayout implementation 'comscwangsmartrefresh:SmartRefreshLayout:104-7' implementation 'comscwangsmartrefresh:SmartRefreshHeader:104-7'

二在mainActivity中添加xml布局

这是SmartRefreshLayout的基本布局，其中：

app:srlAccentColor="#00000000"//设置Header主题颜色 app:srlPrimaryColor="#00000000"//设置Footer主题颜色 app:srlEnablePreviewInEditMode="true"//开启和关闭预览功能

三MainActivity中初始化和刷新加载事件

private RecyclerView mRecyclerView; private RefreshLayout mRefreshLayout; //初始化 mRecyclerView=findViewById(Ridrv); mRefreshLayout = findViewById(RidrefreshLayout); //刷新 mRefreshLayoutsetOnRefreshListener(new OnRefreshListener() { @Override public void onRefresh(RefreshLayout refreshlayout) { mDataclear(); mNameAdapternotifyDataSetChanged(); refreshlayoutfinishRefresh(); } }); //加载更多 mRefreshLayoutsetOnLoadmoreListener(new OnLoadmoreListener() { @Override public void onLoadmore(RefreshLayout refreshlayout) { for(int i=0;i<30;i++){ mDataadd("小明"+i); } mNameAdapternotifyDataSetChanged(); refreshlayoutfinishLoadmore(); } });

四运行效果

SmartRefreshLayout运行的默认效果如下

1gif

五SmartRefreshLayout的其他的刷新样式

#######51经典样式ClassicsFooter
只需要在布局中添加对应的header和footer，则activity_mainxml代码如下：

运行效果如下图：

2gif

52一个绚丽的PhoenixHeader展示

修改后activity_mainxml代码如下：

运行效果图：

3gif

53header，footer各样式类所引入包路径如下

SmartRefreshLayout可以引入好几种Header和Footer样式，其中footer固定样式有三种，在refresh-layout包下：

imagepng

包路径分别为：

comscwangsmartrefreshlayoutfooterBallPulseFootercomscwangsmartrefreshlayoutfooterClassicsFootercomscwangsmartrefreshlayoutfooterFalsifyFooter

header样式则很多，在refresh-layout包下有：

imagepng

包路径分别为：

comscwangsmartrefreshlayoutheaderBezierRadarHeadercomscwangsmartrefreshlayoutheaderClassicsHeadercomscwangsmartrefreshlayoutheaderFalsifyHeader

在refresh-header包下有以下样式：

imagepng

他们的包路径是：

comscwangsmartrefreshheaderBezierCircleHeadercomscwangsmartrefreshheaderDeliveryHeader//以下类似,在此省略//

六自定义Header和Footer

当然SmartRefreshLayout还支持自定义Header和Footer
具体可以参考官网中的自定义Header

SmartRefreshLayout关于属性这一块也是有很多可以设置的，大家依然可以去SmartRefreshLayout官网查看更多使用细则，这里就不展开讲解了

今天就讲到这里了，谢谢大家。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/13401605.html

less定义一个通用的样式怎么定义

发表评论

评论列表（0条）