一.为什么使用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. 使用echarts-for-react 绘制折线图 报错:`series.type should be specified `

    解决办法: 在动态获取值的函数前面加 访问器属性  get ,去获取对象的属性 @inject('commonStore', 'reportUIStore') @observer class Line ...

  2. Kaldi nnet3的前向计算

    根据任务,构建ComputationRequst 编译ComputationRequst,获取NnetComputation std::shared_ptr<const NnetComputat ...

  3. 二进制中连续k个1-题解

    原题传送门[>XJOI<]    重要提示:您的等级必须达到三级五段,否则会被一只小猫痛扁 题目描述: 求最小的m,使得m>=n而且m的二进制表示包含至少连续k个1 输入格式: 输入 ...

  4. Window10系统中MongoDB数据库导入数据文件

    首先进入C:\Program Files\MongoDB\Server\4.0\bin>  打开cmd 创建一个空的数据库集合  db.createCollection("myColl ...

  5. CDQ分治求不知道多少维偏序 (持续更新 ]

    求三维偏序的模板 : //Author : 15owzLy1 //luogu3810.cpp //2018 12 25 16:31:58 #include <cstdio> #includ ...

  6. 使用pytesseract出现的问题

    dyld: Library not loaded: /usr/local/opt/jpeg/lib/libjpeg.8.dylib Referenced from: /usr/local/lib/li ...

  7. jarvis level6_x64堆溢出unlink拾遗

    level6 32位的我没有调出来,貌似32位的堆结构和64位不太一样,嘤嘤嘤?,所以做了一下这个64位的,题目地址,level6_x64 首先看一下程序的结构体 struct list //0x18 ...

  8. 根据ip获取对应的省市区

    public static String getAddressByIp(String ip) { String resout = ""; try { if (isInner(ip) ...

  9. 网络流24题 ——运输问题 luogu 4015

    题目描述:这里 题面已经提示我们这是费用流了 那么由源点向所有仓库连边,容量为仓库原有货物量,费用为0 然后由所有零售商店向汇点连边,容量为一个零售商店的需求量,费用为0 最后由仓库向零售商店连边,容 ...

  10. python下载大文件

    1. wget def download_big_file_with_wget(url, target_file_name): """ 使用wget下载大文件 Note: ...