css学习总结

css学习总结

1.什么是CSS

• CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
• CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。
• 最主要的作用：内容与样式分离。

2. CSS三要素

• css标记由选择器+属性+值这三个组成，这三个也称为css的三要素。

• 书写方式：选择器{属性1:值1; 属性2:值2;}

  Selector {property:value}
  或
  p{
  background-color:red;
  font-size:16px;
  }

3.CSS写到哪里

• 写到style里面（不建议），叫行内样式表

 <p style="color:red;">style示例p>

• 写在文件的头部，叫页内样式表

<style>
  p{
    background-color:red;
    font-size:16px;
  }
style>

• 写到独立的css文件中（建议使用），叫外部样式表

  放在单独的文件中，并在头部引入该文件。
  注意rel 和type属性都必须照写，否则加载不到

"stylesheet" type="text/css" href="css/my.css">

4.CSS常用的3个选择器

• html标签选择器也叫Tag选择器，好处：都匹配下例为对所有的p标签添加样式

p{
      color:red;
}

• id选择器（只匹配一个）。下例为页面上id=”name” 的元素添加样式

#name{
  color:red;
}

• class选择器（可匹配1至多个）下例为对页面中所有含有class=”myclass”的元素添加样式

.myclass{
  color:red;
}

.a.b{
  font-size:1em;
}

此例匹配所有同时具有class=”a” 和 class=”b”的元素。
如class=”a b”

• 选择器的优先级

  id选择器 > class选择器 > 组合选择器 > 标签选择器
  

5.组合选择器

在 CSS3 中包含了四种组合方式:

• 后代选取器(以空格 分隔)

div p{  background-color:yellow;}

• 子元素选择器(以大于号 > 分隔）

div>p{  background-color:yellow;}

• 相邻兄弟选择器（以加号 + 分隔）相邻兄弟选择器（Adjacent sibling selector）可选择紧接在定位元素后的第一个目标元素，且二者有相同父元素。以下实例选取了所有位于 div元素后的第一个 p 元素

div+p{  background-color:yellow;}

• 普通兄弟选择器（以破折号 ~ 分隔）选取 定位元素后的所有目标元素。以下实例选取了所有 div 元素后面的所有的兄弟元素 p

div~p{  background-color:yellow;}

6.CSS常用文本样式属性

color：                               3种设置方式,分别是内置/#ccccdd/rgb(0-255,0-255,0-255)调和颜色
font-size                           设置字体大小
font-style(normal,italic,oblique)   字体样式
font-weight(normal,bold,100~900)    字的粗细
line-height                         行高如10px
word-spacing                        文字间距，但文字中间需要有空格分开
text-align：                      文字对齐方式
          left  :　 默认值。左对齐 
          right  :　 右对齐 
          center  :　 居中对齐 
          justify  :　 两端对齐 
text-decoration(underline,line-through) 修饰，可选项有下划线，中线等。

7.CSS背景属性

• 背景色

  可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

p {background-color: gray;}

• 背景图像
  要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
  如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

• 背景重复
  如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
  属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
  默认地，背景图像将从一个元素的左上角开始。请看下面的例子：

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

• 背景定位
  可以利用 background-position 属性改变图像在背景中的位置。
  下面的例子在 body 元素中将一个背景图像居中放置：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

关键字

图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。
根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。
如果只出现一个关键字，则认为另一个关键字是 center。
所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

百分数值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。
如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

• 背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

8.CSS列表属性

• 列表类型

要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。
例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。
要修改用于列表项的标志类型，可以使用属性 list-style-type：

ul {list-style-type : square}

上面的声明把无序列表中的列表项标志设置为方块。

• 列表项图像

有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：

ul li {list-style-image : url(xxx.gif)}

只需要简单地使用一个 url() 值，就可以使用图像作为标志。

• 列表标志位置

CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。
简写列表样式
为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：

li {list-style : url(example.gif) square inside}

list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

9.CSS表格属性

• 表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。
下面的例子为 table、th 以及 td 设置了蓝色边框：

table, th, td
  {
  border: 1px solid blue;
  }

请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
如果需要把表格显示为单线条边框，请使用 border-collapse 属性。

• 表格宽度和高度

通过 width 和 height 属性定义表格的宽度和高度。
下面的例子将表格宽度设置为 100%，同时将 th 元素的高度设置为 50px：

table
  {
  width:100%;
  }

th
  {
  height:50px;
  }

• 补充：

CSS Table 属性

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

10.CSS伪类样式

• 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

详见http://www.w3school.com.cn/css/css_pseudo_classes.asp