大家应该会有同感，都会觉得女生化妆后比较漂亮吧！我们页面也是一样，单纯的html结构是很丑的，我们怎么样才能实现完美的页面呢？这就需要用到css。
css技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制（说白了就是使页面更漂亮）。
1.什么是 CSS?
• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示HTML元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在CSS 文件中
• 多个样式定义可层叠为一个
样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
image.png
/* 这是个注释 */
p{
text-align:center;
/* 这是另一个注释 */
color:black;
font-family:arial;
}
2.如何使用CSS？
CSS 可以通过以下方式添加到HTML中:
2.1.内联样式- 在HTML元素中使用"style"属性
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
本例展示如何改变段落的颜色和左外边距：
image.png
2.2.内部样式表-在HTML文档头部 <head> 区域使用<style>元素来包含CSS
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样：
image.png
2.3.外部引用-使用外部 CSS文件
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
image.png
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
image.png
3. css常用选择器
1、标签选择器（如：body,div,p,ul,li）。
2、.类选择器（如：class="head",class="head-logo"） 。
3、ID选择器（如：id="name"）。
4、全局选择器（如：*号）。
5、 .组合选择器（如：.head .head-logo,注意两选择器用空格键分开）。
-
后代选择器(以空格分离) div p
-
子元素选择器(以大于号分隔）div>p
描述：第一层子元素
image.png
-
相邻兄弟选择器（以加号分隔）h1+p
描述：接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素
image.png
- 普通兄弟选择器（以破折号分隔）div~p
描述：元素之后的相邻兄弟元素。
image.png
6、伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover）。
上述几种css选择器中最常用的css选择器是标签选择器、.类选择器、ID选择器、属性选择器、伪类选择器。
4.常用属性
4.1 .文本
- color：颜色; 文字颜色（三种方式:关键词、rgb、十六进制颜色）;
- text-align: left \ right \ center; 文本对齐方式
- text-indent:具体数值; 首行缩进
单位：em -> 1em = 当前设置的这个元素上的文字大小，想缩进两个文字?
2em就好啦 - text-decoration:修饰值; 文本修饰;
none; 去除
underline 下划线
overline 上划线
line-through 删除线（不要5980，不要只要1980！）
4.2. 字体
-
font-weight:bold; 字体加粗
-
font-style:italic;字体样式 倾斜
font-weight \ font-style 如果想要去除的话，可以使用normal -
font-size：数值px; 字体大小
谷歌最小显示字体为12px，小于12px的，都按照12px处理
不设置的情况，一般默认为16px的大小 -
font-family：字体样式名字; 字体
中文常用：微软雅黑、宋体 （中文必须写在引号内）
英文常用：Arial、Helvetica
首选字体放在前面，备选字体放在后面
image.png
font 简写属性在一个声明中设置所有字体属性。
可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"
image.png
4.3.边框border
一个边框的设置，需要设置边框的宽度、颜色、边框的样式
-
border-width 边框宽度（单位：px）
-
border-color 边框颜色（三种形式）
关键词（英文颜色单词，例如：red）
rgb（三原色，利用ps工具获取这些数值）
十六进制颜色（利用ps工具获取数值，一般是3位或者6位）如果1和2,、3和4、5和6位都是一样的，就可以简写为三位
例如：#ff9900 =》 #f90 是一样的
#ffffff =》 #fff 是一样的 -
border-style 边框样式（三种形式）
solid 直线
dotted 点虚线
dashed 方虚线
复合样式： border：边框宽度 边框样式 边框颜色 ;
以空格进行间隔。
多值书写：
一个值（上下左右）
两个值（上下 和 左右）
三个值（上 和 左右 和 下）
四个值（上 和 右 和 下 和 左）
border-color:#000;
border-color: #000 #333;
border-color: #000 #333 #999;
border-color: #000 #333 #999 #f63;
4.4 .background 背景
CSS 属性定义背景效果:
• background-color
• background-image
• background-repeat
• background-position
• background-attachment
4.4.1- 背景颜色background-color
background-color：颜色; （三种形式颜色值：关键词、rgb、十六进制颜色值）
4.4.2- 背景图片background-image
background-image：url(背景图片地址);
4.4.3- background-repeat
background-repeat: repeat\repeat-x\repeat-y\no-repeat;背景重复
4.4.4- background- position
background-position:位置;背景定位 控制背景的位置
4.4.5- background- attachment
background-attachment：fixed\scroll;背景滚动
背景是跟随滚动条滚动（scroll），还是固定当前位置（fixed）
这个值会影响到背景定位，从基于当前元素，变成基于可视区
复合样式：background:背景颜色 背景图 背景重复 背景定位 背景跟随滚动;
学习css（层叠样式表）最好的一种方式是直接开始使用它。
网友评论