CSS基础

MonkeyKing
264 阅读8分钟

一、CSS引入

1、CSS三种引入方式

  • 行内式（内联样式）
<标签 style="属性名:属性值; 属性名:属性值;"></标签>
<h1 style="color: red;">世纪家园</h1>
  • 内部样式表

只能控制当前页面，style标签一般位于head标签中，当然他可以放在HTML中的任何地方，在html5中可以省略type="text/css"

<style type="text/css">
    h1 {
         color: blue;
    }
</style>
  • 外部样式表(外链式)

rel:定义文档与被链接的关系，在这里一般制定stylesheet，表示链接的是一个样式表文; type:定义所链接文档的类型，这里一般是"type/css"; href:定义链接外部的URL,可以相对路径，也可以绝对路径

h1 {
	color: pink;
}


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

二、CSS基础选择器

  • 标签选择器
  • 类选择器（可以多类名以及多个标签使用同一类名，相当于人名）
  • id选择器（唯一，相当于身份证，经常跟JS一起使用）
  • 通配符选择器(*选择所有标签)

三、CSS复合选择器

  • 后代选择器(用空格隔开: div p(div中包括的所有p标签))
  • 子代选择器(用>隔开: div>p(div下一级的p标签))
  • 交集选择器(用.隔开: p.class(表示类名为class的p标签))
  • 并集选择器(用,隔开: p,span(表示p和span的所有标签))
  • 链接伪类选择器
    • a:link /未访问的链接/
    • a:visited /已访问的链接/
    • a:hover /鼠标移动到链接上/
    • a:active /选定的链接/

四、Font

font: font-style font-weight font-size/line-height font-family

  • 必须按顺序书写，不能更换顺序
  • 其中不需要设置的属性可以省略，但必须保留font-size和font-family
font:  italic 700 20px "微软雅黑";

五、CSS外观样式

  1. color(颜色)
预定义颜色值（red、green、blue）
十六进制（`#FFFFFF`）
RGB代码 (`rgb(255,0,0)`或`rgb(100%,0%,0%)`)
透明色(`rgba(255,0,0,0.3)`)(一直低于ie9的版本不支持)
  1. line-height(行间距)
设置行间距，可以设置三种值(`px`、`em`、百分比),用的最多的是px
  1. text-align(文本对齐方式)
  2. text-indent(首行缩进)
设置首行缩进，可以设置三种值(`px`、`em`、百分比),建议使用`em`为设置单位，可以使用负数（`1em`就是一个字的宽度）
  1. text-decoration(文本装饰)
设置文本装饰，通常用于修改链接装饰效果(`none`、`underline`、`overline`、`line-though`)

六、标签显示模式(display)

  • 块级元素(block-level)
    • 自己独占一行
    • 高度、宽度、外边距以及内边距都可以控制
    • 宽度默认是容器的100%
    • 只有文字才能组成段落，所以p标签不能放块级元素
  • 行内元素(inline-level)
    • 一行可以显示多个
    • 不可以控制宽度、自身的宽度由内容展开
    • 行内元素不能放块元素
    • 行内元素只能放文本或者其他行内元素
    • 链接a标签里面不能再放链接
    • 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全(将a元素转为块级元素)
  • 行内块元素(inline-block)（img、input）
    • 一行可以显示多个，但中间有点空隙
    • 宽度、高度可以设置
    • 外边距、内边距都可以控制

七、行高(line-height(基线到基线的距离))、高度(height)

  • line-height等于height可以使得单行文本垂直居中

八、CSS背景

  • 背景颜色：background-color
  • 背景图片：background-image（url绝对路径或者相关链接，url里面的链接不需要加双引号）
  • 背景平铺：background-repeat
  • 背景位置：background-position
    • 必须指定background-image属性
    • position后面是x坐标和y坐标。可以使用方位名词或者精确单位(background-position: 10px 20px或者background-position: left top)
    • 如果指定了一个方位名词，另外一个值默认居中，为50%
    • 如果只指定一个数组，那该数值时x坐标，y坐标默认居中
    • 如果指定两个值，两个值都是方位名词，则顺序无关
    • 如果指定两个具体的数值，则第一个是x坐标，第二个是y坐标
    • 背景附着：background-attachment (scroll，fix)
  • 背景简写：background

background：背景颜色、背景图片地址、背景平铺、背景滚动、背景位置（顺序没有关系）

