css知识点总结

不念不忘少年蓝@ 2023-10-02 00:28 25阅读 0赞

### 1.css概述 ###

*  css是Cascading Style Sheets(级联样式表)
 *  css是一种样式表语言,用于为HTML文档控制外观,定义布局.
 *  可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义白线形式的css在一个.css文件中或HTML文档的某一部分
 *  HTML如同网页的骨架,css如同修饰骨架的装饰品(样式)

### 2.基本语法 ###

#### 1.行内样式表 ####

行内样式表,又称内联样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式

基本语法为:<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容

<p style="width: auto;">行内样式表</p>

#### 2.内嵌样式表 ####

内嵌式是将css代码集中写在HTML文档中的head头部标签中,并且用style标签定义

#### 3.外部样式表 ####

外部样式表是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过link标签将外部样式表文件的链接到HTML文档中

使用link（链接）标签 :
    <head>
    <link href="newstyle.css" rel="stylesheet" type=" text /css">
    <style type=" text /css">
    </style>
    </head>

#### 4.各表的优缺点 ####

<table> 
 <thead> 
  <tr> 
   <th>样式表</th> 
   <th>优点</th> 
   <th>缺点</th> 
   <th>使用情况</th> 
   <th>控制范围</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>行内样式表</td> 
   <td>书写方便</td> 
   <td>没有实现样式和结构相分离</td> 
   <td>较少</td> 
   <td>控制一个标签(少)</td> 
  </tr> 
  <tr> 
   <td>内部样式表</td> 
   <td>部分结构和样式相分离</td> 
   <td>没有彻底分离</td> 
   <td>较多</td> 
   <td>控制一个页面(中)</td> 
  </tr> 
  <tr> 
   <td>外部样式表</td> 
   <td>完全实现结构和样式相分离</td> 
   <td>需要引入</td> 
   <td>最多,强烈推荐</td> 
   <td>控制整个站点(多)</td> 
  </tr> 
 </tbody> 
</table>

### 3.选择器 ###

*  标签选择器:通过标签选择器可以选择页面中的所有指定标签 语法:标签名\{\}

div{
            background-color: brown;
            width: 200px;
            height: 400px;
        }

*  类选择器:通过标签的class属性值选中一组标签 语法: .class属性值\{\}

.box-1{
            float: left;
            color: red; 
            font-weight: 200;
            font-size: 30px;
            padding: 25px 25px;
            height: 50px;
            text-align: center;
        }

*  id选择器:通过标签的Id属性值选中唯一的一个标签 语法: \#id属性值\{\}

#box-2{
            float: left;
            color: red; 
            font-weight: 200;
            font-size: 30px;
            padding: 25px 25px;
            height: 50px;
            text-align: center;
        }

*  通配选择器:可以用来选中页面中的所有标签 语法:\*\{\}

### 4.文本,背景,列表,伪类,透明 ###

#### 1.文本 ####

*  color:字体颜色
 *  font-size:字体大小
 *  font-family:字体样式
 *  text-align:文本对齐
 *  text-decoration:line-through 定义穿过文本下的一条线
 *  text-decoration:underline 定义文本的一条线
 *  text-decoration:none 定义标准的文本
 *  font-weight:字体粗细
 *  font-style:italic 斜体文本
 *  line-height:设置行高
 *  letter-spacing:可以指定字符间距
 *  text-indet:用来设置首行缩进

#### 2.背景 ####

*  background-color 背景颜色
 *  background-image 背景图片
 *  background-repeat 背景重复
 *  background-size 背景尺寸
 *  background-position 背景位置

#### 3.css列表 ####

*  list-style-image 将图像设置为列表项标志
 *  list-style-position 设置列表中列表项标志的位置
 *  list-style-type 设置列表项标志的类型
 *  list-style 简写属性

#### 4.css伪类 ####

*  css伪类专门用来表示标签的一种特殊的状态,当我们需要在处在这些特殊状态的标签设置样式时 ,就可以使用伪类.
 *  伪类的用法:
    
     *  :hover:伪类表示鼠标移入的状态
     *  :active:表示的是被点击的状态
     *  :focus:向拥有的键盘输入焦点的标签添加样式

#### 5.透明 ####

*  定义透明效果的属性是opacity
    
     *  opacity属性设置标签的不透明级别值为1
     *  规定不透明度:从0.0(完全透明)到1.0(完全不透明)

### 5.块级,行级,行级块标签,display属性 ###

**1.什么是块级标签?**

块级标签:无论内容多少都会独占一行的

