比较陌生的css

网页字体缩放样式-webkit-text-size-adjust的用法详解

1、当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-size-adjust:none;}
2、-webkit-text-size-adjust放在body上会导致页面缩放失效
3、body会继承定义在html的样式
4、用-webkit-text-size-adjust不要定义成可继承的或全局的

css3属性-webkit-font-smoothing

CSS3里面加入了一个“-webkit-font-smoothing”属性。

这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。

加上之后就顿时感觉页面小清晰了。 淘宝也在用哦!

它有三个属性:

none                                     ------ 对低像素的文本比较好

subpixel-antialiased                ------默认值

antialiased                             ------抗锯齿很好

body{

-webkit-font-smoothing: antialiased; 

}

国外某网站例子

-moz-osx-font-smoothing: inherit | grayscale

这个属性也是更清晰的作用,特别是图标文字流行的今天。

CSS3 overflow-style 属性

设置溢出元素的首选滚动方法:

div
{
overflow:auto;
overflow-style:marquee,panner;
}

CSS3 appearance 属性

使 div 元素看上去像一个按钮:

div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}

cursor:not-allowed 的使用

鼠标样式 not-allowed,是一个红色的圈加一个斜杠,表示禁止的意思,似乎IE,chrome firefox 都能够正常显示,很好用

CSS里的pointer-events属性

现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript,它能够:

  • 阻止用户的点击动作产生任何效果
  • 阻止缺省鼠标指针的显示
  • 阻止CSS里的hoveractive状态的变化触发事件
  • 阻止JavaScript点击动作触发的事件
时间: 2024-10-21 09:42:04

比较陌生的css的相关文章

让CSS布局更加直观:box-sizing

如果你写过CSS或者你接触过CSS,相信你一定对盒子模型一点都不陌生.CSS其中一个让人比较困惑的地方就在于它的盒子模型中关于高度和宽度的计算,别说那些初学者了,就是写过很久CSS的人也一样会有如此的感觉.CSS中的高度和宽度总是不那么直观,让你总是很困惑,不能一眼就能分辨出其高度和宽度.有的时候你希望它的宽度是100px,但实际情况却总不是这样.然而,设置正确的box-sizing的属性,盒子的高度和宽度会的确就是你设置的100px.是否有点晕了呢,好了,下面我详细介绍下. 1.盒子模型 关于

[css]我要用css画幅画(四)

接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静. github:https://github.com/bee0060/Css-Paint , 完整代码在pages/sun-house-4.html和相关的css中可以找到 demo: http://bee0060.github.io/Css-Paint/pages/sun-house-4.html 完整html如下: 1 <!DOCTYPE html> 2 <html lang="

[css]我要用css画幅画

几年前开始就一直想用css画幅画. 今天才真正开始, 从简单的开始. 作为一个工作压力那么大的程序员,我首先要画一个太阳. html如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css Paint</title> 6 <link rel="stylesheet

[css]我要用css画幅画(五)

接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果. github:https://github.com/bee0060/Css-Paint , 完整代码在pages/sun-house-4.html和相关的css中可以找到 demo: http://bee0060.github.io/Css-Paint/pages/sun-house-5.html 完整html如下: 1 <!DOCTYPE html> 2 <html lang="

[css]我要用css画幅画(二)

接着之前的[css]我要用css画幅画(一) , 今天,我又画一个房子,很简单,屋顶.墙壁.门. 现在开始,做得效果都只兼容chrome,所以下面的css3的属性可能只有-webkit-前缀. 我只是为了兴趣画画, 何必理会兼容性呢,是吧? html如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title

轮播特效小项目总结

首先谈谈关于还原设计稿学到的一些东西,比如说网页设计稿和交互效果做好了,拿给我们在网页上实现,那如何实现呢,我就说说自己的鄙见吧. 第一,思考整个设计图的层次,比如说分别由哪些部分构成,针对这些"块",怎么设计div的结构,怎么把静态页面有条理的编写出来. 第二,思考如何实现设计图的交互效果,在逻辑上分析,比如用JS绑定哪些事件,采用什么样的函数实现怎么样的效果等等. 第三,代码的优化性考虑,怎么让代码简洁明了,方便维护. 以上就是我现在阶段对页面还原的一些看法,也许比较浅显,我也希望

CSS总结篇—熟悉而陌生的文档流

文档流 我相信,在大家刚学css的时候,一定对这个名词熟悉而又陌生.在查阅了相关资料后,总结了下对文档流的认识. 文档流定义:将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流 每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动.内联元素也不会独有一行. 一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素.有三种状况将使得元素离开文档流而存在,分别是浮动.绝对定位.固定定位.然则在IE中浮动元素也存在于文档流

sublime text3---Emmet:HTML/CSS代码快速编写神器

Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示:  Zen coding下的编码演示 一.快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签.比如输入"!"或"html:5",

27款经典的CSS框架

利用 CSS 框架,可以简化你的工作,提高工作效率.CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块.下面给你推荐了27款优秀的CSS框架,你可以选用. 1. 960gs 960 像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容.提供较为常用的尺寸来简化网页设计过程,使工作简单高效. 2. YUI 2: Grids CSS 芒果曾经介绍过由雅虎开发小组推出的 YUI,而这个 YUI Grids CSS