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"; /* ...
随机推荐
- php Yii2 报错unexpected '}'
报错unexpected '}'一般是缺少":"导致的
- Ecshop商品描述上传中文名图片无法显示解决方法
在后台上传商品图片的时候,如果你选择一个中文名称的图片,那么上传后会产生乱码,导致图片显示不出来. 下面说一种解决办法:使用"年月日时分秒 + 6个随机字符"做为文件名,如 201 ...
- linux（九）之网络基础
一.ping命令 1.1.作用 用于检测主机.执行ping指令会使用ICMP传输协议,发出要求回应的信息,若远端主机的网络功能没有问题,就会回应该信息,因而得知该主机运作正常. 1.2.命令说明 pi ...
- tp下的memcached运用
来源:http://blog.csdn.net/fudaoji/article/details/50722839 侵删 一.环境: lnmp开发服务器, memcached2.2.0,thinkp ...
- java面向对象（四）之重写、重载
重载 定义 重载:在一个类中,存在多个方法拥有相同的名字,但在名字相同的同时,必须有不同的参数,这就是重载. 编译器会根据实际情况挑选出正确的方法,如果编译器找不到匹配的参数或者找出多个可能的匹配就会 ...
- 红黑树的插入Java实现
package practice; public class TestMain { public static void main(String[] args) { int[] ao = {5, 1, ...
- java中的jdk切换(无需卸载原有jdk)
该转自 : http://blog.csdn.net/u010011371/article/details/50749954 很好的一片文章,适合我这种小白,方便以后使用. 之前一直使用的是JDK1 ...
- 【DDD】领域驱动设计实践 —— 框架实现
本文主要了在社区服务系统(ECO)中基于SpringMVC+mybatis框架对DDD的落地实现.本文为系列文章中的其中一篇,其他内容可参考:通过业务系统的重构实践DDD. 框架实现图 该框架实现基本 ...
- 使用nfs作为根文件系统启动，(3)
通过设置u-boot的bootargs来更改开机自动进入nfs远端服务器,不需要mount指令,实现虚拟机编译程序后直接通过u-boot烧写程序 1 使用nfs作为根文件系统启动 1.1 pr ...
- 关于小程序http请求的问题
解决wx.request 发起的是 HTTPS 请求的问题 对于wx.request,大家可以理解为是微信小程序版的ajax,基于安全性考虑他的url地址必须是以https开头的,但对于一个开发者来说 ...