鹿酒的博客

CSS基础知识

2016/9/21 CSS

CSS是网页的样式表现。

由于HTML的默认样式很单调，所以我们需要CSS来调节样式，使单一的文字变得更优雅。

# CSS的使用

css的使用分为三种，分别是：行内（内联）样式、嵌入样式、外部样式。

# 行内样式

在标签内写样式。

一般不使用，因为会使文档结构发生混乱，但在某些时候还是必须的。

<div style = "width: 200px;height: 200px;color: #CCC;">
 我是内容。
</div>
1
2
3

# 嵌入样式

在html页面<head>标签内部写。

不建议使用，会使html文件变得臃肿。如果是偷懒... o(一︿一+)o

<head>
 <title>HelloWorld</title>
    <style>
     .test{width: 200px;height: 200px;color: #CCC;}
    </style>
</head>
1
2
3
4
5
6

# 外部样式

在html内调用外部的css文件。

很好的方法，正是CSS禅意花园所主张的理念：结构与表现分离（一个HTML文件匹配不同的CSS，产生多重效果。）

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

# 语法格式

# 单一选择（一般情况）

css的语法很简单：选择器{样式1;样式2; ··· }

p{color: red;font-size: 18px;}
1

# 分组选（复用时）

语法：选择器1,选择器2{样式1;样式2; ··· }

/*初始情况*/
h1{color:#3FF;}
h2{color:#3FF;}
h3{color:#3FF;}
h4{color:#3FF;}

/*汇总后*/
h1,h2,h3,h4{color:#3FF;}
1
2
3
4
5
6
7
8

# CSS选择器

# 基本的选择器

包括元素选择器、id选择器、类选择器

# 元素选择器

含义：html中所有的<p>标签全部都应用以下样式

格式：元素名{样式}

p{font-size: 32px;color: #321;}
1

# id选择器

含义：html中id对应的标签应用以下样式

格式：#id{样式}

<!--在HTML文件中-->
<div id = "head"></head>
1
2
/*在css文件中*/
#head{width: 100px;height: 150px;}
1
2

# 类选择器

含义：html中所有拥有对应class的标签都应用以下样式

格式：.id{样式}

<!--在HTML文件中-->
<div class = "foot"></head>
1
2
/*在css文件中*/
.foot{width: 100px;height: 150px;}
1
2

# 选择器的进阶

刚才说了使用频率最高的选择器，还有其他一些很重要的选择器需要我们会使用。

这些选择器可能会简化我们的文档（减少class的滥用），或是优化逻辑结构。

# 属性选择器

语法：选择器【属性值】{样式}

/*把有href属性值的<a>标签，都应用此样式*/
a[href]{color: #622;}
1
2

# 后代元素选择器

选择包含在元素内的所有后代元素元素（包括后代的后代）。

尽量使用这个而不是类选择，会减少运行时间，优化网页打开的速度

语法：元素 元素1{样式}

/*所有<div>内的<p>的文字显示为蓝色*/
div p{color: blue;}
1
2

# 子元素选择器

选择元素的子元素（只包括第一层的后代）

语法：元素 > 元素1{样式}

/*选择<div>的子元素层的<p>标签，应用文字变蓝的样式*/
div > p{color: blue;}
1
2

# 相邻兄弟选择器

选择元素同父元素的兄弟元素

语法：元素 + 元素1{样式}

/*使<div>相邻的兄弟元素<p>使用此样式*/
div + p{color: blue;}
1
2

# 伪类和伪元素

# 伪类

  • 伪类，就是不占结构，但是占用样式的状态
  • 锚伪类，链接使用的伪类。
锚伪类 使用情况
:active 向被激活的元素添加样式。
:visited 向已被访问的链接添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。

当鼠标点击时的激活顺序是：LvHa 1.鼠标没到时，显示link；2.如果点击过，显示visited；3.移动上去，显示hover；4.点击跳转的瞬间显示active

伪类 使用情况
:focus 向拥有键盘输入焦点的元素添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。

focus， 一般是<input>标签输入时的效果；first-child，一般是父元素的第一个子元素；lang，在不同语言下的不同样式

# 伪元素

不占位，占据样式的元素

伪元素 使用情况
first-letter 向文本的第一个字母添加特殊样式
first-line 向文本的首行添加特殊样式
before 在元素之前添加内容
after 在元素之后添加内容

before，after一般用于替代分隔符 " | " ，可以达到更好的样式。

# CSS样式

# 背景background

# 样式简写

格式：background:选项;

可以的选项（选项不需要全写）：background-color；background-position；background-size；background-repeat；background-origin；background-clip；background-attachment；background-image。

div{background: url(1.png)100% 100% no-repeat;}
1

# 子样式

选项 含义
background-color 背景颜色，可以是十六进制，颜色名，RGBA等
background-position 背景定位，分为X、Y轴，可以填百分比或者表示方位的名词
background-size 图片大小，length / percentage / cover / contain
background-repeat X、Y轴的重复，repeat / repeat-x / repeat-y / no-repeat / inherit
background-origin 图片起始点位置，padding-box / border-box / content-box
background-clip 图片被裁减的位置，padding-box / border-box / content-box
background-attachment 图片滚动状态，scroll / fixed
background-image 背景图片地址，可以是URL()或者是none
  1. background-size
    1. length：用数字表示。
    2. percentage：以父元素的百分比设置图片大小。
    3. cover：以元素较长边作为基础，等比扩大背景。
    4. contain：以元素较短边作为基础，等比扩大背景。
  2. background-origin
    1. padding-box 背景图像相对于内边距框来定位。
    2. border-box 背景图像相对于边框盒来定位。
    3. content-box 背景图像相对于内容框来定位。
  3. background-attachment
    1. scroll 默认值。图像随内容滚动。
    2. fixed 图像固定。

# 文字

# font简写

格式：font:选项;

可以按顺序写的选项：font-style；font-variant；font-weight；font-size/line-height；font-family。

div{font: 14px/20px "微软雅黑";}
1

# font样式

  1. font-family：字体样式，名字，若是中文拿 ‘ ’ 括起来
  2. font-style：字体形变，normal（正常），italic（斜体），oblique（倾斜）
  3. font-variant：设置小型大写字母，small-caps
  4. font-weight：字体粗细，数值或对应的名词
    1. normal = 400，默认粗细
    2. bold = 700，粗体
    3. bolder，更粗的
    4. lighter，更细的
  5. font-size：可以设置文字大小，数字，单位可以是px、em(px/父元素)，默认16px

# 文本格式

  1. text-indent：首行文本缩进， 可以继承或是数字 / 百分比

    1. 数字：可以为负值
    2. 百分比：父元素宽度的百分比

  2. text-align： 水平对齐，left / right / center

  3. word-spacing：字（单词）间隔，可以为正、负数字值

  4. letter-spacing：字符与字母间隔，可以为正、负数字值

  5. text-transform：处理文本大小写，none（默认，不改动），uppercase（全变成大写），lowercase（全变成小写），capitalize（首字母大写）

  6. text-decoration：文本装饰，none（默认，不改动），underline（加下划线），overline（加上划线），line-through（文本上加入贯穿线）

    1. blink（文本闪烁，一般不支持）

  7. white-space：处理元素空白的方式

    1. normal 默认。空白会被浏览器忽略。
    2. pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    3. nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
    4. pre-wrap 保留空白符序列，但是正常地进行换行。
    5. pre-line 合并空白符序列，但是保留换行符。

  8. direction：文本输出方式，ltr（默认，从左到右），rtl（从右到左）·

# 列表list-style

ul的li前的圆点

  1. list-style-type：none（无标记），disc（默认，实心圆），circle（空心圆），square（实心方块），decimal（标记是数字）
  2. list-style-position，inside（放置在文本内），outside（默认值，标记位于文本的左侧）
  3. list-style-image，替代图片，URL()

# 表格

  1. border-collapse 设置是否把表格边框合并为单一的边框。
  2. border-spacing 设置分隔单元格边框的距离。
  3. caption-side 设置表格标题的位置。
  4. empty-cells 设置是否显示表格中的空单元格。
  5. table-layout 设置显示单元、行和列的算法。

感觉不怎么用了，所以省略一下了 -_-|||

# 轮廓

border外面的框。

# 轮廓样式简写

格式：outline:选项;

可以按顺序写的选项：outline-color；outline-style；outline-width。

outline: #CCC solid thin;
1

# 轮廓子样式

  1. outline-color：颜色，一般的颜色值都行
  2. outline-style：类型，none（默认，无轮廓），dotted（点状），dashed（虚线），solid（实线）
  3. outline-width：线的宽度，thin（细），medium（默认，中等），thick（粗），length（允许数值）

# 最后说点什么

这篇文章就先写到这里，我会继续更新css篇。

希望十年后看到这里的话时，我还在坚持。

# CSS盒模型

盒子里面就是一片新天地。

# 盒模型

# 盒模型包含什么

css盒模型主视图

如上图所示，css盒模型主要说明了三个属性：border、margin、padding。在平常的使用中，这三个属性是非常非常常用的，所以一定要理解盒模型。

# 盒模型是怎样的

css盒模型侧视图

我理解的盒模型，就是像套娃一样，一层层的叠加起来，主要关注的应该是叠加的次序，也就是层级。

  • margin，是最外层的盒子，表示了与其他盒子之间的距离，就像快递里面的填充物，把里面的小盒子与外面的大盒子分隔开。
  • background，是盒子里面底部的颜色，又因为background分为两种填充：颜色（background-color）、图像（background-image），可能是因为人们更趋向于彩色，所以当既设置颜色又设置图像时，优先显示图像。
  • border，这是边框，继续按照快递的说法，就是小盒子的壁。
  • padding，这是小盒子与内容之间的距离，快递说法里面，这就是我们要买的东西与盒子之间的填充物。
  • padding里面就是我们实际想表示的内容。

要注意的是，按照快递说法理解时，最外面的大盒子是不显示的。

# 数值

这里有一个非常关键的地方，就是大小的问题：在显示多列布局时，总会控制模块宽度，但一定不能简单的以为每块的宽度就是 width。正确的显示应该是：border-left + padding-left + width + padding-right + border-right

margin只占宽度不计入。

# 属性

# 外边距margin

# 语法

margin:top right bottom left;

因为上下左右，分别有四个边距值，所以最多设置四个值。 为什么是最多呢？因为还有两种情况。

.div1{margin: 20px;}  /*四个位置都是一样的就可以简写*/
.div2{margin: 20px 15px;}  /*当上下、左右各自一样时，可以这样简写*/
.div3{margin: 20px 30px 15px 25px;}  /*默认的四个值*/
1
2
3

还有一种写法：就是margin：top right bottom;，这样没有写left的值，但是还可以正确显示，因为此时left值被认为与right值一致。

# 注意点
  1. 存在相邻的margin时，产生的效果不是叠加，而是选取二者中较大值。
  2. 当margin的值选择为百分比时，表示包含块的宽度的百分之几（当文字顺序为上至下，表示包含块高度的百分比。
  3. margin: 0 auto;表示水平居中。

# 内边距

# 内边距语法

padding:top right bottom reft;

与margin填的值一样

.div1{padding: 20px;}  /*四个位置都是一样的就可以简写*/
.div2{padding 20px 15px;}  /*当上下、左右各自一样时，可以这样简写*/
.div3{padding 20px 30px 15px 25px;}  /*默认的四个值*/
1
2
3
# 内边距注意点
  1. 当padding值为百分比时，其含义为父元素宽度的百分之几
  2. 当为负值时：X；padding不支持负值。

# 边框

border分为三组属性：color、width、style，每个属性前可以加方位值left、right、top、bottom。

# 边框语法

可以简写：border: 1px solid #ccc;

也可以分开写：

p {
 border-top-width: 15px;
 border-right-width: 5px;
 border-bottom-width: 15px;
 border-left-width: 5px;
    
 border-top-style: hidden;
 border-right-style: dotted;
 border-bottom-style: none;
 border-left-style: solid;
    
 border-top-color: #ccc;
 border-right-color: #bbb;
 border-bottom-color: #aaa;
 border-left-color: #999;  
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 边框注意点

这里还比较简单，只有style的值比较多，不过常用的就是solid（实线）、dotted（点状线）、double（双实线）。

# CSS定位

# 浮动：float

# 作用

使元素脱离文档流，然后被放在父元素内的左边或者右边。

# 用法

左浮动：float: left;

右浮动：float: right;

# 发展

  • 为了达到word中的文字环绕效果，所以设立了float属性。
  • 在发展的过程中，人们发现float不仅仅适用于文字与图片，还有更多的可能（页面排版等）。
  • 但是随之而来产生了一点问题：浮动破坏了文档的原始结构，使得文字（图片）的位置不可控。
  • 之后人们便大肆利用这点，来实现布局。
  • 然而，这样做并不合适，因为浮动带来的问题更大了，就像一个深藏的炸弹，当再次开发页面时，浮动很可能导致所有结构的混乱。
# 清除浮动
  • 把<div style="clear:both;"></div>放在父标签的最后一个子标签的位置。优点是兼容性强，缺点是浪费一个标签。
  • 添加.fix{overflow:hidden; zoom:1;}类。优点是兼容性强，缺点是当margin为负值时会裁剪。
  • 使用after，添加类.fix{zoom:1;}，.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}。优点是兼容，不影响其他样式。关键的就是生成一个具有clear属性的元素，其中content值可以任意。

# 定位：position

# absolute

# absolute 作用

绝对定位，不保留元素原本位置， 根据元素的第一个包含position属性的父元素定位，如果没有，相对于页面定位。

# 副作用

破坏页面结构，造成父元素塌陷，难以弥补。

不要滥用。

# relative

# relative 作用

相对定位，保留元素原来位置，根据元素原来位置进行偏移。

与z-index组合，效果也很不错。

# relative 副作用

还不知道有什么，感觉是很强大的一个属性。

# static

position的默认值，表示不进行位移。

# CSS权重

不需要硬记：越内联越强，越唯一越强。

css的样式是会继承的，那如何控制覆盖样式呢？

计算方法如下：

MAX —— ！important（IE6不支持），直接最高级，妥妥的！

1000分 —— 内联样式，如: style=””。

100分 —— ID选择器，如：#content{}。

10分 —— 类，伪类和属性选择器，如.content{}。

1分 —— 类型选择器和伪元素选择器，如div{}。

结果很清晰，哪个分值更高就使用哪个！