《HTML & CSS 设计与构建网站》学习笔记

CSS简介

CSS通过将规则和**HTML元素相关联的方式来工作，这些规则用来控制指定元素中的内容如何显示
一条CSS规则包含两个部分：一个选择器和一条声明
选择器表明要应用规则的元素
同一个规则可以应用到多个元素上，前提是需要将这些元素名用逗号隔开
声明用于表明应该如何显示选择器指明的元素
声明分为两个部分：属性和值，用冒号作为分隔符

声明位于花括号中

h1,h2,h3{font-family:Arial;color:yellow;}

在HTML文档中使用CSS有两种方式：外部CSS和内部CSS
最好使用外部CSS
外部CSS:
- 在head部分用<link>元素
```
 <link href="css/styles.css" type="text/css" rel="stylesheet" />
```
- href特性表明CSS文件的路径
- type特性表明所链接文档的类型
- rel特性指明了HTML文档和所链接文档的关系，当链接到一个CSS文件时，值为stylesheet

内部CSS：

也是在HTML的head部分，用<style>标签
例：

<title>Using Internal CSS</title>
<style type="text/css">body{font-family: arial;background-color:rgb(185,179,175);}h1{color:rgb(255,255,255);}
</style>

type特性用来表明这些样式是在CSS中指定的，该特性的值为text/css

CSS选择器：
- 选择器区分大小写
- 通用选择器： *{}
  - 应用于页面的所有元素
- 类型选择器： p{}
  - 匹配元素名称与选择器相同的元素
  - 这里的例子应用于所有的<p>元素
- 类选择器：
  - 用于匹配元素的class特性的值等于**选择器点（或句点）**符号后面的部分相同
  - .note{}
    - 点+note，这里的例子用于匹配所有class特性的值为note的元素
  - p.note{}
    - p+点+note，这个例子用于匹配class特性为note的<p>元素
- ID选择器：
  - 匹配元素的id特性的值等于选择器井号后面的部分相同的元素
  - #introduction应用于id特性值为introduction的元素
- 子元素选择器：
  - 匹配指定元素的直接子元素
  - li>a {} 匹配所有父元素为<li>的<a>元素（对页面中的其他<a>元素不起作用）
    - 如果要匹配 <li>的所有子元素怎么办？：li>*{} （用一个*）
- 后代选择器：
  - 匹配指定元素的后代元素（不仅仅是指定元素的直接子元素（比子元素选择器更广））
  - ** p a {}** 匹配所有位于<p>中的<a>元素，不管他们中间有没有嵌套其他元素
  - 同样，上例中的a可以换成星号*用来指代所有<p>的后代元素
- 相邻兄弟选择器：
  - 匹配一个元素相邻的兄弟元素
  - h1+p {} 匹配<h1>元素之后的第一个<p>元素（对其他<p>元素不起作用）
- 普通兄弟选择器：
  - 匹配一个元素的兄弟元素，不论这个兄弟是不是与它相邻（相邻兄弟元素选择器的加强版本）
  - h1~p {} 如果有两个<p>元素都是<h1>元素的兄弟元素，那么规则对于两个<p>元素都起作用

CSS规则如何级联：
- 就近原则：
  - 如果两个选择器完全相同：后出现的重要级高
- 具体性原则：
  - 如果一个选择器比其他选择器更具体，那么更具体的选择器重要级高
  - h1比*具体
  - p b 比 p 具体
  - p#intro比p具体
- 重要性：可以在任意元素后面添加 !improtant 表明这一条规则比其他的更重要

CSS的继承
- 如果在<body>上设置了color属性，那么他们将应用于<body>元素的大多数子元素上，这是因为color属性的值被这些子元素继承，属性的继承让我们不必在每个元素上都应用这些属性，使样式表变得更加简洁
- 但是background-color属性和border属性则不会被子元素继承，否则页面将看起来杂乱无章
- 可以通过将属性设置成inherit来强制大多数元素从它的父元素中继承属性值。
- 例：
```
<div class="page"><h1>Potatoes</h1><p>There are dozens of different potato varieties.</p>
</div>
```
```
body{font-family:Arial,Verdana,sans-serif;color:#665544;padding:10px;}
.page{border:1px solid #665544background-color:#efefef;padding: inherit;}
```
- 在本例中，<div>元素（属于page类）从应用于<body>的CSS规则中继承了padding属性的值

