CSS 基本样式
1.CSS 背景：
css 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
| 属性 | 描述 |
|---|---|
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
| background-color | 设置元素的背景颜色 |
| background-image | 把图片设置为背景 |
| background-position | 设置背景图片的起始位置 |
| background-repeat | 设置背景图片是否及如何重复 |
body{
background-image: url("python.png");
background-repeat: no-repeat;
}
body{
background-image: url("python.png");
background-repeat: no-repeat;
background-position:center top;
}
2.css3 背景
| background-size | 规定背景图片的尺寸 |
| background-origin | 规定背景图片的定位区域 |
| background-clip | 规定背景的绘制区域 |
body{
background-image: url("python.png");
background-repeat: no-repeat;
background-size：100px 100px;
}
css 样式-文本
CSS 文本属性可定义文本的外观。 通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
| 属性 | 描述 |
|---|---|
| color | 文本颜色 |
| direction | 文本方向 |
| line-height | 行高 |
| letter-spacing | 字符间距 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-transform | 元素中的字母 |
| unicode-bidi | 设置文本方向 |
| white-space | 元素中空白的处理方式 |
| word-spacing |
字间距 |
举例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>查看颜色</p>
<h1>标题查看颜色</h1>
</body>
</html>
style.css文件
body{
color: aqua;
}
CSS 链接
CSS 链接的四种状态：
a:link --普通的、未被访问的链接 a:visited --用户已访问的链接 a:hover --鼠标指针位于链接的上方 a:active --链接被点击的时刻
举例看一下当鼠标移到；链接附近时的反应
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css test</title>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body > <a href="http://www.shiyanlou.com">shiyanlou</a> </body>
</html>
test.css
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
2CSS 设置链接背景颜色
修改对应的属性 background-color
根据上面的链接 ，可以是这样的
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
3 修改链接下划线
link 属性中加入 text-decoration 属性
CSS 列表
CSS 列表允许防止、改变列表标志，或者将图片作为列表项标志。
1 列表类型
而 list-style-type 这个属性我们就可以用来控制标记类型
2 列表项图片
用 list-style-image 属性
ul.img1{list-style-image:url("4.ico")}
ul.img2{list-style-image: url("11.ico")}
<ul class="img1">
<li>shiyanlou</li>
<li>shiyanlou</li>
<li>shiyanlou</li>
<li>shiyanlou</li>
</ul> <ul class="img2">
<li>shiyanlou</li>
<li>shiyanlou</li>
<li>shiyanlou</li>
<li>shiyanlou</li>
</ul>
3 简写列表样式
li {list-style : url(example.gif) square}
CSS 表格
在表格的学习中我们主要了解以下属性：
border-collapse ---设置是否把表格边框合并为单一的边框。
border-spacing ---设置分隔单元格边框的距离。
caption-side --- 设置表格标题的位置。
empty-cells ---设置是否显示表格中的空单元格。
table-layout ---设置显示单元、行和列的算法。
CSS 轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。涉及到的属性有：
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
<p id="p1">shiyanlou is my home</p>
<p id="p2">shiyanlou is my home</p>
#p1{
outline-color: #FF704D;
outline-style: groove;
outline-width: 10px;
}
#p2{
outline-style: dotted;
outline-color: green;
outline-width: 5px;
}
CSS 基本样式的更多相关文章
- 精简的网站reset 和 css通用样式库
参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...
- css初始化样式代码
为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...
- 漂亮的CSS按钮样式集以及在线生成工具
以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- html / css打印样式
最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- 第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...
- 第 15 章 CSS 文本样式[上]
学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...
- CSS常用样式（四）之animation
上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...
- CSS Reset样式重置
为了让页面在各不同浏览器之间显示效果一致,CSS样式清除和重置是前端开发必需要做的事情,结合前车之鉴,整理了份CSS重置样式代码供参考. @charset "utf-8"; /* ...
随机推荐
- 一篇文章学会Spring4.0
spring概述 spring 是一个开源框架. Spring 为简化企业级应用开发而生. 使用 Spring 可以使简单的 JavaBean 实现以前只有 EJB 才能实现的功能. Spring 是 ...
- 【VMware Workstation】虚拟机动态IP NAT连接外部网络（局域网以及广域网）
由于公司办公使用的账号认证获得IP,在虚拟机使用原来的桥接模式无法连接外网,因而需要更换虚拟机的网络连接方式. 虚拟机软件:VMware Workstation 12 Pro 虚拟机:centos7 ...
- 【Unity游戏开发】浅谈Unity游戏开发中的单元测试
一.单元测试的定义与作用 单元测试定义:单元测试在传统软件开发中是非常重要的工具,它是指对软件中的最小可测试单元进行检查和验证,一般情况下就是对代码中的一个函数去进行验证,检查它的正确性.一个单元测试 ...
- 004-谈一谈lock和synchronized
这两个关键字都是用来对线程进行同步操作的. 参考疯狂java讲义16.5节 线程的同步. (完全答反了...)
- Why I donot give up cnblogs for Jianshu
我为什么不放弃博客园使用简书 Why I donot give up cnblogs for Jianshu Chapter0 从2016年8月开始接触简书开始,就有些喜欢上简书了,因为简书支持 ma ...
- [2014-12-29]使用Enum位模式进行多重状态（或权限）管理
前言 对于Enum在AspNet Mvc中的应用,我之前提到一种扩展,如何在 Asp.net Mvc 开发过程中更好的使用Enum.这里将介绍另一种更好的使用Enum的方法. Enum定义 以一个代表 ...
- js，jQuery实现可关闭悬浮框广告特效，兼容（谷歌，火狐，Ie）
注意不能直接用close()命名关闭广告函数,避免冲突. javascript实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
- MongoDB-python的API手记
-------------------python调用MongoDB------------------- 1.官方文档:http://api.mongodb.org/python/current/t ...
- linux下操作mysql
有关mysql数据库方面的操作,必须首先登录到mysql中. 开启MySQL服务后,使用MySQL命令可以登录.一般使用mysql -uroot -p即可.如果数据库不是本机,则需要加参数,常用参数如 ...
- 分布式定时任务 -- elastic-job
一.前言 在我们的项目当中,使用定时任务是避免不了的,我们在部署定时任务时,通常只部署一台机器.部署多台机器时,同一个任务会执行多次.比如短信提醒,每天定时的给用户下发短信,如果部署了多台,同一个用户 ...