1 CSS基础
1.1 认识CSS
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。它在对多种相同标签内容的样式进行改变时候，可以直接使用一个声明既可。css 样式由选择符和声明组成，而声明又由属性和值组成，如图1-1所示。
图1-1
例如：p{ font-size:12px; color:red;} 可以该代码模块中，对所有<p>标签内容更改样式。如图1-2所示。
图1-2
1.2 CSS基本样式
从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。
内联式css样式表就是把css代码直接写在现有的HTML标签中，如：<p style="color:red">这里文字是红色。</p>，这里就只对该<span>标签样式更改。
嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。这就可以对所有代码内所有该类型的标签进行样式更改。如图1-3所示。
图1-3
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，这是在程序开发的时候经常使用的CSS样式。语法：<link href="base.css" rel="stylesheet" type="text/css" />。
其中优先级：内联式 > 嵌入式 > 外部式。最靠代码内层的，最优先。
2 CSS选择器
选择器是指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。而网页中元素有很多，下面依次学习。
2.1 标签选择器
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>、<span>。这就如第一节所使用的
2.2 类和ID选择器
类选择器在css样式编码中是最常用到的，原理就是使用<span>标签将所需更改的内容独立出来，并命名为一个类，然后使用：.类选器名称{css样式代码;}既可。如图2-1。注意，一个标签可以设置多个类。
图2-1
ID选择器，就是为标签设置id="ID名称"，ID选择符的前面是井号（#）号，而不是英文圆点（.）。但是ID只能使用一次，不能重复。而且，一个标签不可以设置多个ID。如图2-2所示。
图2-2
2.3 子选择器和后代选择器
子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。就是选定的标签内容中，有多层模块化的标签，如嵌套的<span>，带有选择项的<li>等等。只会选择第一层的标签内容，如图2-3所示。
图2-3
其中还有包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。这里就是将选定的标签内容中里所有层的内容进行改变，而不像子选择器只是更改第一层内容。如图2-4所示。
图2-4
2.4 分组选择器
标签选择器可以组合使用，简化代码。如图2-5所示。
图2-5
2.5 样式性质
样式都有一些性质，CSS有继承，特殊和叠层性质。
继承是样式不仅应用于某个特定html标签元素，而且应用于其后代。比如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，如子元素为span标签，li标签等等。
特殊性，也是优先性。若不同选择器选择同一内容，但是样式设置不同，这里就要看选择器的权值大小了，权值越高越优先。标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。 如图2-6所示。
图2-6
当然，也会有权值相同的时候。当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。如图2-7所示。
图2-7
我们也可以使用代码来，直接将某一样式的权值设置为最高。例如：p{color:red!important;}。效果如图2-8。
图2-8
3 CSS排版
3.1 文字排版
文字排版就是对文字样式进行设置，常用有字体、字号、颜色、粗体、斜体、下划线、删除线等。语法如下：
字体：{font-family:"宋体";} 字号和颜色：{font-size:12px;color:#666}
粗体和斜体：{font-weight:bold;font-style:italic;} 下划线：{text-decoration:underline;}
删除线：{text-decoration:line-through;}
3.2 段落排版
段前缩进：{text-indent:2em;}。2em代表缩进的字符数。
行高：{line-height:1.5em;}
字母间隔: {letter-spacing:50px;} 单词间隔：{word-spacing:50px;}
对齐方式：{ text-align:center/left/right;}
这些文字排版和段落排版，效果很简单，不在使用图片介绍。
4 CSS盒模型
4.1 元素类型
CSS有三类元素。 块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>。所谓块级元素，就是元素是独立单独的一块，单独可以排版的，高度、宽度、行高等等都可以单独设置。
常用的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>。内联也叫行内元素，就是在某一行中的元素，它不是独立排版，高度、宽度、行高等等不可以单独设置。
常用的内联块状元素有：<img>、<input>。这种同时具备块状和内联元素的特点，它也是在某一行中的元素，但是可以独立排版，高度、宽度、行高等等都可以单独设置。
4.2 盒模型
4.2.1 边框
盒子模型是指包装网页内容的类似物品包装盒子的一个模型，所有块状元素都具有该模型性质。外围称为盒子的边框，盒子与盒子之间称为外边距，内容到边框之间称为内填充。这三者都有四个方向：top,left,right,bottom。
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
1、border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用像素（px）。
CSS允许只为一个方向设置边框属性。div{border-bottom:1px solid red;}，如图4-1所示。
图4-1
4.2.2 宽度、高度
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。高度也如此。比如图4-2：
图4-2
元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px
4.2.3 填充和边界
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。可以div{padding:20px 10px 15px 30px;}，也可以div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px;}。
同样，元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。
5 布局模型
在网页中，元素有三种布局模型：流动模型（Flow），浮动模型 (Float)，层模型（Layer）
5.1 流动模型
流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。内联元素都会在所处的包含元素内从左到右水平分布显示。如图5-1所示。
图5-1
5.2 浮动模型
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。浮动则让两个块状元素并排显示。div{ width:200px; height:200px; border:2px red solid;float:left;} ，这里是让<div>左浮动。如图5-2所示，让两个<div>向左右两边浮动。
图5-2
5.3 层模型
层模型在网页中使用不多。有三种定位方式 ：绝对定位、相对定位、固定定位。类型定义语法：
{position：absolute；relative；fixed }
绝对定位：以一个固定的父级包含块的位置为参考，进行定位。div{ width:200px; height:200px; border:2px red solid;position:absolute; left:100px;top:50px;} 这句话就是以body处，距离左边界100像素点，距离上边界50像素，如图5-3所示.。
图5-3
相对定位：以之前元素在默认的情况位置为参考，进行偏移的定位。
固定定位：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。它会一直保持在窗口的某处。
网友评论