九、CSS三大特性

  • 层叠性
    • 多个样式表CSS样式表叠加，就近原则
  • 继承性
    • 子标签可以继承父标签的样式(text-，font-,line-以及color可以继承)
  • 优先级
    • 可以根据不同选择器来决定样式的优先级
    • 两个相同的选择器，会层叠样式
    • 两个不同的选择器，则取优先级高的
    • 优先级：!important>行内样式表style>id选择器>class选择器，伪类选择器>继承的样式或者通配符(*)样式
    • 权重叠加

      • (继承和*: 0,0,0,0);

      • (a: 0,0,0,1);

      • (.nav: 0,0,1,0);

      • (#id: 0,1,0,0);

      • (行内样式: 1,0,0,0)

      • (!important: 无穷大)

      • (.nav a: 0,0,1,1);//权限叠加

十、盒子模型

  • 盒子4个组成部分: 内容、内边距、边框、外边距
  • border-collapse: collapse(表格边框相邻的层叠)
  • 内边距: 指定了内边距，盒子会变大（特殊情况，如果盒子没有给定宽度，padding不会撑开盒子）

    • padding设置1个值，表示上下左右都是该值

    • padding设置了2个值，上下内边距第一个值，左右内边距第二个值

    • padding设置3个值，上是第一个值，左右是第二个值，下是第三个值

    • padding设置4个值，顺时针分别取4个值对应相应的内边距

  • 外边距: 指定外边距，盒子不会变大

    • margin的值的个数跟padding一样

    • 块级盒子水平居中

      • 盒子必须有宽度
      • 左右外边距设置auto

    • 为了照顾兼容性的问题，行内元素(span等)尽量只设置左右内外边距，不要设置上下内外边距

    • 外边距合并

      • 单两个相邻的盒子都设置的相对应的垂直外边距，这时候外边距之间的间距不是两边之和，会取两个值中的较大者（解决方法，尽量只给一个盒子设置外边距）

    • 内容塌陷

      • 嵌套的盒子，子盒子设置上外边距的时候，父盒子的上外边距也会变
      • 解决方法：
        • 给父元素定义上边框
        • 给父元素定义上内边距
        • 给父元素添加overflow:hidden
  • 盒子的宽、高: 内边距+内容+外边距

十一、浮动(float： none｜left｜right)

  • 多个块级盒子一行显示(比如3个div在一行显示)
  • 盒子可以左右对齐
  • 文字环绕图片效果
  • 漂浮在标准流的上面，不占标准流的位置
  • 浮动会改变display属性
  • 浮动是贴着父盒子的内边距，不会盖住符盒子的内边距。一行显示不下，会掉下来
  • 为什么要清除浮动
    • 父盒子有时候不方便给高度，所有需要通过清除浮动来解决后面的盒子影响的问题
    • 主要为了解决浮动导致父盒子高度为0的情况
  • 清除浮动
    • clear属性
      • left：清除左边浮动
      • right：清除右边浮动
      • both：清除两边浮动
    • 额外标签法
      • 在浮动的最后一个盒子添加一个空标签(<div style="clear:both"></div>`)
    • 父级overflow属性
      • 给父亲添加overflow属性，设置为hidden｜auto｜scroll都可以实现
      • 缺点：内容增多时候，容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素
    • after伪元素
      • 给最后一个盒子添加，就是额外标签的升级版本，不用添加单独标签(.clearfix::after { content: ""; display: block; height: 0; visibility: hidden; clear: both; } .clearfix { *zoom: 1; /*ie6、ie7清除浮动*/ })
    • 双伪元素
      • 通过before、after双伪元素清除浮动（.clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .clearfix { *zoom: 1; /*ie6、ie7清除浮动*/ } ）

十二： 定位（position，也可以转换为隐式行内块元素，可以直接设置高度、宽度）

盒子自由的漂浮到其他盒子的上面（定位模式 + 边偏移）

  • 定位模式（position）
    • 静态定位(static): 默认的定位方式，就是没有定位效果，不要定位的时候使用，没有边偏移，基本不用
    • 相对定位(relative): 相对于原来的位置偏移指定的位置，移动之后，位置还是保留
    • 绝对定位(absoulute): 相对于带有定位的父级(祖先)盒子来移动位置，位置不保留，如果父级没有定位，就会以文档为准
    • 固定定位(fixed): 完全不占位置，只相对于浏览器可是窗口来边偏移（ie6等低级浏览器不支持固定定位）
  • 边偏移
    • top：顶部偏移（可以百分比或者具体的数值）
    • right：右边偏移
    • bottom：底部偏移
    • left： 左边偏移
avatar
文章
阅读
粉丝