css知识点总结

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标签定义
 

<style>
    div{
        background-color: brown;
        width: 200px;
        height: 400px;
    }
</style>
 

 

3.外部样式表
 

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

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

 

4.各表的优缺点
 

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

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.盒子模型,内边距,边框,外边距
 

 

 

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)
 

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

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