例如<p>、<h1> 、<ul> 、<ol> 、<hr/>等

**2.什么是行级标签？**

行级标签：只占有自身大小的标签，不会占一行。

例如 <font>、<b>、<i>、<a>等

**3什么是行级块标签？**

例如 <input/>、<img>等

**4.注意**

*  一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签
 *  a可以包含任何标签,除去a本身
 *  p标签不可以包含任何的块标签

**5.dispaly**

通过display样式可以修改标签的类型

*  block:设置标签为块标签
 *  inline:设置标签为行级标签
 *  inline-block:设置标签为行级块标签
 *  none:隐藏标签(标签将在页面中完全消失)

### 6.div和span ###

**1.div标签**

*  div是块级标签,可以放置任何标签
 *  div没有任何附加功能,给了什么属性就能变成什么样.
 *  div主要的作用是用来布局网页

**2.span标签**

*  span是行级标签
 *  spam没有 任何附加功能,给了什么属性就能变成什么样.
 *  span标签被用来选中文档中的文字.

### 7.盒子模型,内边距,边框,外边距 ###

![b331cf8782a049d1acec119b60d90a0a.png][]

**1.盒子模型**

*  css处理网页时,默认为每个标签都包含在一个不哭间的盒子里
 *  如果把所有的标签都想象成盒子,那么我们对网页的布局就相当于摆放盒子

**2.盒子的划分**

1.内容区(content)

*  内容区指的是盒子放置内容的区域,也就是标签中的文本内容,子标签都是存在于内容区中的
 *  如果没有为标签设置内边距和边框,则内容大小默认和盒子大小一致
 *  通过width和height两个属性可以设置内容的大小而不是整个盒子的大小
 *  width和hight属性只适用于块标签(包含行级块)

**2.内边距(padding)**

*  内边距指的是标签内容区与边框的空间
 *  内边距会影响整个盒子的大小 padding:上 右 下 左

**3.边框(border)**

*  可以在标签周围创建边框,边框是标签可见的最外部 border:粗细 颜色 边框的样式
 *  边框的样式:dotted(点线) dashed(虚线) solid(实线) double(双线) groove(槽线)

**4.外边距(margin)**

*  外边距是标签边框与周围标签相距的空间
 *  外边距不会影响盒子的整体大小,但是会影响盒子的位置,会影响盒子的实际控制范围

**5.清楚浏览器的默认样式**

浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的标签都设置下一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的

\*\{

margin:0;

padding:0;

### 8.文档流,浮动,定位 ###

**1.文档流**

*  文档流:指的是文档中的标签在排列时所占用的位置,将窗口自上而下分成一行行,并在每行中按从左至右的标签的顺序排放标签
 *  文档流中的标签会默认会紧贴到上一个标签的右边,如果右边不足以放下标签,标签则会另起一行,在新的一行中继续从左至右摆放

**2.浮动**

*  浮动就是指的是使标签脱离原来的文档流,在父标签中浮动起来.
 *  块级标签和行级标签都可以浮动,当一个行级标签浮动以后,宽度会默认是内容的宽度.
 *  当一个标签浮动以后,其下方的标签会上移
 *  浮动会使标签完全脱离文档流,也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流,这时不会影响父标签的高度,也就是浮动标签不会撑开父标签

**3.清除浮动**

可以在浮动的标签后面再添加一个空的div进行清除浮动

例如 <div style="float:none"><div/>

**4.css定位**

1.相对定位(relative)

相对定位移动后原来的位置还被占用

*  当开启了标签的相对定位以后,而不设置偏移量时,标签不会发生任何变化
 *  相对定位是相对于标签在文档流中原来的位置进行定位
 *  相对定位的标签不会脱离文档流

**2.绝对定位(absolute)**

绝对定位是不占空间的,运用了绝对定位的标签会脱离原来的文档流,浮动起来,因此视觉上会有其他标签的重合

*  开启绝对定位后,会使标签脱离文档流
 *  开启绝对定位后,如果不设置偏移量,则标签的位置不会发生改变
 *  绝对定位是相当于离他最近的开启了定位的祖先标签进行定位(一般情况,开启了子标签的绝对定位都会同时开启父标签的相对定位),如果所有的祖先标签丢没有开启定位,则会相对于浏览器窗口进行定位
 *  绝对定位会使标签提升一个层次
 *  绝对定位会改变标签的性质,行级标签变成块标签

[b331cf8782a049d1acec119b60d90a0a.png]: https://img-blog.csdnimg.cn/b331cf8782a049d1acec119b60d90a0a.png