封装php类批量解析css成json格式_html/css_WEB-ITnose
封装php类批量解析css成json格式
业务需求
我相信很多同学有过做一个自定义建站系统的想法,好比某空间的自定义拖拽组件,如果想要实现一个可视化建站系统,那CSS作为前端样式而言,是必须要存入到数据库中作为配置项的,所以,这里不可避免的需要对css做解析,我这里给出我的解析方法,当然还有很大的优化空间,这只是一个初版,实现了最原始的解析过程,希望大家拍砖。
实现方法
/**
Release:b.15.05.21.01
*/
class CsstoJson{
/**
* CSS批量导入功能
* @function ImportCss
* @param $data{xxx:XXX; yyy:YYY;}
* @Description 按照一定规则导入CSS样式结构入库
* @return boolean
*/
public function ImportCss($post){
$data = str_replace("}","}&",$post); # 将}替换成}&
$data =explode('&',$data); # &用于切割每个css样式表到数组
array_pop($data); # 去掉最后一个数组元素
$JsonData =self:: arrayToCss($data);
$length =1-count($JsonData);
$JsonData = substr($JsonData,$length,-1); # 截取字符串最后
$JsonData = "{".$JsonData."}";
$JsonData = json_decode($JsonData,true); # 转换成json数组
return $JsonData;
}
/**
* CSS数据样式化函数
* @function array_to_css
* @param $ArrayData 为格式话的css样式数据
*/
public function arrayToCss($ArrayData){
$GetData=null;
//遍历传送过来的数组
foreach($ArrayData as $key => $arraydatas ){
$arraydatas = str_replace("{","&{",$arraydatas); # 替换传送过来数据中的 { ,便于之后做字符串转换
$arraydatas = explode('&',$arraydatas);
$jsondata = self::strToJson($arraydatas);
$GetData =$GetData.$jsondata.",";
}
return $GetData;
}
/** * 解析数组里面的字符串操作 * @function strToJson * $Strdata 二维数组,里面含有 */ public function strToJson($Strdata){ //替换CSS数据名称 $Strdata['0'] = str_replace(".","",$Strdata['0']); $Strdata['1'] = str_replace("{","",$Strdata['1']); $Strdata['1'] = str_replace("}","",$Strdata['1']); $temp = null; $StrdataChild = explode(';',$Strdata['1']); array_pop($StrdataChild); foreach($StrdataChild as $key => $StrdataChilds){ $StrdataChilds = explode(':',$StrdataChilds); # 分解每个类名下面的属性与具体数值的键值对 $ProName = trim($StrdataChilds['0']); # 去掉表单字段的空格,不然入库无法识别 $jsondata = "\"".$ProName."\"".':'."\"".$StrdataChilds['1']."\","; # 把类似height:10px这样的键值对分开成想要的数据结构 $temp = $temp.$jsondata; # 操作css的height等具体字段配置关系 } $ClassName = trim($Strdata['0']); # 去掉表单字段的空格,不然入库无法识别 #获取当前字符串的长度 $length =1-count($temp); #截取字符串最后 $temp = substr($temp,$length,-1); #把当前所属分类名称加入到子集中 $temp = "\""."classname"."\"".":"."\"".$ClassName."\"".",".$temp; return "\"".$Strdata['0']."\"".":"."{".$temp."}"; }
}
$cssdata = ".wrapper .box{border:1px #e1e1e1 solid;}.wrapper .box .title{height:31px;border-bottom:1px #e1e1e1 solid;line-height:30px;}";$toJson = new CsstoJson();$reData = $toJson->ImportCss($cssdata);var_dump($reData);
思路分析
总结
如果您有任何意见或建议,请联系作者

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。
