一.为什么使用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属性上调的更多相关文章

  1. 如何处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  2. CSS3属性 box-shadow 向框添加一个或多个阴影

    CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...

  3. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  4. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  5. 实用的CSS3属性和使用技巧

    CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...

  6. H5、CSS3属性的支持性以及flex

    一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...

  7. 移动端 几个css3属性的练习

    转行做前端,上班有一个星期了,什么都不懂,今天学习了几个新的css3属性,记录下来. 注:所有的测试均是在chrome上手机模式测试,与真实的手机环境可能有误差 1:-webkit-tap-heigh ...

  8. 【原】常见CSS3属性对ios&android&winphone的支持

    2个月前,我在博文<webapp开发中兼容Android4.0以下版本的css hack>中写过“那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了” ,在 ...

  9. CSS3属性border-radius绘制多种多样的图形

    border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...

随机推荐

  1. shell1

    shebang = sharp-bang = #! 1.echo $PATH export PATH="$PATH:/home/user/bin" PREPEND prepend( ...

  2. FM(Factorization Machines)

    摘自 https://www.jianshu.com/p/1687f8964a32 https://blog.csdn.net/google19890102/article/details/45532 ...

  3. 后台挂载/卸载程序[Linux/Windows]

    后台挂载应用程序 即使关闭掉控制台窗口,该程序的进程也将会一直运行下去 #Windows 1.编写bat命令文件[形如:a.bat] 2.cmd执行:start /b a.bat #Linux noh ...

  4. visual studio code运行时报错,Cannot find module 'webpack'

    前言 今天运行是visual studio code时,报了一个错误Cannot find module 'webpack' ,网上找了很多方法都没解决.下面一起来看看怎么解决 正文 报错: npm ...

  5. TCP/IP(五)传输层之细说TCP的三次握手和四次挥手

    前言 这一篇我将介绍的是大家面试经常被会问到的,三次握手四次挥手的过程.以前我听到这个是什么意思呀?听的我一脸蒙逼,但是学习之后就原来就那么回事! 一.运输层概述 1.1.运输层简介 这一层的功能也挺 ...

  6. JS 对Array集合排序的方法

    我的业务是根据距离的远近经行一个排序: 第一种方法:冒泡排序 排序前的数据是这样子的: 排序后是这样子的: 代码可以直接复制使用的: <!doctype html> <html> ...

  7. Java_Number(装箱和拆箱)

    所有的包装类(Integer.Long.Byte.Double.Float.Short)都是抽象类Number子类 装箱: 自动将基本数据类型装换为包装器类型 拆箱: 自动将包装器类型转换为基本数据类 ...

  8. 【linux】统计文件夹中文件行数

    统计当前目录下,排除venv目录,剩余所有py文件的行数 wc -l `find -path ./venv -prune -o -name '*py'`

  9. sass—使用自定义function和@each实现栅格布局

    /*使用自定义function和@each实现栅格布局*/ @function buildLayout($num: 5){ $map: (defaultValue: 0); //不能直接生成col,需 ...

  10. RedisHelper帮助类

    using Newtonsoft.Json; using RedLockNet.SERedis; using RedLockNet.SERedis.Configuration; using Stack ...