颜色

使用color属性指定前景色，有几种方法
- 使用rgb：
- 使用十六进制编码
- 使用颜色名称
- 使用css3增加的hsl:色调(0~360(是一个角度）)+饱和度+明度
  - 色调：通过角度表示
  - 明度、饱和度：通过百分数表示，饱和度100%表示最高饱和度，明度50%为标准色，100%为白色
```
 h1{color:rgb(100,100,90);}h2{color: #ee3e80;}p{color: DarkCyan;}h3{color:hsl(0,100%,78%);}
```
CSS的注释是/* 这里是注释*/
使用background-color指定背景色
- CSS在处理每个HTML元素时，都假定它们位于一个方形的盒子里，backfround-color属性设置的就是这个盒子的背景色
- 如果没有指定背景色，默认是透明的
透明度，两种方法设置：
- opacity属性，值介于0.0~1.0，表示透明度，0.5表示百分之50的透明度
- rgba:最后的一个a就表示alpha透明度，值在0.0~1.0之间
- hsla:最后一个a也表示alpha透明度

盒子

要使盒子在页面上居中显示，可以通过把 left-margin 和 right-margin 属性的值设置为 auto
- 注意：要居中显示，需要为盒子指定一个宽度，（否则它将会占满整个页面的宽度）
- 要使整个页面居中显示，可以把整个页面位于一个<div>元素中。
- 该元素通过margin属性将其左侧外边距和右侧外边距的值设置为 auto
  - 从而使<div>中的元素（这里也就是整个页面盒子）居中显示
    下图想要让小女孩图片居中显示，但需要注意小女孩图片的盒子已经占满了整个页面的大小（如红色方框所标识），需要先为这个盒子指定大小，然后为这个图片利用margin属性，（对大盒子（黑色）中的小盒子（红色）使用margin)
display 元素可以实现内联元素和块级元素之间的转换，有几个值
- inline ：该值可以使一个块级元素变现得像一个内联元素
- block ：该值可以使一个内联元素表现得像一个块级元素
- inline-block ：该值可以使一个块级元素像内联元素那样浮动显示，但是这个块级元素的其他块级元素特性 还将继续保持
- none ：该值将一个元素从页面中隐藏（就像没有一样，连位置也不保留）
- 盒子的隐藏： visibility 设置值为 hidden可以将元素隐藏，该元素的位置显示空白（隐藏的时候位置还是会保留），设置为visible则可以显示出来

列表、表格和表单

列表

项目符号样式：设置 list-style-type 属性，它有几个值：
- 无序列表：
  - none （列表项目前显示空的，什么都不显示）
  - disc （列表项目前显示实心圆）
  - circle （列表项目前显示空心圆）
  - square （i了表项目前显示实心方块）
- 有序列表：
  - decimal （列表项目前显示数字）
  - decimal-leading-zero （列表项目前显示01 02 03这样的数字（方便对齐））
  - lower-alpha （列表项目前显示小写字母（按字母表顺序））
  - upper-alpha （列表项目前显示大写字母（按字母表顺序））
  - lower-roman （列表项目前显示小写的罗马数字: i ii iii）
  - upper-roman （列表项目前显示大写的罗马数字 I II III）
