[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和定义列表:引用块 ...
随机推荐
- .Net 分布式云平台基础服务建设说明概要
1) 背景 建设云平台的基础框架,用于支持各类云服务的业务的构建及发展. 2) 基础服务 根据目前对业务的理解和发展方向,总结抽象出以下几个基础服务,如图所示 3) 概要说明 基础服务的发展会根 ...
- MySQL+Amoeba实现数据库主从复制和读写分离
MySQL读写分离是在主从复制的基础上进一步通过在master上执行写操作,在slave上执行读操作来实现的.通过主从复制,master上的数据改动能够同步到slave上,从而保持了数据的一致性.实现 ...
- 总结Objective-c常用算法
今天是星期天,想睡到10点起床,结果认为自己太奢侈了,不能这么做,于是把闹钟设置成了6:30:结果终于9:36醒了,起床,无缘无故迟了,好吧,就算太累了吧,周天就原谅自己一回.终于到了中午 ...
- C++ 制作 json 数据 并 传送给服务端(Server) 的 php
json数据格式,这里举个基础的例子: {"name":"LGH"} 在C++里面,我用个函数把特定的数据组合成 json void toJson(int co ...
- i.BIO方式的SSL通道流程
前面已经讲解了BIO通道的整体流程,对于SSL的流程是插在通道中的,在BIO通道的初始化的时候,根据Connector配置的SSLEnabled属性进行SSL的逻辑. 主要集中的位置在JIOEndpo ...
- TCP/IP各层主要功能
第一层:网路接口层(物理层和链路层) 提供TCP/IP协议的数据结构和实际物理硬件之间的接口.物理层的任务就是为它的上一层提供一个物理连接, 以及它们的机械.电气.功能和过程特性.链路层的主要功能是如 ...
- hdoj 2054(A==B)
注意考虑以下数据: 123 123.0; 0.123 .123; 00.123 0.123; 代码: #include<iostream>#include<cstdio> ...
- Hadoop YARN介绍
YARN产生背景 MRv1的局限 YARN是在MRv1基础上演化而来的,它克服了MRv1中的各种局限性.在正式介绍YARN之前,先了解下MRv1的一些局限性,主要有以下几个方面: 扩展性差.在MRv1 ...
- 第八届蓝桥杯B组java第四题
标题:取数位 求1个整数的第k位数字有很多种方法.以下的方法就是一种.对于题目中的测试数据,应该打印5.请仔细分析源码,并补充划线部分所缺少的代码.注意:只提交缺失的代码,不要填写任何已有内容或说明性 ...
- [Swift]LeetCode943. 最短超级串 | Find the Shortest Superstring
Given an array A of strings, find any smallest string that contains each string in A as a substring. ...