[CSS3]学习笔记-CSS基本样式讲解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[CSS3]学习笔记-CSS基本样式讲解相关的知识，希望对你有一定的参考价值。
1、CSS样式-背景
CSS运行应用纯色作背景，也允许使用背景图像创建相当复杂的效果
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <!--background-attachment:背景图像是否固定或随着随着页面的其他部分滚动 10 background-color:设置元素的背景颜色 11 background-image:把图片设置为背景 12 background-position:设置背景图片的起始位置 13 background-repeat:设置背景图片是否及如何重复 14 background-size:规定背景图片的尺寸 15 background-origin:规定背景图片的定位区域 16 background-clip:规定背景的绘制区域 17 --> 18 <p>测试一下背景颜色是否继承</p> 19 </body> 20 </html>
其中的style.css:
1 body{ 2 /*background-color: darkgray;*/ 3 background-image: url("dear.jpg"); 4 background-repeat: no-repeat; 5 /*background-position:right center;*/ 6 /*background-position: 100px 100px;*/ 7 background-attachment: fixed; 8 } 9 p{ 10 background-color:olivedrab; 11 /*background-image: url("dear.jpg");*/ 12 width: 200px; 13 padding: 10px; 14 }
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：规定文本换行规则
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link href="style.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <div> 10 <h1>静夜思</h1> 11 <h3>李白</h3> 12 <h2>窗前明月光</h2> 13 <h2>疑是地上霜</h2> 14 <h2>举头望明月</h2> 15 <h2>低头思故乡</h2> 16 </div> 17 <div> 18 <p id="p1">This is a Intersting World</p> 19 <p id="p2">This is a Intersting World</p> 20 <p id="p3">This is a Intersting World</p> 21 <p id="p4">This is a Intersting World</p> 22 <p id="p5">This is a Intersting World</p> 23 <p id="p6">This is a Intersting World</p> 24 <p id="p7">This is a Intersting World</p> 25 </div> 26 </body> 27 </html>
其中的style.css:
1 body{ 2 color: aqua; 3 text-align: center; 4 } 5 h3{ 6 text-indent: 2em; 7 } 8 #p1{ 9 text-transform: capitalize; 10 } 11 #p2{ 12 text-transform: full-size-kana; 13 } 14 #p3{ 15 text-transform: full-width; 16 } 17 #p4{ 18 text-transform: lowercase; 19 } 20 #p5{ 21 text-transform: uppercase; 22 } 23 #p6{ 24 text-shadow: 5px 5px red; 25 <!--第三个参数为模糊的距离--> 26 } 27 #p7{ 28 width:600px; 29 text-wrap: normal; 30 }
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文件：
1 a:link{ 2 color:#ff0000; 3 text-decoration: none; 4 background-color: aqua; 5 } 6 a:visited{ 7 color:#00ff00; 8 } 9 a:hover{ 10 color: #0000ff; 11 } 12 a:active{ 13 color:#ff00ff; 14 }
5、CSS样式-列表
CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志
1）list-style:简写列表项 2）list-style-image:列表项图像 3）list-style-position:列表标志位置 4）list-style-type：列表类型
1 <body> 2 <ul> 3 <li>项目1</li> 4 <li>项目2</li> 5 <li>项目3</li> 6 <li>项目4</li> 7 <li>项目5</li> 8 </ul> 9 10 <ul class="ul1"> 11 <li>项目1</li> 12 <li>项目2</li> 13 <li>项目3</li> 14 <li>项目4</li> 15 <li>项目5</li> 16 </ul> 17 18 <ul class="ul2"> 19 <li>项目1</li> 20 <li>项目2</li> 21 <li>项目3</li> 22 <li>项目4</li> 23 <li>项目5</li> 24 </ul> 25 </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表格属性可以帮我们极大的改善表格的外观，包括表格边框、折叠边框、表格宽高、表格文本对齐、表格内边距
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link href="style.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <table id="tb"> 10 <tr> 11 <th>姓名</th> 12 <th>性别</th> 13 <th>年龄</th> 14 </tr> 15 <tr> 16 <td>张三</td> 17 <td>男</td> 18 <td>20</td> 19 </tr> 20 <tr class="alt"> 21 <td>李四</td> 22 <td>男</td> 23 <td>22</td> 24 </tr> 25 <tr> 26 <td>丽丽</td> 27 <td>女</td> 28 <td>21</td> 29 </tr> 30 <tr class="alt"> 31 <td>星星</td> 32 <td>女</td> 33 <td>24</td> 34 </tr> 35 </table> 36 </body> 37 </html>
其中用到的CSS文件：
1 #tb{ 2 border-collapse: collapse; 3 width: 500px; 4 } 5 #tb td,#tb th{ 6 border: 1px solid bisque; 7 padding: 5px; 8 } 9 #tb th{ 10 text-align: left; 11 background-color: aqua; 12 color:#ffffff; 13 } 14 #tb tr.alt td{ 15 color:black; 16 background-color: aquamarine; 17 }
7、CSS样式-轮廓
CSS轮廓主要是用来突出元素的
1）outline:设置轮廓属性 2）outline-color:设置轮廓的颜色 3）outline-style:设置轮廓的样式 4）outline-width:设置轮廓的宽度
以上是关于[CSS3]学习笔记-CSS基本样式讲解的主要内容，如果未能解决你的问题，请参考以下文章