【css tips —— 在css中完成国际化】的更多相关文章

css tips —— 在css中完成国际化

前提 在日常处理国际化的时候,通常是将key通过类似intl.xx(key)转换为对应环境的文案,可是如果需要在css中加入对应逻辑应该怎么做呢(比如在after的伪元素中显示不同的文案),毕竟在css中没办法通过js代码将key转换为文案. 思路 1. 既然不能在css中写入翻译过程,那么就把翻译结果写入dom节点中,可以用data属性存放已经翻译好的文案,<div class='suf' data-suffix="翻译的结果"></div> 2. 在css中…

网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIV CSS命名规则CSS命名大全内容如下：

页头:header  如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法登录条:loginBar         标志:logo                侧栏:sideBar广告:banner              导航:nav                 子导航:subNav菜单:menu               子菜单:subMenu      搜索:search滚动:scroll               页…

Atitit.css 规范 bem  项目中 CSS 的组织和管理

Atitit.css 规范 bem  项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 1.4. 修饰符(modifier)的3 2. 块的独立性4 3. 独立的CSS4 3.1. 为独立的CSS类命名5 4. BEM争议最大的就是它的命名风格 6 5. OOCSS6 6. ACSS6 7. CSS 组织和管理 结论attilax总结7 8. Atibem7 8.1. Modifier…

css鼠标手型cursor中hand与pointer

css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/> Example:CSS鼠标手型效果 <a href="#" style="cursor:pointer">CSS鼠标手型效果</a><br/> 注:pointer也是…

转：浅谈CSS在前端优化中一些值得注意的关键点

前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加载时间,但其实性能不仅仅是指加载时间,还包括浏览器性能.网络性能.开发效率.在Web前端开发中,性能是一个非常重要的需要考虑的点.本文将介绍一些开发原则和性能准则,这些都是提高Web前端性能的基础. 1. 开发原则 1.1 编写符合当代浏览器性能的代码如果想提高前端性能,就必须理解浏览器的工作原理,…

css在各浏览器中的兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容…

通过CSS让html网页中的内容不可选

*{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; } 通过CSS让html网页中的内容不可选…

CSS modules 与 React中实践

最近一直在学习React,看上去蛮简单的内容,其实学习曲线还是比较高的. 目前学到css绑定的问题,看到有一篇好的文章,就转过来了. CSS 模块化的解决方案有很多,但主要有两类.一类是彻底抛弃 CSS,使用 JS 或 JSON 来写样式.Radium, jsxstyle ,react-style 属于这一类.优点是能给 CSS 提供 JS 同样强大的模块化能力:缺点是不能利用成熟的 CSS 预处理器(或后处理器) Sass/Less/PostCSS, :hover 和 :active 伪类处理…

Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules

原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲解的. 这个基本就是目前国内最好的 Webpack 2.0 最好的学习视频了,希望可以对新手或者复习相关知识的朋友有用. 原文发表于我的技术博客 Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进…

css层叠性冲突中的优先级

一.首先从CSS级别来进行优先级划分: CSS控制页面样式的四种方法: 1.行内样式 通过style特性 <p style=”color:#F00; background:#CCC; font-size:12px;”></p> 2.内嵌方式 将CSS代码写在head和/head之间,并用style进行声明 <style type=”text/css”><!–#div1{width:64px; height:64px; float:left;}#div1 img{w…

vue中的css作用域、vue中的scoped坑点

一.css作用域 之前一直很困扰css的作用域问题,即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.导致在css中需要加上对应模块的html的id/class 使用css选择器 保证css的作用域不会变成全局 而被其它模块的css污染. 在vue中引入了scoped这个概念,scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式,使用了data-v-hash的方式来使css有了它对应模块的标识,这样写css的时候不需要加太多额外的选择器,方便…

HTML中css和js链接中的版本号

背景 在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候, 浏览器就可以从浏览器的缓存中获取css.js等,而不必从你的服务器读取,这样在一定程度上加快了网站的打开速度,又可以节约一下你的服务器流量. 问题 现在问题来了,.htaccess设置的css.js缓存都有一个过期时间,如果在访客的浏览器中已经缓存了css.js,在这些css.js缓存 未过期之前,浏览器…

Css文字在div中自动换行

Css文字在div中自动换行 word-break:break-all; 文字在div中字段换行…

使用html及CSS实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部：

使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部: <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <title>li9.club</title><style type="text/css"> a.popup{ display: inline-block; w…

Day 30：HTML和CSS在Java项目中常用语法

framSet例子,其中的页面链接地址视情况而定,应为我还不知怎么弄当前文件下呢,例子主要在说明该标签如何使用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q…

CSS技巧----DIV+CSS规范命名大全集合

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS命名目录 命名规则说明 重要CSS命名 CSS命名参考表 命名技巧 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明:   -   TOP 1).所有的命名最好都小写2).属性的值…

引人瞩目的 CSS 变量（CSS Variable）

