扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
link是未访问的时候,visited是已访问的时候,hover是鼠标移动到链接上时,active选定的时候
创新互联公司网站建设公司是一家服务多年做网站建设策划设计制作的公司,为广大用户提供了网站设计、做网站,成都网站设计,广告投放,成都做网站选创新互联公司,贴合企业需求,高性价比,满足客户不同层次的需求一站式服务欢迎致电。
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
同样使用less样式
需要特别注意的是,由于浏览器端使用时是使用ajax来拉取.less文件,因此直接在本机文件系统打开(即地址是file://开头)或者是有跨域的情况下会拉取不到.less文件,导致样式无法生效。
还有一种情况容易导致样式无法生效,就是部分服务器(以IIS居多)会对未知后缀的文件返回404,导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css(具体方法请搜索)。或者还有一种更简单的方法,即是直接将.less文件改名为.css文件即可。
1.Less
变量:@变量名
混合:在a类中使用b类的所有属性, .a{ .b(); color:#fff}
嵌套:使用嵌套代替原始css的层叠, 表示当前选择器的父级
运算:+ - * /,可以对任何数字、颜色或变量进行运算
转义:
函数:Less 内置了多种函数用于转换颜色、处理字符串、算术运算等
命名空间和访问符
作用域:首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承
注释: // 行注释,/.../块注释
导入:@import "library";可以导入一个 .less 文件,此文件中的所有变量就可以全部使用了, .less 扩展名,可以省略掉
2.css modules
CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。产生局部作用域的唯一方法,就是使用一个独一无二的class的名字,不会与其他选择器重名。 CSS Modules是通过哈希算法将类名编译,保证类名的唯一性。
声明全局规则:
灵活按需导入以便复用代码,避免样式全局污染,但不利于写组件单元测试
3.CSS bem规范
BEM - Block Element Modfier(块,元素,编辑器)
在选择器中用三种符号来表示扩展关系
-中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。
__ 双下划线:双下划线用来连接块和块的子元素
-- 双中划线:用来描述一个块或者块的子元素的一种状态
type-block__element--modifier
Block:不是指html中的块元素,任何独立的页面元素都可以视为一个块,这个独立的块容器有一个唯一的css类名,也就是这个块的名字
Element:属于块的某部分,任何的在Block中的DOM节点,都是一个element。在一个已知的block中,所有的element在语义上都是相等的,Block下的所有Element不考虑层级嵌套关系,扁平化处理都属于Block,即连续的__下划线只能出现一次
Modifier:用于修饰块或元素,体现在外观或行为上的改变,都可作为一个修饰器,如active状态,add/edit的操作
注意事项:
1)保证各个部分只有一级B__E--M,修饰器需要和对应的块或元素一起使用,避免单独使用。不能有 .block__el1__el2 的格式
2)仅以类名作为选择器,不使用ID或标签名来约束选择器
...import'./index.less'...divclassName="article"divclassName="article__body"pclassName="article__title"title/pbuttonclassName="article__button--primary"/buttonbuttonclassName="article__button--success"/button/div/div//index.less文件.article{max-width:1200px;__body{padding:20px;}__title{font-weight:700;}__button{padding:5px8px;--primary{background:blue;}--success{background:green;}}}
您好!很高兴为您答疑!
请提供完整代码,目前看,linkhref,link hrefscripttype中缺少空格,你加上空格试试。
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。
两种方式,分别为:1、手动生成;2、使用webstorm自动生成。
1、项目的文件结构
2、在less文件的根目录
Shift + 鼠标右键 + 选择‘在此处打开命令窗口’
3、输入命令:lessc + 空格 + less文件名
如:lessc main.less
4、继续输入命令:lessc + 空格 + less文件名 + 空格 + 大于号 + 空格 + css文件名
如:lessc main.less main.css
1、File + Settings
2、Tools + File Watchers
3、点击‘确定’即可
4、当你修改less文件时,css文件将自动生成。
在浏览器中使用less.js开发是很好的,但不推荐用于生产环境中。浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中,尤其是对性能要求比较高的场合,建议使用node或者其它第三方工具先编译成CSS再上线使用。
注意:
确保包涵.less样式表在less.js脚本之前
当你引入多个.less样式表时,它们都是独立编译的。所以,在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。
必须通过服务器环境访问页面,否则报错
浏览器选项:
你可以引入script
src="less.js"/script之前通过创建一个全局less对象的方式来指定参数!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流