CSS3属性上调
一.为什么使用CSS
1.有效的传递页面信息
2.使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户
3.可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容
4.具有良好的用户体验
二.字体样式属性
1.font-family:英文字体,中文字体 (类型)
font-family: Times,"Times New Roman", "楷体";
2.font-size:值单位 (大小)
单位
px(像素)
em、rem、cm、mm、pt、pc
3.font-style:normal(正常)、italic(斜体)和oblique(倾斜) (风格)
p span{
font-weight: 700;
}
4.font-weight: 700 (字体粗细)
normal 默认值,定义标准的字体
bold 粗体字体
bolder 更粗的字体
lighter 更细的字体
100、200、300、400、500、600、700、800、900 定义由细到粗的字体
400等同于normal,700等同于bold
5.font:字体风格→字体粗细→字体大小→字体类型
font:oblique bold 12px "楷体";
三.文本样式
1.color
rgb(0,0,0) 取值在0~255之间
rgba(0,0,0,0) 最后一位代表透明度,取值在0~1之间
2.文本水平对齐方式text-align
left 把文本排列到左边。默认值:由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
3.首行缩进
text-indent:20px;
4.行高
line-height:30px;
5.文本装饰
text-decoration
none 默认值,定义的标准文本
underline 设置文本的下划线
overline 设置文本的上划线
line-through 设置文本的删除线
6.文本垂直对齐
vertical-align
top:上对齐
bottom:下对齐
middle:中间对齐
7.文本阴影
text-shadow:颜色 x轴移动位置 y轴移动位置 模糊半径(0代表没有)
四.超链接伪类
a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited {color:#333;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}
五.列表样式
list-style-image: url(image/arrow-icon.gif); 列表项前图像
list-style-type 指定列表项前图标
none 无标记符号 list-style-type:none;
disc 实心圆,默认类型 list-style-type:disc;
circle 空心圆 list-style-type:circle;
square 实心正方形 list-style-type:square;
decimal 数字 list-style-type:decimal
六.背景颜色和图像
颜色:background-color
图像:background-repeat:url(路径)
repeat:沿水平和垂直两个方向平铺
no-repeat:不平铺,即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
七.渐变
-浏览器内核-linear-gradient(方向,开始颜色,结束颜色)
background:linear-gradient(to left,red,blue);
background:-webkit-linear-gradient(to left,red,blue);
CSS3属性上调的更多相关文章
- 如何处理CSS3属性前缀
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- CSS3属性 box-shadow 向框添加一个或多个阴影
CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- 让IE6/IE7/IE8浏览器支持CSS3属性
让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
- 实用的CSS3属性和使用技巧
CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...
- H5、CSS3属性的支持性以及flex
一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...
- 移动端 几个css3属性的练习
转行做前端,上班有一个星期了,什么都不懂,今天学习了几个新的css3属性,记录下来. 注:所有的测试均是在chrome上手机模式测试,与真实的手机环境可能有误差 1:-webkit-tap-heigh ...
- 【原】常见CSS3属性对ios&android&winphone的支持
2个月前,我在博文<webapp开发中兼容Android4.0以下版本的css hack>中写过“那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了” ,在 ...
- CSS3属性border-radius绘制多种多样的图形
border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...
随机推荐
- 消息队列MQ对比
1.ActiveMQ 是Apache下的一个子项目. 类似于ZeroMQ,它能够以代理人和点对点的技术实现队列.同时类似于RabbitMQ,它少量代码就可以高效地实现高级应用场景.RabbitMQ.Z ...
- MVC5 Entity Framework学习
MVC5 Entity Framework学习(1):创建Entity Framework数据模型 MVC5 Entity Framework学习(2):实现基本的CRUD功能 MVC5 Entity ...
- js中精度问题以及解决方案
js中的数字按照IEEE 754的标准,使用64位双精度浮点型来表示.其中符号位S,指数位E,尾数位M分别占了1,11,52位,并且在ES5规范中指出了指数位E的取值范围是[-1074, 971]. ...
- webstorm允许移动端访问本地html页面的方法
- OpenCV3编程入门-读书笔记2-core组件
一.颜色空间缩减 1.概念 如果图像是3通道,深度为1个字节,则每个像素有256*256*256种可能值,这么多的可能值会对算法性能造成严重影响.利用颜色空间缩减就能解决这个问题,例如将颜色值0~9取 ...
- 【原创】大叔问题定位分享(21)spark执行insert overwrite非常慢,比hive还要慢
最近把一些sql执行从hive改到spark,发现执行更慢,sql主要是一些insert overwrite操作,从执行计划看到,用到InsertIntoHiveTable spark-sql> ...
- pyhton图片合成模块-PIL
文章链接:https://www.cnblogs.com/lilinwei340/p/6474170.html python PIL实现图片合成 在项目中需要将两张图片合在一起.遇到两种情况,一种 ...
- open live write 代码高亮插件的配置和使用
第一步:下载open live writer插件,下载地址:http://www.cnblogs.com/memento/p/5995173.html 第二步:找到open live writer的安 ...
- KNN与K-Means的区别
KNN(K-Nearest Neighbor)介绍 Wikipedia上的 KNN词条 中有一个比较经典的图如下: KNN的算法过程是是这样的: 从上图中我们可以看到,图中的数据集是良好的数据,即都打 ...
- Java_Scanner和System类
目录 Scanner类(util包) System类(lang包) Scanner类(util包) Scanner类是一个不可变的类,实现了迭代器接口.一个简单的文本扫描器,可以使用正则表达式解析原始 ...