学习笔记-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、