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属性不仅能够创建圆角,还可以 ...
随机推荐
- 6-12 varchar和char 枚举类型enum 集合set
1 字符类型char和varchar #官网:https://dev.mysql.com/doc/refman/5.7/en/char.html #注意:char和varchar括号内的参 ...
- eclipse下classes文件夹无法发布到tomcat的问题--tomcat发布慢的问题
=== 解决eclipse下classes文件夹无法发布到tomcat的问题_Nautilus_新浪博客http://blog.sina.com.cn/s/blog_484d8777010130n5. ...
- C语言之路-3-循环
1.while循环计算数字位数 #include<stdio.h> int main() { ; int x; printf("请输入数字:"); scanf(&quo ...
- how2heap学习笔记
github源代码地址 这里只分析glibc2.25堆分配的特性,为了方便调试编译时使用 gcc -g -no-pie <input_file_name> -o <output_fi ...
- OpenCV3编程入门-读书笔记2-core组件
一.颜色空间缩减 1.概念 如果图像是3通道,深度为1个字节,则每个像素有256*256*256种可能值,这么多的可能值会对算法性能造成严重影响.利用颜色空间缩减就能解决这个问题,例如将颜色值0~9取 ...
- GIt -- Window下配置 git
全局配置 git config --global user.name "账户名" git config --global use r.email '账户邮箱' 生成ssh,命令 ...
- Python 爬虫 58同城
目标站点需求分析 获取各类产品的名字,地区,时间,价格 涉及的库 BeautifulSoup,requests,time,pymongo 获取各大类产品的链接 获取单页源码 解析单页源码 保存到文件中 ...
- 初学python之路-day02
python,诞生于1989年的圣诞,Guido van Rossum为了打发无聊,因此发明了python,并且开放了其源代码,使得这门语言在随后的几十年的发展的越来越广.现今,2.x版本已经在2.7 ...
- java 类加载机制 阿里面试题
/** * 加载方法不等于执行方法,初始化变量则会赋值 * 类加载顺序应为 加载静态方法-初始化静态变量-执行静态代码块 * 实例化时 先加载非静态方法-实例化非静态变量-执行构造代码块-执行构造函数 ...
- 文本框监听事件blur()的简单使用
场景描述:在做编辑功能的时候,经常要判断编码,或者密码之类的是否已经被使用,以前自己做的时候,经常都是在提交了之后才判断的,到现在,才发现,这样做的用户体验不好,完美一点的做法就是当此文本框失去焦点的 ...