项目图像：设置 list-style-image属性（在项目列表前显示图片（比如五角星之类））
- 该属性的值以 url开头，后面跟着一对圆括号，在括号里面用双引号给出图片的位置路径
- 该属性可以应用到 <ul> 和 <li> 元素中
- 例：(该例中还应用了margin属性，它用来增加列表项目之间垂直方向上的间隙）

	ul{list-style-image:url("image/star.png");}li{margin: 10px 0px 0px 0px;}

标记的定位: list-style-position 属性，两个值
- outside: 默认的值，表明标记位于文本的左侧
- inside:表明标记位于文本的内部，文本块会被缩进
列表的快捷方式
- 可以按照任意顺序表示标记的样式、图像和位置属性
```
list-style: inside url("../img/sterRed.png");
```

表格

表格属性常用的：

table{empty-cells:hide;//* 也可以 show   hide  inherit(如果一个表格嵌套在另一个表格中，可以使单元格遵循外部表格的规则）**/border-spacing: 5px 15px;/**   可以一次指定两个值，分别控制横向距离与纵向距离   **//** 还有border-collapse 属性，两个值： collapse 和  separate  。 （如果用了collapse值，则border-spacing值会失效，separate不会失效）**/width:900px;}th,td{padding:7px 10px 10px 10px;}th{text-transform:uppercase;border-bottom:2px solid #111111;border-top:1px solid #999;text-align:left;}tr.even{/**交替改变表格的背景色**/background-color:#efefef;}tr:hover{/**用户把鼠标悬停在某一行时高亮显示**/background-color:#c3e6e5;}	}

表单

提交按钮样式：
- color 用于控制按钮上的文本的颜色
- text-shadow 用于显示3D效果的文本
- border-bottom 用于使按钮下方的边框稍微粗一点，从而使3D效果更加逼真
- background-color 可以使提交按钮从周围的项目中凸显出来。（最好让按钮的样式保持一致性）
```
input#submit{
color:#444444;
text-shadow:0px 1px 1px #ffffff;
border-bottom:2px solid #b2b2b2;
background-color:#b9e4e3;
}
input#submit:hover{/** 悬停时候**/color:#333333;border:1px solid #a4a4a4;border-top:2px solid #b2b2b2;background-color:#a0dbc4;
}
```

布局

定位机制：
- 普通流（默认情况）：
  - position:static 语句可以设置
  - 每个块级元素都换行显示（如段落一个接一个地垂直向下排列）
- 相对定位：
  - position:relative语句设置
  - 通过设置 top 、 bottom 、 left 、 right来使其上下左右移动
  - ```
  p.example{position:relative;top:10px;left:100px;}
```
- 相对定位中，元素还是会位于在普通流中所处的位置，但是可以在原来的位置上下左右移动
- 绝对定位：
  - 完全脱离普通流
  - 直接假设页面上什么元素都没有，自己可以随便排放
  - 使用绝对定位的元素随着页面的滚动而移动
  - position:absolute 指定绝对定位
  - 盒子的位移属性用于指定它相对于它的包含元素应该显示在什么位置
```
h1{position:absolute;top:0px;left:500px;width:250px;}
```
  - 固定定位是绝对定位的一种形式
    - 相对于浏览器窗口进行定位，当页面上下滚动时，它不会移动
    - 通过position:fixed设置固定定位
```
h1{position:fixed;top:0px;left:0px;padding:10px;margin:0px;width:100%;background-color:#efefef;}
```
浮动元素
- 浮动一个元素可以让其脱离普通流，允许你将它在它的包含元素内尽可能地向左或向右排列
- 这个浮动的元素会成为一个周围可以浮动其他内容的块级元素
- 使用浮动元素可以使浮动元素并排
- clear属性用于表明一个盒子的左侧或者右侧不允许浮动元素（在同一个包含元素内），有几个值
  - left：盒子的左侧不能接触同一个包含元素内的其他任何元素
  - right：盒子的右侧不能接触同一个包含元素内的其他任何元素
  - both：盒子的左侧和右侧都不能接触同一个包含元素内的其他任何元素
  - none：盒子的两侧都可以接触元素
- 如果一个包含元素只包含了一个浮动元素，有些浏览器就会将它的高度看成0像素
  - 解决方案：
    - 在包含元素的样式中加入两条CSS规则
      - 将overflow属性的值设置为auto
      - 将width属性的值设置为100%
```
<div><p> "life is what happens when you are making other plans"——Doctor.Wei </p>
</div>
```
```
div{overflow:auto;width:100%;}
```
- 利用浮动创建多列式布局
  - 每一列都用一个 <div> 元素表示
  - 下面三种属性用于将多个列并排到一起：
    - width：设置列宽
    - float：该属性用于将多个列并排
    - margin：该属性用于在列之间创建空隙
```
<div class="columnlof2"><h3>title1</h3>
</div><div class="columnlof1"><h3>title2</h3>
</div>
```
```
.columnlif3 , .column2of3{width:300px;float:left;margin:10px;}
```
任何元素从普通流中脱离，盒子都会产生重叠，可以使用z-index属性来控制那个盒子显示在上层

如果要使用多个样式表，有两种方法：

在html中使用多个link

<head><title>Multiple Style Sheets - Link</title><link rel="stylesheet" type="text/css" href="css/site.css"/><link rel="stylesheet" type="text/css" href="css/tables.css"/>
</head>

后面用的样式表可能会覆盖前面的效果

在css中的开头使用**@import**
```
@import url("table.css");
@import url("typography.css");
```
- 浏览器会把import语句换成相应的css文件

图像

为图像指定大小有助于更加流畅地加载页面（页面其余部分不必等图片加载出来再进行加载）
常用大小：
- 小：220*360
- 中：330*210
- 大：620*400
可以确定在全站内通用地图像的大小，然后为每种大小指定一个名称，如：small, medium, large.然后将这些名称作为html的class特性的值使用，而不必使用height, width。然后在CSS中用类选择器给他们设定宽度和高度
注意默认情况下，图像属于内联元素
- 如果要使图像居中，需要把它转化成块级元素
- 通过将display属性设置为block就可以完成转换
- 转换完成后有两种方法将其水平居中
  - 对于图像的包含元素而言，将它的text-align属性设置为center
  - 对于图像本身而言，可以使用margin属性将它的左右外边距设置成auto
背景图像：
- 默认情况下，背景图片会重复直到填满整个盒子
```
body{background-image:url{"images/pattern.gif");}
```
- background-repeat属性可以选用下列四个值中的一个：
  - repeat：背景图像在水平方向和垂直方向上都进行重复（默认显示方式）
  - repeat-x只在水平方向上重复
  - repeat-y只在垂直方向上重复
  - no-repeat背景图像只显示一次
background-attachment属性用于指定背景图像在用户滚动页面时的移动方式，是位置固定不变还是随页面滚动。它有两个值：
- fixed固定位置
- scroll随用户上下滚动页面而上下滚动
- background-size:cover可以让背景图片比例放大铺满整个页面
背景图像定位background-position：
- 如果背景图像不进行重复，可以使用background-position属性来指定背景图像在浏览器窗口中的位置。该属性通常有两个值：第一个值表示水平位置（左、中、右），第二个值表示垂直位置（顶、中、底）
  - left top
  - left center
  - left bottom
  - center top
  - center center
  - center bottom
  - right top
  - right center
  - right bottom
- 如果只能指定一个值，那么第二个值默认是center
- 还可以使用一对像素值或者百分数。这些值表示与浏览器窗口（或者包含盒子）左上角的距离
  - 左上角相当于0% 0%
  - 使用50% 50%可以使图像在水平和垂直方向上都居中
- 简写：background属性
- background属性必须按照以下顺序来指定，不想指定某个属性就忽略
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
CSS3还支持重复使用background简写
```
div{background:url(example-1.jpg) no-repeat top left,url(example-2.jpg) no-repeat bottom left,url(example-3.jpg) repeat-x center top;}
```
- 第一个图象显示在顶部，最后一个图像显示在底部
- 图像翻转：
  - 使用子画面,利用背景图像的移动（background-position)（事先设置好高度）实现图像样式的变更
  - 使用子画面的优势在于浏览器只需要请求一个图像（某个按钮的集成大图像）而不必加载每一个按钮图片样式，这可以使网页的加载更迅速

渐变：

通过background-image来实现渐变
并非所有的浏览器都支持渐变，最好为应用渐变的盒子指定一个背景图像（作后备）

不同的浏览器使用不同的渐变语句，所以为了确保不同用户浏览器中渐变效果都能实现，都要写出来

火狐浏览器：background-image:-moz-linear-gradient(#333666,#66cccc);
Safari 4+ , Chrome 1+ 浏览器：background-image:-webkit-gradient(linear,0% 0% 100% ,from(#66cccc),to(#336666));
Safari 5.1+ , Chrome 10+:background-image:-webkit-linear-gradient(#336666,#66cccc);
Opera 11.10+:background-image:-o-linear-gradient(#336666,#66cccc);