页面化妆师css

大家应该会有同感，都会觉得女生化妆后比较漂亮吧！我们页面也是一样，单纯的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

$\color{red}{注意点：不要在属性值与单位之间留有空格（如："margin-left: 20 px"），正确的}$
$\color{red}{写法是"margin-left:20px"}$

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选择器、属性选择器、伪类选择器。

$\color{red}{ 优先级：总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 标签 >浏览器}$
$\color{red}{ 默认属性}$

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
首选字体放在前面，备选字体放在后面

$\color{red}{注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。 }$
$\color{red}{ 多个字体系列是用一个逗号分隔指明： }$

image.png

font 简写属性在一个声明中设置所有字体属性。
可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"

image.png

$\color{red}{font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，}$
$\color{red}{如果有默认值的话。}$

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（层叠样式表）最好的一种方式是直接开始使用它。