CSS

CSS是什么

CSS全称是 Cascading Style Sheets，翻译过来就是层叠样式表。

1. 样式表：所谓样式就是我们看到的HTML长什么样子，就是外观，也就是样式，CSS用来描述HTML具体长什么样子

2. 层叠：层叠指的是样式的优先级，当作用于相同元素的CSS规则产生冲突时以优先级高的为准

* CSS 层叠是指 CSS 样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的 CSS 选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。每个 CSS 选择器都会有一个权重（行内1000，id100，class10，tag1、可以这样认为，也可以分为a、b、c、d等级，当然实际上意义是不变的），当两个选择器同时配置同一元素的同一属性时（比如一个设置color：red，另一个 color：black），就会产生冲突，而解决冲突的方案就是 CSS 选择器的权重，权重高的来覆盖权重低的。

CSS意义

把页面的结构和样式分离，

以前的页面HTML和CSS是没有区分的，都是HTML。

在新式的页面中HTML只表示结构和内容，样式部分交给CSS控制，做到了内容和表现分离，方便维护。

带来的好处：

1. 文件的可读性加强
2. 文件的结构更加灵活
3. 作者和读者可以自己决定文件的显示
4. 文件的结构简化了

引入方式

1.外部（外联）样式

<link rel="stylesheet" type="text/css" href="xxx.css">

2.内部（内嵌）样式

<style type="text/css">

3.行内样式

<div style="color:red; font-size:12px;">123</div>

4.导入样式

@import url("public.css");

导入样式是以 @import url 标记所链接的外部样式表，它一般常用在另一个样式表内部。

如 main.css 为主页所用的样式表，我们可以把全局都需要用的公共样式放到一个 public.css 文件中，

然后在 main.css 中以 @import url("public.css"); 的形式链接全局样式，使代码达到很好的重用性。

继承特性

CSS的一个主要特征就是继承，它是依赖于祖先-后代的关系的。

继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

例如一个 body 定义了的颜色值也会应用到段落的文本中。

有些属性是不能继承的。这没有任何原因，只是因为它就是这么设置的。

举个例子来说：border属性是用来设置元素的边框的，它就没有继承性。

多数边框类属性，比如象 padding（补白），margin（边界），背景和边框的属性都是不能继承的。

 

CSS 常用属性

width & height

<div style="300px;"> 123 </div>
<img src="https://www.baidu.com/img/bdlogo.png" style="height:100px;"/>

这两个属性用来定义元素的宽度和高度，使用很简单。

但这两个属性并不是所有的元素都生效。

对于 p、div 等独占一行的块元素是可以随意使用的，但是对于 span 等行内元素是不生效的，行内元素空间靠内容撑开。

font

• font-size：字体大小
• font-family：字体，宋体、微软雅黑、Arial等
• font-weight：文字粗度，常用的就是默认值 regular 和粗体 bold
• line-height：行高，可以用百分比、倍数或者固定尺寸

span{
  line-height: 1.5;
  font-size: 14px;
  font-family: Arial,'微软雅黑','宋体';
  font-weight:bold;
}

文本

• text-align：文本对其方式 left、center、right、justify
• text-indent：文案第一行缩进距离
• text-decoration： none、underline、line-through、overline
• color：文字颜色
• text-transform：改变文字大小写none、uppercase、lowercase、capitalize
• direction：文本方向，ltr、rtl
• word-spacing：可以改变字（单词）之间的标准间隔
• letter-spacing：字母间隔修改的是字符或字母之间的间隔
• white-space
• normal：多个空白符会变为一个，换行变为空格
• pre：空白符不被忽略
• nowrap：防止元素中的文本换行，除非使用了一个 br 元素

background

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中
background-attachment	背景图像是否固定或者随着页面的其余部分滚动
background-color	设置元素的背景颜色
background-image	把图像设置为背景
background-position	设置背景图像的起始位置
background-repeat	设置背景图像是否及如何重复

• background-position：默认左上角

  • x y
  • x% y%
  • [top | center | bottom] [left | center | right]

• background-repeat

• no-repeat：背景图片在规定位置
• repeat-x：图片横向重复
• repeat-y：图片纵向重复
• repeat：全部重复

border

• border-width：边框宽度
• border-color：边框颜色
• border-style：边框样式（solid、dashed）

支持合写

border: 1px solid #333;

padding

padding 代表内边距，有四个方向的值，可以合写

• padding-top
• padding-right
• padding-bottom
• padding-left

padding: 20px; /* padding: 20px 20px 20px 20px; */
padding: 10px 20px; /* padding: 10px 20px 10px 20px; */
padding: 10px 20px 30px; /* padding: 10px 20px 30px 20px; */

margin

外边距，规则和 padding 一样，但是数值可以是负数，而且父边距在布局中十分有用处

外边距合并

边距合并（叠加）是一个简单的概念。

但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开）

它们的上和/或下外边距也会发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。

在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。

如果这个外边距遇到另一个元素的外边距，它还会发生合并。

那为什么会有外边距合并这种机制呢？

原因都在这张图里了。

水平对齐

对于宽度固定的块元素，设置左右 margin 值为 auto 可以达到元素水平对齐的效果。

<div style="600px;margin:0 auto;"></div>