[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和定义列表:引用块 ...

随机推荐

Sequence Classification
Natural Language Processing with Python Charpter 6.1 import nltk from nltk.corpus import brown def p ...
apache、nginx、iis 全球分布
从下图(2012年8月份的数据)来看,来自俄罗斯的Nginx服务器,主要使用区域也集中在俄罗斯及周边国家.微软的IIS,在中国使用最多,占其总份额的57.6%,其他国家如埃及.沙特阿拉伯等国家也基本使 ...
ARM-LINUX学习笔记-1
安装完linux之后记得系统更新,更新使用apt命令,如下(记得使用之前使用sudo -i 指令切换到root用户模式) apt-get update 更新系统软件源,相当于查找更新 apt-get ...
Salesforce开发者学习笔记之二:Salesforce开发平台应用场景
Salesforce作为一个全方位的CRM系统可以应用于企业中的各个不同部门以取代手工的,耗时的以及低效的业务流程,例如基于报表的数据管理和分析基于电子邮件的协同合作本地的文件共享各种手工操作 ...
mysql的python api
我采用的是MySQLdb操作的MYSQL数据库.先来一个简单的例子吧: 1 2 3 4 5 6 7 8 9 10 import MySQLdb try: conn=MySQLdb.conn ...
readln
常用于暂停程序的运行!可以不带参数,read必须带参数; 使用原则: 1.没有特殊需要,一个程序中避免同时使用read 和readln: 2.尽量使用readln语句来输入数据,一个数据行对应一个re ...
S3C2440的定时器详解
还包含用于大电流驱动的死区发生器位预分频器是可编程的,并且按存储在TCFG0和TCFG1寄存器中的加载值来分频PCLK 位递减计数器.当递减计数器到达零时,产生定时器中断请求通知CPU定时器操作已经 ...
VS2010环境下用ANSI C创建DLL和使用方法（转）
源:VS2010环境下用ANSI C创建DLL和使用方法 . 创建DLL工程 1.2 创建一个dll工程. 操作:a.文件->新建->项目->Win32控制台应用程序. b.输入工程 ...
Delphi 内存分配 StrAlloc New（转）
源:Delphi 内存分配 StrAlloc New 引自:http://anony3721.blog.163.com/blog/static/5119742010824934164/ 给字符指针 ...
复习php的一些函数
2014.07.04 查看ecshop的一些源码,学习了一些函数.

[CSS3]学习笔记-CSS基本样式讲解

[CSS3]学习笔记-CSS基本样式讲解的更多相关文章

随机推荐

热门专题