[CSS3]学习笔记-CSS基本样式讲解
1、CSS样式-背景
CSS运行应用纯色作背景，也允许使用背景图像创建相当复杂的效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--background-attachment:背景图像是否固定或随着随着页面的其他部分滚动
background-color:设置元素的背景颜色
background-image:把图片设置为背景
background-position:设置背景图片的起始位置
background-repeat:设置背景图片是否及如何重复
background-size:规定背景图片的尺寸
background-origin:规定背景图片的定位区域
background-clip:规定背景的绘制区域
-->
<p>测试一下背景颜色是否继承</p>
</body>
</html>
其中的style.css:
body{
/*background-color: darkgray;*/
background-image: url("dear.jpg");
background-repeat: no-repeat;
/*background-position:right center;*/
/*background-position: 100px 100px;*/
background-attachment: fixed;
}
p{
background-color:olivedrab;
/*background-image: url("dear.jpg");*/
width: 200px;
padding: 10px;
}
2、CSS样式-文本
CSS文本属性可定义文本外观。通过文本属性，可改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进
1）color:文本颜色 2）direction：文本方向 3）line-height:行高 4）letter-spacing：字符间距 5）text-align：对齐元素中的文本 6）text-decoration：向文本添加修饰 7）text-indent:缩进元素中文本的首行 8）text-transform:元素中的字母 9）unicode-bidi:设置文本方向 10）white-space:元素中空白的处理方式 11）word-spacing:字间距
文本效果：1）text-shadow:向文本添加阴影 2）word-warp：规定文本换行规则
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<h1>静夜思</h1>
<h3>李白</h3>
<h2>窗前明月光</h2>
<h2>疑是地上霜</h2>
<h2>举头望明月</h2>
<h2>低头思故乡</h2>
</div>
<div>
<p id="p1">This is a Intersting World</p>
<p id="p2">This is a Intersting World</p>
<p id="p3">This is a Intersting World</p>
<p id="p4">This is a Intersting World</p>
<p id="p5">This is a Intersting World</p>
<p id="p6">This is a Intersting World</p>
<p id="p7">This is a Intersting World</p>
</div>
</body>
</html>
其中的style.css:
body{
color: aqua;
text-align: center;
}
h3{
text-indent: 2em;
}
#p1{
text-transform: capitalize;
}
#p2{
text-transform: full-size-kana;
}
#p3{
text-transform: full-width;
}
#p4{
text-transform: lowercase;
}
#p5{
text-transform: uppercase;
}
#p6{
text-shadow: 5px 5px red;
<!--第三个参数为模糊的距离-->
}
#p7{
width:600px;
text-wrap: normal;
}
3、CSS样式-字体
CSS字体属性定义文本的字体系列、大小、加粗、风格和变形
1）font-family:设置字体系列 2）font-size:设定字体尺寸 3）font-style:设置字体风格 4）font-variant:以小型大写字体或正常字体显示文本 5）font-weight:设置字体的粗细
4、CSS样式-链接
CSS链接的四种状态：
1)a:link 普通的、未被访问的链接 2)a:visited 用户已访问的练级 3）a:hover 鼠标指针位于链接的上方 4）a:active 链接被点击的时刻
常见的链接方式：
text-decoration:大多用于去掉链接中的下划线
<body>
<a href="http://www.jikexueyuan.com">极客学院</a>
</body>
对应的CSS文件：
a:link{
color:#ff0000;
text-decoration: none;
background-color: aqua;
}
a:visited{
color:#00ff00;
}
a:hover{
color: #0000ff;
}
a:active{
color:#ff00ff;
}
5、CSS样式-列表
CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志
1）list-style:简写列表项 2）list-style-image:列表项图像 3）list-style-position:列表标志位置 4）list-style-type：列表类型
<body>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
<li>项目5</li>
</ul>
<ul class="ul1">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
<li>项目5</li>
</ul>
<ul class="ul2">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
<li>项目5</li>
</ul>
</body>
其中的CSS文件：
ul li{
/*list-style: circle;*/
/*list-style-image: url("icon1.gif");*/
}
ul.ul1{
list-style-position: inside;
}
ul.ul2{
list-style-position: outside;
}
6、CSS样式-表格
CSS表格属性可以帮我们极大的改善表格的外观，包括表格边框、折叠边框、表格宽高、表格文本对齐、表格内边距
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table id="tb">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr class="alt">
<td>李四</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>丽丽</td>
<td>女</td>
<td>21</td>
</tr>
<tr class="alt">
<td>星星</td>
<td>女</td>
<td>24</td>
</tr>
</table>
</body>
</html>
其中用到的CSS文件：
#tb{
border-collapse: collapse;
width: 500px;
}
#tb td,#tb th{
border: 1px solid bisque;
padding: 5px;
}
#tb th{
text-align: left;
background-color: aqua;
color:#ffffff;
}
#tb tr.alt td{
color:black;
background-color: aquamarine;
}
7、CSS样式-轮廓
CSS轮廓主要是用来突出元素的
1）outline:设置轮廓属性 2）outline-color:设置轮廓的颜色 3）outline-style:设置轮廓的样式 4）outline-width:设置轮廓的宽度
[CSS3]学习笔记-CSS基本样式讲解的更多相关文章
- [CSS3] 学习笔记-CSS动画特效
在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...
- [CSS3] 学习笔记-CSS选择器
CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...
- [CSS3] 学习笔记--CSS盒子模型
1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...
- [CSS3] 学习笔记-CSS定位
页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...
- [CSS3] 学习笔记-CSS入门基本知识
1.CSS概述 CSS指层叠样式表 CSS样式表极大的提高了工作效率 1)CSS基础语法: selector{ propery:value } 例1:h1{color:red;font-size:14 ...
- HTML学习笔记 CSS背景样式案例 第六节 （原创） 参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS学习笔记——CSS选择器样式总结
<style type="text/css"> * { padding:0; margin:0; } .box h2 { //内边距左边的距离 padding-left ...
- amazeui学习笔记--css（基本样式4）--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
随机推荐
- 关于CH340在STM32实现一键下载电路的研究（转）
源:关于CH340在STM32实现一键下载电路的研究 在做基于STM32的多功能MP3播放器的课题时,在程序下载这部分时借鉴了正点原子开发板上的一键下载电路,采用CH340G这款芯片设计. 在画PCB ...
- Http协议与TCP协议理解
TCP协议对应于传输层,而HTTP协议对应于应用层,从本质上来说,二者没有可比性.Http协议是建立在TCP协议基础之上的,当浏览器需要从服务器获取网页数据的时候,会发出一次Http请求.Http会通 ...
- KERMIT,XMODEM,YMODEM,ZMODEM传输协议小结（转）
源:KERMIT,XMODEM,YMODEM,ZMODEM传输协议小结 Kermit协议 报文格式: 1.MARK,起始标记START_CHAR,为 0x01(CTRIL-A): 2.LEN,报文剩余 ...
- LPC1788定时器使用
#ifndef __TIM_H_ #define __TIM_H_ #include "common.h" extern u8 tim1_mr0_flag; void tim0_c ...
- [转]SQL Server® 2008 R2 Express 静默安装
1. http://msdn.itellyou.cn/下载Express版SQL Server 2.快捷键win+R,进入CMD,解压文件,解压命令为 <文件名>.exe /x <解 ...
- Java使用POI实现数据导出excel报表
Java使用POI实现数据导出excel报表 在上篇文章中,我们简单介绍了java读取word,excel和pdf文档内容 ,但在实际开发中,我们用到最多的是把数据库中数据导出excel报表形式.不仅 ...
- PHPCMS快速建站系列之自定义分页函数
内容分页的实现方法:{pc:content action="lists" catid="$catid" order="id DESC" nu ...
- HttpListener 实现web服务端
1. using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syste ...
- .net中的4种事务总结
在 一个MIS系统中,没有用事务那就绝对是有问题的,要么就只有一种情况:你的系统实在是太小了,业务业务逻辑有只要一步执行就可以完成了.因此掌握事务处 理的方法是很重要,进我的归类在.net中大致有以下 ...
- 一句话绑定父函数的作用域this
//如何在返回的函数中绑定父函数的作用域this function bound () { return function () { console.log(this); }.bind(this); } ...