首先

先添加一个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. react-native 常见操作 及 git 补充

    一. react-native 常见操作 1.创建项目 react-native init Market(项目名称,首字母大写) 2.安装常用插件 npm install react-native-t ...

  2. 无法连接到服务器,用户xxx登陆失败"

    无法连接到服务器,用户xxx登陆失败" 该错误产生的原因是由于SQL Server使用了"仅 Windows"的身份验证方式, 因此用户无法使用SQL Server的登录 ...

  3. C/C++ 内存管理总结

    C内存管理 存储时: 执行程序在存储时(没有调入到内存)分为代码区(text).数据区(data)和未初始化数据区(bss)3个部分. 1 代码区(text segment) 存放CPU执行的机器指令 ...

  4. php优化(php.ini)

    PHP优化 ------------------------------------- 尽量选择php5.4及以上的版本,里面很多优化参数已经移除了相比以前版本   1.引擎解析优化和加速 1)eac ...

  5. Debian 升级到 PHP 7,并支持并行安装

    Debian 开发者 Ondřej Surý 前几天在一个邮件列表中宣布他们开始迁移到 PHP 7.x 了,并支持多版本并行安装co-installable.而此前几天,Ubuntu 也宣布其下一个版 ...

  6. C指针解析 ------ 指针的算术运算

    本文是自己学习所做笔记.欢迎转载.但请注明出处:http://blog.csdn.net/jesson20121020 指针是一个特殊的变量,表示一个地址,而地址能够上减去或加上一个整数,从而能够表示 ...

  7. simple_pool对象池——优化&lt;二&gt;

    本文章由cartzhang编写.转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/55051570 作者:car ...

  8. Caused by: com.mysql.jdbc.MysqlDataTruncation: Data truncation: Incorrect datetime value: '' for column 'createtime' at row 1...

    之前项目一直好好的,之后电脑重装系统,数据库重新安装了一个5.6版本的,项目jar包丢失了,之后就又重新找了一些jar包倒入,结果运行报错: Caused by: com.mysql.jdbc.Mys ...

  9. 【Mac + Pycharm】之实用东西以及配置东西

    一.新建.py文件时默认模板: 步骤:File => Preferences for New Projects => Editor => File and Code Template ...

  10. Laravel核心之IOC和Facade 架构分析1

    控制反转(Inversion of Control) 缩写为IoC 最常见的方式叫做依赖注入 简单说来,就是一个类把自己的的控制权交给另外一个对象,类间的依赖由这个对象去解决. Laravel 中的使 ...