CSS知识点回顾

##CSS知识点回顾

CSS引入方式

  • 内部引入（行间样式）

    优先级高，不会被其他样式覆盖和影响，不会产生其他请求
    但是，不利于代码的维护，没有“内容、样式”分离，影响阅读体验

    <div class="box" style=width:300px;height:300px;></div>

  • style标签引入(嵌入式)

    实现了“内容、样式分开的规范”，比行间样式的体验要高，也不会产生其他请求
    但是，不利于复用，增加了html文档的篇幅

在head标签中引入style标签 

<html>
<head>
    <meta charset="utf-8">
    <title>CSS引入方式</title>
    <style>
        .box{
            width:300px;
            height:300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
  • link引入 (链接式)

实现了“内容样式”分离,有利于阅读体验

引入外部CSS文件

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

href属性就代表引入的CSS文件

  • @import url（）

引入外部css文件

CSS语法

标签{
属性:属性值;
}

例:
background{ color:red;}

CSS选择器

  • 标签选择器

例:

div{  }
a{  }
  • id选择器（名称是唯一的）

例:标签名为box的标签元素

#box{ }
  • 类选择器（名字可以重复）

例:标签名为box的标签元素

.box{ }
  • 层级选择器（父子选择器）

例:body下的div标签

body div{ }

*小结

优先级

标签选择器 < 类选择器 < id选择器

注意:如果加上!important,那么所有的优先级规则全部无效

  • 群组选择器

每个标签元素之间用,连接

a,h,div,p{ }

  • 通配选择器

    *为通配符 用来对所有的标签设置样式 清除一些默认的属性 通配选择器的优先级最低 要谨慎使用

CSS的几种布局方式

  • 浮动布局

    float(浮动):

    none;(默认值)

    left;(向左浮动)

    right;(向右浮动)

  • 定位布局

相对定位
position:relative; 相对自身的位置进行定位,值可以为负数,可以对块级标签使用,不会改变标签的属性。

绝对定位
position:absolute; 脱离了文档流,改变了标签的属性。如果父级标签有设置relative,则以父级标签为起点;反之,如果父级标签没有设置,则以body为起点。

固定定位
position:fixed;

CSS清除浮动的方法

  • 给浮动元素的父级元素设置一个高度

  • 给浮动元素的父级设置overflow属性
    overflow:
    visible;默认值,内容不会被剪裁,会呈现在元素框之外。
    hidden;超出父级的内容被剪裁掉,去掉滚动条。
    scroll;超出父级边框的内容剪裁掉,当内容高度超出父级高度的时候,出现滚动条。

  • 在浮动元素的后边就上一个空标签,并在CSS中给其设置{clear:both;}属性。
Share