CSS学习总结

2017-01-13 本文已影响0人姬鸟念渔

学习如逆水乘舟，不进则退。

** 前言 **

前面学习的HTML主要是用来给文本添加语义的，而一个完整的网页要想呈现出界面样式，还需要用CSS来修改样式，才能达到美观的UI效果。下面就是这段时间习CSS的一个小总结。

一、CSS基础知识

概念
- W3C的介绍中介绍 CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素。浏览器将内容装在一个元素里面（一个盒子），然后CSS通过调整盒子背景、大小、颜色、样式、内容的文本以及字体的大小，最后展示出我们需要的排版样式。
- CSS在使用的过程中，有很多的参数需要记忆。特别是还有很多的浏览器的有自己独有的参数，很难记忆。只有多使用，多查文档。用的时候可以到w3c.com中查询
CSS格式：

<style type="text/css">
       标签名称{
           属性名称: 属性对应的值;
           ...
       }
</style>

注意：一定要用一对style标签包裹起来而且必须要写在head标签之内 titile标签的下面。

二、CSS的属性

常用属性

三、CSS的选择器

** 1. 标签选择器 **
- 作用：根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性。
- 格式：
标签名称{
属性：值；
}

例如：
```
p{
    color:red;
    font-size:14px;
}
```
** 2. id选择器 **
- 作用：根据指定的id名称找到对应的标签, 然后设置属性。
- 格式：
```
#id名称{
    属性：值；
}
```
- 注意点：同一个界面中的id名称是唯一的，不能有同名的id。

** 3. 类选择器 **
- 作用：根据指定的类名称找到对应的标签, 然后设置属性。
- 格式：
.类名{
属性：值；
}
- 在HTML中一个标签可以同时绑定多个类名。
例如：
```
< 标签名称 class="类名1 类名2 ... ">
```
- 注意点：同一个界面中的类名称可以重复。

** 4. 后代选择器 **
- 作用：找到指定标签的所有特定的后代标签, 设置属性。
- 格式：
标签名称1 标签名称2 标签名称3 ...{
属性：值；
}

** 5. 子元素选择器 **
- 作用：找到指定标签中所有特定的直接子元素, 然后设置属性。
- 格式：
标签名称1>标签名称2{
属性：值；

}

** 6. 交集选择器 **
- 作用：给所有选择器选中的标签中, 相交的那部分标签设置属性。
- 格式：
选择器1选择器2{
属性：值；
}

** 7. 并集选择器 **
- 作用：给所有选择器选中的标签设置属性。
- 格式：
选择器1,选择器2{
属性：值；
}

** 8. 兄弟选择器 **
- ** 8.1 相邻兄弟选择器 **
  - 作用：给指定标签后面紧跟的那个标签设置属性。
  - 格式：
  选择器1+选择器2{
  属性：值；
  }
- ** 8.2 通用兄弟选择器 **
  - 作用：给指定选择器后面的所有选择器选中的所有标签设置属性。
  - 格式：
  选择器1~选择器2{
  属性：值；
  }

** 9. 序选择器 **
- 作用：选中指定的任意标签然后设置属性。
- ** 9.1 同级别的第几个 **
  - 格式：
  选择器:xxx-child{
  属性：值；
  }
  - 列举3个常用取值
  :first-child 选中第一个标签
  :last-child 选中最后一个标签
  :nth-child(n) 选中第n个标签
- ** 9.2 同级别同类型的第几个 **
  - 格式：
  选择器:xxx-of-type{
  属性：值；
  }

** 10. 属性选择器 **
- 作用：根据指定的属性名称找到对应的标签, 然后设置属性。
- 格式用法如下：
```
input[type=password]{

    做某些操作
}
```

** 11. 通配符选择器 **
- 作用：给当前界面上所有的标签设置属性。
- 格式：
*{
属性：值；
}

** 12. 伪类和伪元素 **
- 作用：在特定的事件触发的时候，调用的CSS的样式，用:号来表示。
- 伪类
- 伪元素

四、CSS的三大特性

** 继承性 **

只给HTML父项设置格式,其所包含的子项也会有相应的属性,要想单个控制,那么就给每个项加class属性,实现一对一控制。

** 注意点：**

并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。

在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承。
继承性中的特殊性:

- a标签的文字颜色和下划线是不能继承的.
- h标签的文字大小是不能继承的

** 层叠性 **
- 作用：CSS处理冲突的一种能力。只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性
- 优先级
  id>类>标签>通配符>继承>浏览器默认

** 优先级的权重 **
- ** 权重的计算规则 **
  1. 首先先计算选择器中有多少个id, id多的选择器优先级最高。
  2. 如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高。
  3. 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高。
  4. 如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的。
- ** 注意点: **
只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
- ** !important **
  - 作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
  - 注意点:
    1. !important只能用于直接选中, 不能用于间接选中。
    2. 通配符选择器选中的标签也是直接选中的。
    3. !important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升。
    4. !important必须写在属性值得分号前面。
    5. !important前面的感叹号不能省略。

五、CSS的显示模式

在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级。
在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素(其实还有一类, 行内块级)
常见容器级标签

div h ul ol dl li dt dd ...

常见文本级标签

span p buis stong em ins del ...

常用的块级元素

p div h ul ol dl li dt dd ...

常用的行内元素

span buis strong em ins del ...

** CSS元素显示模式转换 **

display: block(块级) / inline(行内) / inline-block(行内块级);

六、CSS的盒模型

盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签

内容的宽度和高度
- 就是通过width/height属性设置的宽度和高度

元素的宽度和高度
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框 (同理可以算出高度)
增加了padding/border之后元素的宽高也会发生变化，如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高

元素空间的宽度和高度
- 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距 (同理可以算出高度)

七、透明度设置

 opacity：0   完全透明

 opacity：1   不透明

八、CSS插入样式表

内嵌式

<span style="color:blue;font-size:12px">内嵌式</span>

嵌入式

<style type="text/css"> span{ color:red; } </style>

外链式

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

九、补充

多行文字垂直居中的方法
- 父元素的高度必须要用line-height属性撑高，不能用height属性设置。
- 文字必须得用一个行内块元素（display：inline-block;）包裹住，然后设置这个行内块元素的行高（line-height;）。
- 最后还需要设置vertical-align：middle;

注意：

如果一个盒子没有设置高度，那么它的高度是被它当中的 line-height撑高的，并不是被文字撑高的。
如果想要vertical-align属性生效，那么元素必须是一个 inline 或者 inline-block 元素。

CSS学习总结

一、CSS基础知识

二、CSS的属性

三、CSS的选择器

四、CSS的三大特性

五、CSS的显示模式

六、CSS的盒模型

七、透明度设置

八、CSS插入样式表

九、补充

猜你喜欢

热点阅读