@media screen and ( min-width: 319px){html{ font-size: 100px;}}@media screen and ( min-width: 359px){html{ font-size: 106px;}}@media screen and ( min-width: 383px){html{ font-size: 112px;}}@media screen and ( min-width: 399px){html{ font-size: 118px;…

一般会用normalize.css或者reset.css重置样式 移动端特殊css样式 去除ios 按钮按下的默认高亮效果 -webkit-tap-highlight-color : none; ios 触摸并按住触摸目标时候,禁止或显示系统默认菜单 -webkit-touch-callout: none; 文本不能被选择; 但是input textarea在ios不能被聚焦,属性要设置成text user-select: none; input{ user-select: text; } 去除…

body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, blockquote, h1, h2, h3, h4, h5, h6,p{ padding:0; margin:0 } h1, h2, h3, h4, h5, h6 { font-weight: normal; } table, td, tr, th { font-size:12px } li { list-style-type:none } img { border:none } o…

src\shared\helpers\LocalizedResourcesHelper.ts…

CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的: 保护有用的浏览器默认样式而不是完全去掉它们 一般化的样式:为大部分HTML元素提供 修复浏览器自身的bug并保证各浏览器的一致性 优化CSS可用性:用一些小技巧 解释代码:用注释和详细的文档来 Normalize.css支持包括手机浏览器在内的超多浏览器,同时对HTML5元素.排版.列表.嵌入的…

css  默认样式重置 @charset "utf-8"; *{margin:0;padding:0;} img {border:none; display:block;} em,i{ font-style:normal;} body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, font { paddi…

CSS样式兼容代码 1.禁止选中复制文本 *{ user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } 2.单行文本溢出显示省略号- p { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space:…

一.CSS概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用css. CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 二.css样…

bootstrap-全局css样式   1.bootstrap是一个前端框架 2.基本模板:viewport视口可以解决移动端设备网页自适应问题 3.版心(.container)  流式版心(.container-fluid)宽度100%(游览器的宽度) 4.栅格系统 (一行分成12分,每一列都可以在行中占据相应的分数,根据屏幕的大小,改变占据的分数)                  .col-xs 手机   .col-sm 平板  .col-md 电脑屏幕  .col-lg 超大屏幕  eg…

---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在style标签中. <style>       color: red;  设置文本颜色 font-size: 30px; 设置文本大小 设置背景颜色 background-color: blue; font-weight: bold; 设置文本粗体 font-style: italic; 设置文本斜体…

按钮 a,input,button都可以设置为按钮 a标签按钮   button标签按钮 <a class="btn btn-default" href="#" role="button">a标签按钮</a> <input type="button" class="btn btn-default" value="input的button标签按钮" />…

前端人员在学习开发过程中常用的CSS样式总结: [margin] margin 检索或设置对象四边的外延边距 margin-top 检索或设置对象顶边的外延边距 margin-right 检索或设置对象右边的外延边距 margin-bottom 检索或设置对象底边的外延边距 margin-left 检索或设置对象左边的外延边距 argin:检索或设置对象四边的外延边距. 如果提供全部四个参数值,将按上.右.下.左的顺序作用于四边. 如果只提供一个,将用于全部的四边. 如果提供两个,第一个用于上.…

本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e965283c632e9035875be43e6a305&scene=0#wechat_redirect 二维码: 一直觉得css是一个不被重视,或者说是重视不够的饭后甜点.因为它太“简单”,门槛低,不能彰显或提升广大闷骚程序猿的逼格...一直都想聊聊css相关的一些杂碎.正好借最近的一次项目实践来侃侃…

主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择器.伪类选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 接下来我们要讲一下为什么要使用CSS. HTML的缺陷…

移动端页面调试一般分两步.第一步我们需要把本地(pc端)写的页面效果展现在移动端,一个很方便的办法是用 fiddler 作为代理,具体可以参考 如何用 fiddler 代理调试本地手机页面,这样我们就能在自己的手机上看到真机效果,有时还可以用 alert 调试一些 js:当然,有时仅仅展现样式还不够,我们希望能像 chrome 面板或者 firebug 一样查看元素的 css 样式,甚至可以在控制台看到 js 的 console 输出,UC浏览器开发者版可以方便地做到这点,具体可以参考 如何使用…

css命名 传统网站页面(企业级),大概就是about,product,register等,他们的名字较好区分,他们的样式整体也不会很大,用简单的驼峰法就够了,或者简单的模块. 非传统企业页面,命名驼峰法不够用,项目一当大了,会有多个首页 就拿新浪的页面来说,它的体育块的所有页面,完全可以单独出一个项目,单独有一个单独的样式库. 根据这个原则,业主方电梯管家,小区贴吧,投票等等,如果单独做成一个css文件style,那么这个文件的样式无限庞大,你又为了避免css选择器的冲突,你又不得添加不同cs…

原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%90%88%E5%B9%B6%E4%B8%8E%E6%A8%A1%E5%9D%97%E5%8C%96/ 一.引言 本文的核心观点为CSS的合并与模块化,似乎与前一篇文章“CSS样式的再分离”有矛盾,其实不然,分离可以精简CSS代码,合并也可以精简CSS代码,一切都是权衡!或是说是在恰当的情况下使用恰当的手段. 正如前文所提到的,分离…

原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5%86%8D%E5%88%86%E7%A6%BB/ 一.关于CSS样式分离 zxx://一些名词表意含有自己的理解成分,或许与您的理解有偏差,希望不要拘泥于措辞.无论是CSS的分离还是js的分离,其主要作用之一就是精简与重用. CSS本身就代表着精简与重用.例如我们可以设置一个如下的样式: .exa…

可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范,并不希望大家完全采用,而是可以结合自己的团队需要,发展出一套适合自己的 CSS 代码规范. 也希望可以有更多的建议,共同的完善.本规范也可以在我的 Github 上看到,欢迎留言或者提 PR. 编码设置 采用 UTF-8 编码,在 CSS 代…

全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(style属性) >id选择样式(#获取) > 属性选择 ([title="da"]) > 标签选择 div p > 通配符* 2. 同一等级优先级具有叠加性.div p的优先级大于p.相同优先级,越晚设置的样式优先级越大 3. 绝大部分样式会从父元素继承到子元素上,继承…

CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; } </style> <div id="user"></div> (2)( class ) 类选择器 :  .        => 标签拥有 class="user" 属性 <style> .user { widt…

原文链接:https://zellwk.com/blog/how-to-write-mobile-first-css/ 构建响应式网站是如今前端开发者的必备技能,当我们谈到响应式网站时,“移动端优先”这个词立刻就会出现在脑海中. 我们知道从“移动端优先”这个角度开始设计很重要,但我们很少谈到使用“移动端优先”的方法来写代码. 今天,我想与你分享“移动端优先”添加样式的方法,为什么这种方法更好,以及如何发挥它的魔力. 贴士:如果你在学习使用Susy来建立响应式布局,这篇文章会对你帮助非常大. #什…

/* Track */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 5px; border-radius: 5px;} /* Handle */::-webkit-scrollbar-thumb { -webkit-border-radius:5px; border-radius: 6px; background: rgba(158, 79…

推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影响代码的阅读体验和工作进程,在更改样式时也会麻烦很多:看网上的大能前辈总结的CSS书写规范.CSS书写顺序供大家参考,我想对写CSS的前端用户来说是 值得学习的. 想了想我认为前端是一个整体,HTML的布局和CSS命名息息相关,body里包个外框-(wrapper)>各个布局模块(g)-{g-one…

本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器.伪类选择器 CSS样式优先级 前言 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的…

1.全局CSS样式 https://v3.bootcss.com/css/ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- 以最高的ie 浏览器 渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge">…

学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声明和嵌套 Ø        理解CSS的继承 Ø        熟练掌握CSS文本效果 Ø        掌握CSS图片效果 本章简介 上一章学习了CSS的语法基础及文字效果,学习了3种选择器,选择器是CSS中非常重要的概念,本章将深入学习选择器的知识,主要包括选择器的集体声明和嵌套.面向对象编程语…

好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirte. 功能简介: 1. 自动合并选定文件夹下所有png图片为一张大图并压缩(水平和垂直两个方向) 2. 智能生成css样式和测试文件(命名规则来,hover和click有惊喜哦) 点击Go会自动生成sprite.html(css样式)和sprite.png(合并后的图片),如果勾选了压缩还有有个sprite…

CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body>结束时再加载 Js脚本作为程序,要求按顺序执行,而且是由主线程(单个线程)去执行的, 如果很JS脚本放在头部,就会导致浏览器无法以多线程的方式加载和渲染页面 浏览会等待所有JS一个接一个执行完毕后才继续往下加载 其结果是网页打开速度变慢! 从现在开始,对于自己的作品,自己代码要达到产品级的要求 点击后执行一…

outline轮廓线在不同CSS样式下的表现 CSS 去除浏览器默认 轮廓外框 在默认情况下,点击 a 标签,input,或者添加click事件的时候,浏览器留下一个轮廓外框(chrome之下为蓝色)~ 然而这些默认的轮廓外框,有时候很影响美观,并不是我们想保留的. 我们应如何消除这些讨厌的 轮廓外框呢? 使用outline:none去除轮廓外框 如: a{ outline:none; } PC端轮廓外框消失了,然而发现在手机上依然存在~~ 这时候添加如下代码便可 a{ outline:none…