CSS学习笔记

2018-11-17 本文已影响0人又差一点

CSS常用知识点

css概述：Cascading Style Sheets：层叠样式表

使用div标签+css编辑网页

css的简单语法：
- 在一个style标签中编写css内容，sytle标签最好写在head标签中

css的引用方式：

外部样式：通过link标签引入一个外部的css文件

<!DOCTYPE html>
<html>
  <head>
      <!--这是head-->
      <meta charset="UTF-8">
      <title>Title</title>
      <link rel="stylesheet" href="css/demo.css" />
  </head>
  <body>
      <!--这是body-->
  </body>
</html>

内部样式：直接在style标签内编写css代码

<style>
  选择器{
    属性名称:属性的值;
    属性名称2: 属性的值2;
  }
</style>

行内样式：直接在标签中添加一个style属性，编写css样式

css选择器：帮助我们找到我们要修饰的标签或元素
- 元素选择器：
```
元素名：{
    属性名：属性值；
    属性名：属性值
}
```
- 类选择器：
```
以.开头
.类名{
    属性名：属性值；
    属性名：属性值
}
```
- ID选择器：ID在整个页面中必须是唯一的
```
以#号开头
#ID{
   属性名：属性值；
   属性名：属性值
}
```
- 选择器分组：选择器1，选择器2 { 属性名：属性值；属性名：属性值 }
- 属性选择器：属性用中括号扩起来，可以多个属性
```
div[title]
div[title='aaa']
div[title][...]
```
- 派生选择器：
```
比方说<li><strong></strong></li>要找到strong
li strong{
    ...
}
```
- 子元素选择器：父选择器 > 子选择器
- 伪元素选择器：通常在a标签上使用
css的盒子模型
- 内边距
  - padding-top
  - padding-right
  - padding-bottom
  - padding-left
  - padding：..px ..px ..px ..px 以上右下左顺时针方向排列如果只写两个，那么第一个是上下第二个是左右
- 外边距
  - margin-top
  - margin-right
  - margin-bottom
  - margin-left
  - margin：顺序跟内边距类似
css绝对定位：
- position：absolute
- top：控制距离顶部的位置
- left：控制距离左边的位置
css浮动：
- float：left，right 不再占有正常文档流中的控件，流式布局
- 使用后清楚浮动clear：both/left/right
  - ```
  
  <div style="clear: both;"></div>
```

CSS学习笔记

CSS常用知识点

猜你喜欢

热点阅读