这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变量. 一直以来我们都知道,CSS 中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器. 但是新的草案发布之后,直接在 CSS 中定义和使用变量已经不再是幻想了,像下面这样,看个简单的例子: // 声明一个变量: :root{ --bgColor:#000; }…

CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）

本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原则(priority rules)”! 首先,我们来一个简单的例子: <body> <ul id="summer-drinks"> <li class="favorite">First section</li> <l…

CSS选择器、CSS hack及CSS执行效率

主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与匹配原理     CSS选择器大概可以分为:1.id选择器(#myid)  2.类选择器(.myclassname)  3.标签选择器(div,h1,p)  4.相邻选择(h1+p)6.后代选择器(li a)7.通配符选择器(*)  8.属性选择器(a[rel='externaml']) 9.伪类选…

CSS：使用CSS媒体查询创建响应式布局

现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同屏幕大小.不同分辨率.不同设备导致的不同场景下的Css样式的选择.今天我就对媒体查询这一工具或者说方法来进行一个总结. 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持. 1.如何使用媒体查询: <link rel="stylesheet" type=&quo…

CSS选择器优先级 CSS权值

计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 1,0,0,0 使用的规则也很简单,就是 选择器的权值加到一起,大的优先:如果权值相同,后定义的优先 .虽然很简单,但如果书写的时候没有注意,很容易就会导致CSS的重复定义,代码冗余. 从上面我们可以得出两个关键的因素: 权值的大小跟选择器的类型和数量有关 样式的优先级跟样式的定义顺序有关 总结:…

关于CSS的优先级,CSS优先级计算

原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权重计算法 CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数! 根据这四个级别出现的次数计算得到CSS的优先级. CSS优先级的计算规则如下:* 元素标签中定义的样式(Style属性),加1,0,0,0* 每个ID选择符(如 #id),加0,1,0,0* 每…

Normalize.css 与 reset.css

Normalize.css 与 reset.css都是初始化页面样式 不同点在于 reset.css更加粗暴,直接把所有的样式全部初始化了: Normalize.css还剩点良心,还保留了一些浏览器默认样式,并且对不同浏览器之间还有兼容代码. 这个两个页面初始化css我觉得都可以用,但是用地方还需要考究下. 比如reset我更倾向于在H5的页面中使用,因为我完全不必为标签的样式不同烦恼. normalize应该是比较适合应用开发或者m站点开发,说一个比较现实的例子,比如站点中的新闻页面,这个页面…

一、HTML和CSS基础--HTML+CSS基础课程--第4部分

第七章 CSS的继承.层叠和特殊性 继承:CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 特殊性
权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低. 层叠
:我们来思考一个问题:如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办…

一、HTML和CSS基础--HTML+CSS基础课程--第2部分

第三章 与浏览器交互,表单标签 使用表单标签,与用户交互
网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据. 语法: <form method="传送方式" action="服务器文件">
讲解:
1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束.
2.action :…

【CSS】使用CSS改变超链接样式

超链接代码 <ahrefahref="http://www.divCSS5.com/"target="_blank" title="关于divCSS的网站">DIV+CSS</a> 解析如下: href后跟被链接地址目标网站地址这里是http://www.divCSS5.com/ target _blank--在新窗口中打开链接 _parent--在父窗体中打开链接 _self--在当前窗体打开链接,此为默认值 _top-…

CSS定位（CSS定位概述、相对定位、绝对定位、浮动）

CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移. right 定义了定位元素右外边距边界与其包含块右边界之间的偏移. bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移. left 定义了定位元素左外边距边界与其包含块左边界之间的偏移. overflow 设置当元素的内容溢出其区域时发生的事情. clip 设置元素的…

CSS找到 (div+css请讲)

CSS 定位和浮动 CSS 定位和浮动提供了一些特性,使用这些属性,你可以建立栏布局,的重叠布局的一部分,并有一些.也可多年来完成通常需要使用的多个表格能力完成的任务. 定位的基本思路是非常easy.对于其正常位置应该出现的位置,或者相对于父元素.还有一个元素甚至浏览器窗体本身的位置.显然.这个功能非常强大,也非常让人惊讶.要知道,用户代理对 CSS2 中定位的支持远胜于对其他方面的支持,对此不应感到奇怪. 一切皆为框 div.h1 或 p 元素经常被称为块级元素.这意味着这些元素显示为一块内容…

HTML+CSS样式设置——CSS一学就会

HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联合使用的过程: (1)新建CSS文件(一般放在与HTML文件同一路径下的css目录中). (2)在HTML的<head>标签中,用<link />对CSS进行引用 <link rel="stylesheet" type="text/css"…

[css 揭秘]：CSS揭秘 技巧（三）：背景定位

我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜定位.个人觉得,背景定位应用还是很广的,在实践中经常遇到.在实践中才会发现它的美,真是强大. background-position的扩展语法方案 在css背景与边框中,background-position属性已经得到了扩展,它允许我们指定背景图片距离任意角的偏移量,只要我们在偏移量前面指定关键字…