首先

先添加一个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. Codeforces Round #254 (Div. 2) B (445B)DZY Loves Chemistry

    推理可得终于结果为2的(n-可分组合数)次方. 问题是怎么求出可分组合数,深搜就可以,当然并查集也能够. AC代码例如以下: 深搜代码!!! #include<iostream> #inc ...

  2. cisco 为每个单独的人员设置不同的用户名和密码

    cisco 为每个单独的人员设置不同的用户名和密码 2010-12-15 17:00:16 分类: 系统运维 Router1#configure terminalEnter configuration ...

  3. 基于Django进行简单的微信开发

    代码地址如下:http://www.demodashi.com/demo/11756.html 一.微信公众号的准备: 1. 注册 访问地址:https://mp.weixin.qq.com/ 按照提 ...

  4. ESXi安装iso镜像添加驱动(esxi6.5,6.7)

    准备工作:1.安装 Windows PowerShell 3.0 (需要启用Windows AutoUpdate服务,安装完毕计算机需要重启) https://www.microsoft.com/en ...

  5. window 效率神器:Wox

    官方网站 http://www.getwox.com/ 下载后以管理员身份运行,右下角可以看到Wox的图标.点击setting可以进入主界面 如果看不懂可以将语言设置为中文 默认快捷键是Alt + s ...

  6. 浅谈&quot;壳&quot;(一)

    壳,即坚硬的外皮,当壳的厚度与其曲面率半径的比值小于0.5时.称为"薄壳".反之称为"厚壳".由壳演化来的胸甲,盾牌. 在计算机这个注重创意又不失从文化科技中汲 ...

  7. JavaScript的toString()

    JavaScript toString() 方法 JavaScript Boolean 对象 定义和用法 toString() 方法可把一个逻辑值转换为字符串,并返回结果. 语法 booleanObj ...

  8. Vue+原生App混合开发手记#1

    项目的大致需求就是做一个App,里面集成各种功能供用户使用,其中涉及到很多Vue的使用方法,单独总结太麻烦,所以通过这几篇笔记来梳理一下.原型图如下: 路由配置 主界面会用到一些原生App方法,比如验 ...

  9. (三)spark算子 分为3大类

    ation算子通过sparkContext执行提交作业的runJob,触发rdd的DAG执行 (foreach) foreach(f) 会对rdd中的每个函数进行f操作,下面的f操作就是打印输出没有元 ...

  10. Python调用API接口的几种方式 数据库 脚本

    Python调用API接口的几种方式 2018-01-08 gaoeb97nd... 转自 one_day_day... 修改 微信分享: 相信做过自动化运维的同学都用过API接口来完成某些动作.AP ...