首先

先添加一个widgets,代码如下(提示:使用时注意修改命名空间)

<?php
/**
* User: yiqing
* Date: 2014/12/15
* Time: 0:21
*/ namespace year\widgets; use yii\widgets\Block; class CssBlock extends Block
{ /**
* @var null
*/
public $key = null;
/**
* @var array $options the HTML attributes for the style tag.
*/
public $options = []; /**
* Ends recording a block.
* This method stops output buffering and saves the rendering result as a named block in the view.
*/
public function run()
{
$block = ob_get_clean();
if ($this->renderInPlace) {
throw new \Exception("not implemented yet ! ");
// echo $block;
}
// $block = trim($block) ;
$block = static::unwrapStyleTag($block); $this->view->registerCss($block, $this->options, $this->key);
} /**
* @param $cssBlock
* @return string
*/
public static function unwrapStyleTag($cssBlock)
{
$block = trim($cssBlock);
/*
$jsBlockPattern = '|^<script[^>]*>(.+?)</script>$|is';
if(preg_match($jsBlockPattern,$block)){
$block = preg_replace ( $jsBlockPattern , '${1}' , $block );
}
*/
$cssBlockPattern = '|^<style[^>]*>(?P<block_content>.+?)</style>$|is';
if (preg_match($cssBlockPattern, $block, $matches)) {
$block = $matches['block_content'];
}
return $block;
}
}

使用

示例如下:

<?php \year\widgets\CssBlock::begin() ?>
<style type="text/css">
.fr {
float: right;
}
.mt10 {
margin-top: 10px;
} .mt15 {
margin-top: 15px;
}
</style>
<?php \year\widgets\CssBlock::end()?>

总结

为什么要这么写?

这样写的好处有两个,有代码提示和有代码高亮!!

来源地址:http://www.getyii.com/topic/10

Yii2 如何更好的在页面注入CSS的更多相关文章

  1. Yii2 如何更好的在页面注入JavaScript

    先添加一个widgets <?php /** * User: yiqing * Date: 14-9-15 * Time: 下午12:09 */ namespace common\widgets ...

  2. 页面定制CSS代码初探(一):页面变宽 文本自动换行 图片按比缩放

    初识博客 初写博客,先在设置里选了个喜欢的模板 第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现... 纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有.没有图片好难看啊,瞬间无爱 ...

  3. 我的页面定制CSS代码(SimpleGamboge皮肤)

    我的页面定制CSS代码,针对博客园SimpleGamboge皮肤. 调整: 1.左上图片更换为自己的头像 2.扩大左侧栏宽度,缩小右侧主栏宽度宽度 3.扩大内容页面的评论区宽度,工具图标靠左 4.去广 ...

  4. 动态为页面添加CSS样式文件引用

    动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...

  5. wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

  6. EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)

    在项目实际开发中,有将打开的各个链接页面隔离的需求(防止静态资源起冲突),这个时候常规思路就是使用iframe来实现!但遇到一个比较棘手的问题,当用easyui Tabs打开一个iframe页面时,怎 ...

  7. struts2的action的知识点和利用action向页面注入值的操作

    1.      Action的顺序,会先搜索指定名字下的包的action,如果找不到会去搜索默认路径下的包下的action. 2.      如果没有给action设置值,那么action会有一些默认 ...

  8. Stylus-NodeJS下构建更富表现力/动态/健壮的CSS

    --------------------------本文来自张鑫旭大神博客------------------------------ 一.为什么我会讲Stylus,而不是SASS和LESS? SAS ...

  9. 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

    04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...

随机推荐

  1. awk、sed、cut、grep

    二.sed [可以理解为 行在线编辑工具] 作用:sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命 ...

  2. HTML <!DOCTYPE> (转自w3school)

    定义和用法 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> 声明不是 HTML 标签:它是指示 we ...

  3. nginx根据目录反向代理到后端服务器

    nginx根据目录反向代理到后端不同的服务器 server {         listen 80;         server_name demo.domain.com;         #通过访 ...

  4. Spring事务管理之声明式事务管理:基于TransactionProxyFactoryBean的方式

    © 版权声明:本文为博主原创文章,转载请注明出处 案例 - 利用Spring的声明式事务(TransactionProxyFactoryBean)管理模拟转账过程 数据库准备 -- 创建表 CREAT ...

  5. 修改eclipse的repository路径

    (1)首先修改你的settings.xml文件,(如果没有settings.xml文件,可以下载maven的官网把maven的插件下载下来,在apache-maven-3.5.0\conf\ 目录下有 ...

  6. java -cp 命令 java jar 命令和 hadoop jar 命令

     -cp 和 -classpath 一样,是指定类运行所依赖其他类的路径,通常是类库,jar包之类,需要全路径到jar包,window上分号“;”  java -cp .;myClass.jar pa ...

  7. python tensorflow 安装

    我是先下载tensorflow-1.5.0rc1-cp36-cp36m-win32.whl,再执行命令行安装的 下载地址:https://pypi.python.org/pypi/tensorflow ...

  8. JS 创建对象(常见的几种方法)

    贴个代码先: function O(user,pwd){ //use constructor this.user=user; this.pwd=pwd; this.get=get; return th ...

  9. 【BZOJ4026】dC Loves Number Theory 分解质因数+主席树

    [BZOJ4026]dC Loves Number Theory Description  dC 在秒了BZOJ 上所有的数论题后,感觉萌萌哒,想出了这么一道水题,来拯救日益枯竭的水题资源.    给 ...

  10. 九度OJ 1334:占座位 (模拟)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:864 解决:202 题目描述: sun所在学校的教室座位每天都是可以预占的. 一个人可以去占多个座位,而且一定是要连续的座位,如果占不到他所 ...