CSS 简明教程

CSS

不对css做全面的讲解，而是将常用的知识点列出，并且，还会辅以常用的css技巧，保证在学完后，能写出一个可以看的页面

其实，对于非前端程序员来说，没必要将css学的那么深入，我们主要会使用流行的前端框架，就可以了。

样式的分类

优先级，是 行内样式>内部样式>外部样式

选择器

选择器优先级：id选择器 > 类选择器 > 标签选择器

• id 选择器

<p id="haha"></p>

#haha {
  //...
}

• 类选择器

<p class="haha"></p>

.haha {
  //...
}

• 标签选择器

<p></p>

p {
  //...
}

宽度和高度

只要块级元素才可以设置宽度和高度

行级元素设置，是没有效果的

设置 width 和 height 即可

背景

背景色

使用 background-color

背景图

字体

大小，样式，粗细

单行文字垂直居中

让高度和行高一样

文字间距

列表样式

修改 li ol这些

边框样式

盒子模型

padding/margin 4 个值时，表示的是什么

margin: 1px 2px 3px 4px;

这表示的，是 上 右 下 左 四个方向的属性

padding/margin 2 个值时，表示的是什么

margin: 0px 10px;

表示 上下为0 左右为10

box-sizing: border-box

margin 0 auto 是什么意思

margin 0 auto，表示 上下0，左右auto

选择器

全局选择器

选中页面上的所有标签

一般是用来取消默认样式 或者是保持整站风格的

* {
				margin: 0;
				padding: 0;			
	}

要注意，有些浏览器，自带的body是有默认样式的，我们需要使用全局选择器，将其 margin 和 padding 全部设置为 0，就像上面那样

并集选择器

交集选择器

父类选择器

子选择器

伪类选择器（重点）

主要是为了为标签添加特殊效果

用的最多的是为超链接添加效果（比如鼠标放在上面后，显示的效果）

注意，如果要写这四个，那顺序最好不要变，不然，可能会出现错误

float

块状元素，都是新开一行显示的

但是，使用float，能使他们在同一行显示

去除 float 对其他标签的影响

需要专门为其他元素，设置取消浮动的影响：

both是两边都去除影响

还有right 和 left

.clear {
			clear: both;
}

一开始，要去除浏览器默认样式

浏览器是有默认样式的，会导致我们的元素与边框有一定距离，我们要用css去除

<style>
			* {
				margin: 0;
				padding: 0;
			}
</style>

a 标签，很傲娇

我们设置某一元素的属性时，对 a 标签，是不生效的，我们要单独为其设置

a {
				text-decoration: none;
				color: black;
}

display 和 visibility 的区别

display: nono：不显示，也不占据空间

visibility: hidden：不显示，但是占据空间

设置 inline，block，inline-block

有时候，我我们希望元素既可以像行级元素一样，可以同行显示，也可以向块状元素一样，可以设置宽高，这时候，我们就应该将这个元素，设置为 inline-block

写法：

display: inline-block;