学习笔记-CSS-2017.2.13
一、CSS 背景
body {background:#ffffff url('img_tree.png') no-repeat right top;}
当使用简写属性时，属性值的顺序为：
background-color; background-image; background-repeat; background-attachment; background-position
1、background-attachment 属性：
2、background-color 属性：
3、background-position 属性：
4、background-size 属性：
5、background-repeat 属性：
6、background-origin 属性：
7、background-clip 属性：
<style type="text/css">
#example1{
background-color: yellow;
border: 5px dotted black;
padding: 35px;
}
#example2{
background-color: yellow;
border: 5px dotted black;
background-clip: padding-box;
padding: 35px;
}
#example3{
background-color: yellow;
border: 5px dotted black;
background-clip: content-box;
padding: 35px;
}
</style>
</head>
<body>
<div id="example1">
<h2>this is a demo</h2>
<p>没有背景裁剪</p>
</div>
<div id="example2">
<h2>this a demo</h2>
<p>background-clip:padding-box</p>
</div>
<div id="example3">
<h2>this is a demo</h2>
<p>background-clip:content-box</p>
</div>
8、background-image 属性：
多个背景图片
<style>
#example1 {
background-image: url(img_flwr.gif),url(img_flwr.gif), url(paper.gif);
background-position:left bottom, right bottom, left top;
background-repeat:no-repeat, no-repeat, repeat;
padding: 15px;
}
</style>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
二、CSS 文本格式
1、color 属性
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
2、direction 属性
3、letter-spacing 属性
增加或减少字符间的空白（字符间距）
<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
4、line-height 属性
不允许负值
5、text-align 属性
6、text-decoration 属性
7、text-indent 属性
规定文本块中首行文本的缩进。注意： 负值是允许的。如果值是负数，将第一行左缩进。
8、text-shadow 属性
h1 {text-shadow:2px 2px 2px blue;}
9、text-transform 属性
10、unicode-bidi 属性
QQ截图20170213140701.png
div.ex1
{
direction:rtl;
unicode-bidi:bidi-override;
}
11、vertical-align 属性
12、white-space 属性
13、word-spacing 属性
增加或减少字与字之间的空白。可以是负值。
word-spacing:30px;
14、文本转化
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
三、 CSS 字体
1、字体样式
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
<p class="normal">这是一个段落,正常。</p>
<p class="italic">这是一个段落,斜体。</p>
<p class="oblique">这是一个段落,斜体。</p>
2、用em来设置字体大小
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
四、CSS 链接
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
<a href="/css/" target="_blank">链接</a>
</body>
五、CSS 列表
1、list-style-position 属性
<style type="text/css">
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
</style>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
2、list-style-type 属性
六、CSS 表格
1、表格边框
2、折叠边框
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
3、表格宽度和高度
4、表格文字对齐
text-align属性设置水平对齐方式，像左，右，或中心
垂直对齐属性设置垂直对齐，比如顶部，底部或中间
5、表格填充
如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性。
6、表格颜色
七、CSS 盒子模型
最终元素的总宽度计算公式是这样的：
- 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
- 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
八、CSS 边框
1、边框样式
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>
2、边框宽度：border-width 属性
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。
3、边框-单独设置各边
//写法一
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
//写法二
p
{
border-style:dotted solid;
}
4、
