CSS学习总结

一、什么是CSS？

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

网页的内容是由 HTML的元素构建的，这些元素如何呈现则由CSS来处理，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

二、CSS语法

CSS主要由两个部分构成：选择器、声明(可以对应多条)

如上的规则表示页面中的一级标题都显示成蓝色并且字体大小为12个像素

选择器

由于页面中的元素众多，所以为了将某种样式单独应用给某个元素，我们可以使用 id选择器 和 class选择器 。

HTML文件：

<p id="forest">绿色的森林</p>
<p class="backgroud">蓝色的背景</p>

CSS文件：

/*id选择器前面带有"#"号*/
#forest{
	color:green;
}
/*class选择器前面带有"."号*/
.backgroud{
	color:blue;
}

颜色

颜色可以用名称或者RGB值来表示

<p style="color:bule;">这是蓝色</p>
<p style="color:#ff0000;">我是红色</p>

尺寸

用height和width来设定元素占据的尺寸
常见单位：像素px以及百分比%

.class-1{
	height: 100px;/*表示该元素高100像素*/
	width: 100%;/*表示该元素占据全部宽度*/
}

盒子模型

HTML 元素可以看作一个盒子，从内到外。
如图所示：

说明：
Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

定位

position属性用于对元素进行定位。该属性有以下一些值：

static 静态：默认定位方式，即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。
relative 相对：这将把元素相对于他的静态（正常）位置进行偏移
fixed 固定：这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）
absolute 绝对：将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。

溢出

元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

浮动

使用 float 属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。

 .example-float-right {
      float: right;
 }

以上属性使得元素向右浮动

不透明度

可以用opacity对任何元素设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高
如下图所示：

 .opacity-5 {
      opacity: 0.5;
}

组合选择器

除了id选择器和class选择器还有组合选择器
分为后代选择器和子选择器
主体的如下：

<div class="yellow">
    <p>P1</p>
    <span>
        <p>P2</p>
    </span>
</div>
<p>P3</p>

后代选择器(用空格分隔)：

.yellow p {
      background-color: yellow;
 }

p1和p2都是黄色，p3由于不在yellow类中所以没颜色

子选择器(用>分隔)

.yellow > p {
      background-color: yellow;
 }

只有p1是黄色，p2因为其父元素是span所以没颜色

伪类和伪元素

当有以下需求时，我们需要使用伪类或者伪元素：
(1)鼠标移到某元素上变换背景颜色
(2)超链接访问前后访问后样式不同
(3)离开必须填写的输入框时出现红色的外框进行警示
(4)保证段落的第一行加粗，其它正常
语法如下

/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
  property:value;
}

a:link {color:#FF0000;}     /* 未访问的链接 */
a:visited {color:#00FF00;}  /* 已访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标划过链接 */