html5--6-59 其他常用CSS属性
html5--6-59 其他常用CSS属性
实例
学习要点
- 了解opacity属性:透明度设定
- 了解cursor属性:自定义鼠标样式
- 了解CSS新单位rem和em的区别
- 了解轮廓outline的设置
- 掌握display 属性常用属性值:
opacity:透明度设定
IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。
E8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小,越透明。对于滤镜本套课程不作讲解。
opacity与通过rgba()设定透明度的区别:前者同时作用于元素的标签内容,后者只是作用于元素本身
鼠标的样式 cursor:
我们可以通过cursor属性改变浏览器默认的鼠标样式,可改变的样式很多,这里仅仅列出几种相对常用的
- hand是手型
- pointer也是手型,推荐使用这种。
- crosshair是十字型
- text是移动到文本上的那种效果
- wait是等待的那种效果
- default是默认效果
- e-resize是向右的箭头
- ne-resize是向右上的箭头
- n-resize是向上的箭头
- nw-resize是向左上的箭头
- w-resize是向左的箭
- sw-resize是左下的箭头
- s-resize是向下的箭头
- se-resize是向右下的箭头
- auto是由系统自动给出效果
rem:根元素字体的大小
浏览器默认字体大小为16px
em是以父元素字体为基准的
rem是以根元素字体大小为基准的
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>rem和em的区别</title> 6 <style type="text/css"> 7 p{ 8 font-size: 0.75em; 9 } 10 .span1{11 font-size: 2em; 12 } 13 .span2{14 font-size: 2rem; 15 } 16 </style> 17 </head> 18 <body> 19 我是浏览器默认html字体大小为16px; 20 <p> 21 我是p标签字体,段落文字大小为0.75em即:12px(16*0.75);<br> 22 <span class="span1"> 23 我大小是2em,即24px,这里是相对父级字号(12px)*2的,而不是相对body里面的16px 24 </span><br> 25 <span class="span2"> 26 我大小是2rem,即32px,这里是相对根元素字号(16px)*2的,而不是相对p里面的12px 27 </span> 28 </p> 29 </body> 30 </html>
轮廓(outline)
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
- outline 在一个声明中设置所有的轮廓属性。
- outline-color 设置轮廓的颜色。
- outline-style 设置轮廓的样式。
- outline-width 设置轮廓的宽度。
- outline-offset 设置轮廓到边框的距离。 注:css新增属性,不可以写到符合属性里。
display 属性常用属性值:
display的属性值很多,有些目前支持度不好,有些会放到以后课程或综合实例中讲解,这里介绍几种常用的情况。
- none 此元素不会被显示。
- block 此元素将显示为块级元素。特征:换行,可设置宽高尺寸。
- inline 行内元素,默认。特征:大小自适应;不换行。
- inline-block 行内块元素。特征:可以设置大小,但是不可以换行。
- 其他:list-item/table/inline-table/table-cell/table-caption......
html5--6-59 其他常用CSS属性相关推荐
- 常用css属性集(持续更新…)
禁止换行,超出部分显示-: a. 代码: .hide_word{ max-width: 100px; white-space:nowrap; overflow:hidden; text-overflo ...
- 【重识 HTML + CSS】基本 CSS 属性
[重识 HTML + CSS] CSS 简介 内联样式.文档样式表.外部样式表 @charset.@import 注释 HTML 和 CSS 的编写准则 设置网页的图标 常用 CSS 属性 初识 CS ...
- html5属性单词,常用的CSS属性的英文单词总结及用法、解释
在div css制作中常用的CSS属性的英文单词介绍.解释与css样式用法总结.这些单词无需一定要记住会拼写,但是要求看见他们就能认识他们并知道他们的属性及用法,这里有个记住他们属性的技巧就是多制作和 ...
- CSS常用样式属性有哪些?代码怎么写?
CSS常用样式属性有哪些?CSS样式属性有两种分别是局常用样式属性和文本常用样式属性,CSS的作用是美化HTML网页和控制页面布局,我们需要掌握这两种常用的样式属性来美化页面.一套教程,带你轻松掌握H ...
- 第60天:js常用访问CSS属性的方法
一. js 常用访问CSS 属性的方法 我们访问得到css 属性,比较常用的有两种: 1. 利用点语法 box.style.width box.style.top 点语法可以得到 ...
- Css的filter常用滤波器属性及语句大全
Css的filter常用滤波器属性及语句大全 语法:STYLE="filter:filtername(fparameter1, fparameter2...)" (Filterna ...
- 常用的CSS属性的英文单词总结及用法、解释
1.(盒子)布局排版类 - TOP float - 浮动:设置块元素的浮动效果.可选常用到参数left.right : width - 宽:确定盒子本身的宽度,可以使盒子的宽度不依靠它所包含的内容多少 ...
- [css] box-sizing常用的属性有哪些?分别有什么作用?
[css] box-sizing常用的属性有哪些?分别有什么作用? box-sizing常用的属性有 content-box 和 border-box.content-box 盒子的宽度不包含 bor ...
- html中form标签的作用style,HTML5中meta常用标签属性说明
HTML5中meta常用标签属性说明 IE 兼容模式,Bootstrap 不支持 IE 古老的兼容模式.为了让 IE 浏览器运行最新的渲染模式下,建议将此 标签加入到你的页面中: content属性 ...
最新文章
- 全了!从Python入门到精通
- 使用Eclipse与Pydev开发Python
- 两边双虚线是什么意思_单黄线和双黄线有什么不同?很多人都记不对,被扣分都不知道...
- Comperhend the OP-sizeof deeply!
- java本地连接zk集群
- Mysql存储函数实现增删改查_使用存储过程操作数据库(实现增删改查)
- Linux文件属性3——文件权限管理
- int转unsigned int_谢劲课题组在基于锰催化的转金属化基元反应取得系列进展
- a6gpp php,内行人才知道的古董级玛莎拉蒂A6G 2000
- java debug try catch 打印发生错误的代码的详细信息 代码行数
- python web环境傻瓜搭建_工具赋能Python环境搭建
- 白群晖图文版阿里云域名解析IPV6远程访问方法
- linux - ab测试工具
- java 图片 文字居中_完美实现文字图片水平垂直居中
- ​模拟人生3 Mac版自由性超高的模拟游戏
- 大学计算机基础案例教程章测试答案,大学计算机基础案例教程--Win7+Office2010(高等院校公共基础课规划教材)...
- 基于TQ2440的SPI驱动学习(OLED)
- mysql long varchar2_long类型字段转换成varchar2类型
- linux 批量删除任务,Linux-Shell脚本学习心得之批量创建、删除用户
- 老虎的屁股摸不得,宝宝的屁屁一样碰不得!
热门文章
- 理解模板引擎Razor 的原理
- 二叉树相关性质以及数学证明
- 关于vs中代码生成的运行库
- Infinispan 10.0.0.Beta2 和 9.4.8 发布,分布式集群缓存系统
- redux 和 react-redux 部分源码阅读
- SpringCloud 微服务 (十) 消息队列MQ 基础
- aaaaaaa……aaa(n个)%p的值 (矩阵快速幂)
- java中finally与return的测试方法
- MySQL EXPLAIN Extra列的信息
- 虚拟化系列-Windows server 2012 Remote桌面与应用