CSS 基础知识

cadecode
239 阅读7分钟

CSS 简介

发展史

  1. 1990 年，蒂姆·伯纳斯·李（Tim Berners-Lee）发明万维网，创造 HTML 超文本标记语言，那时并没有提供网页装饰的方法
  2. 20 世纪 90 年代，HTML 飞速发展，加了很多功能，代码越来越臃肿，HTML 变得越来越乱，于是 CSS 诞生了
  3. 1996 年 12 月，W3C 推出了 CSS 规范的第一版本
  4. 1997 年，W3C 颁布 CSS1.0 版本 ，CSS1.0 较全面地规定了文档的显示样式，可分为选择器、样式属性、伪类等部分
  5. 1998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准
  6. 2005 年 12 月，W3C 开始 CSS3 标准的制定，到目前为止该标准还没有最终定稿
  7. 经过 20 多年的发展，CSS 工程化的方案不断完善，涌现许多 CSS 预处理和后处理工具，如 Sass、PostCSS 等

相关概念

  1. 定义：cascarding style sheet，层叠样式表

  2. 分类：

    • 内联样式：标签的 style 属性上定义

    • 内部样式表：head 内的 style 标签定义

    • 外部样式表：link 标签引入

      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet" href="main.css">
    <style type="text/css">
        div {
            width: 200px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
<div style="width: 200px; height: 50px"></div>
</body>
</html>

  3. 优先级

    内联样式 > 内部样式表 > 外部样式，定义相同样式，内联优先于内部样式，内部样式优先于外部样式

浏览器

  1. 组成部分：shell + 内核

  2. 主流浏览器及内核

    • chrome：webkit/blink

    • safari：webkit

    • firefox：gecko

    • ie：trident

    • opera：presto

    webkit 是谷歌和苹果共同开发的内核

    opera 现在属于 360 和昆仑万维

  3. 内核包括渲染引擎和 JavaScript 引擎

选择器

种类

  1. id 选择器

    /*选择 id 为 box 的元素*/
#box{
    width: 100px;
    height: 100px;
    background-color: red;
}

    <div id="box"></div>

  2. 类选择器

    /*选择 class 为 box 的元素*/
.box{
    width: 100px;
    height: 100px;
    background-color: red;
}

    <div class="box"></div>
<div class="box"></div>

  3. 标签选择器

    /*选择标签名为 div 的元素*/
div{
    width: 100px;
    height: 100px;
    background-color: red;
}

    <div></div>
<div></div>

  4. 属性选择器

    /*选择有 href 属性的元素*/
[href]{
    color: blue;
}
/*选择有 id 属性且等于 box 的元素*/
[id="box"]{
    width: 100px;
    height: 100px;
    background-color: red;
}

    <div id="box"></div><a href="http://baidu.com">百度一下</a>

  5. 并列选择器

    /*选择是 div 标签且 id 等于 box 的元素*/div.box{    width: 100px;    height: 100px;    background-color: red;}

    <div class="box"></div><p class="box"></p>

  6. 后代元素选择器

    /*选择 strong 标签内的所有 em 标签元素*/strong em{    color: red;}

    <strong>    <em>123</em></strong><p>    <em>123</em></p>

  7. 子元素选择器

    /*选择 strong 标签内的所有是 em 标签的子元素*/strong > em{    color: red;}

    <strong>    <em>123</em>    <p>    	<em>123</em>	</p></strong>

  8. 兄弟元素选择器

    /*选择 div 后的第一个 strong 标签*/div + strong {    color: red;}/*选择 div 后所有 p 标签*/div ~ p {    color: blue;}

    <div></div><strong>abc</strong><strong>def</strong><p>123</p><p>456</p>

  9. 分组选择器

    /*选择 strong 标签和 p 标签*/strong,p{    color: red;}

    <strong>123</strong><p>123</p>

  10. 通配符选择器

    /*选择所有标签元素*/*{    margin: 0;    padding: 0;}

权重

  1. 选择器权重值，256 进制
    • 通配符 0
    • 标签、伪元素 1
    • class、属性、伪类 10
    • id 100
    • 内联样式 1000
    • !important 正无穷
  2. 权重值求和比较，可以得到有效样式，这里的正无穷加一大于正无穷

盒子模型

  1. Box Model，一般我们将双标签、具有宽高属性的 HTML 元素成为盒子、容器
  2. 盒子的组成
    • Margin(外边距) - 清除边框外的区域，是透明的
    • Border(边框) - 围绕在内边距和内容外的边框
    • Padding(内边距) - 清除内容周围的区域，是透明的
    • Content(内容) - 盒子的内容，宽高所划分的区域
  3. box-sizing 属性
    • content-box：在 width/height 之外绘制 border、padding
    • border-box：在 width/height 之内绘制 border、padding
  4. body 元素的 margin
    • 一般浏览器默认 8px
    • IE8 16px 8px, IE7 16px 11px
  5. 背景 backgroud 属性
    • backgroud-image: 通过url() 指定路径
    • background-position: 指定横纵坐标上背景图片的起始位置，如top left/top right/center center/50% 60%/100px 200px 等
    • background-repeat: 指定横纵坐标上背景图片是否重复，no-repeat/repeat/repeat-x/repeat-y
    • background-siz: 指定背景图片的尺寸100px 100px|40% 60%|cover|contain，cover 将图片放大以至于完全能覆盖内容区域，contain 将图片放大且使内容区域恰好可以容纳其尺寸
    • background-attachment: 指定背景图片随页面滚动的方式，scroll|fixed

文本属性

  1. font-family设置字体，当属性值是中文或多个英文单词组成的时候，要用双引号包起来

    font-family: Arial,"微软雅黑","Times New Roman"

  2. color设置字体颜色，可使用颜色英文单词、十六进制颜色、rgb()

  3. font-weight设置字体粗细，bolder/bold/normal/100—900（400 相当于 normal）

  4. text-align设置对齐方式，left/right/center

  5. text-decoration设置文本修饰，none/underline/overline/line-through

  6. text-indent设置缩进，数值或百分比

  7. line-height设置行高，文本会在行高范围内居中

  8. 单行文本截断

    text-overflow: ellipsis
overflow-x:  hidden
white-space:  nowrap

  9. 容器内多行文本垂直居中

    容器，如 div，设置 display 为 table

    容器内文本元素，如 span，设置为 display 为 table-cell，vertical-align 为 middle

伪类、伪元素

  1. 伪类：用于定义元素特殊状态下的样式

    • :hover 鼠标悬停
    • :foucs获得焦点
    • :checked单选或多选按钮被选中
    • first-chirld/last-chirld在所有兄弟元素中处于第一个或最后一个
    • first-of-type/last-of-type在所有兄弟元素中的相同标签中处于第一个或最后一个
    • nth-child和nth-of-type 同上，可指定第几个
    • :target当前活动的 HTML 锚点

  2. 伪元素

    ::before或::after，在元素的内容前或后插入新内容

    必须通过 content 属性指定内容，content 可以使用字符串、attr(元素属性)、url(图片等的资源链接)

浮动

  1. float属性指定元素浮动的方向，浮动的元素脱离当前文档流，进入浮动流

  2. 块级元素无法识别浮动元素的位置，内联、内联块、普通文本可以识别

  3. 将几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻

  4. clear 属性定义了元素的哪边上不允许出现浮动元素，常用来用来清除浮动

    .clearfix::after {
    content: "";
    display: block;
    clear: both;
}

定位

  1. position属性指定定位的方式

    • static: 默认
    • relative: 相对自身原位置定位，不影响原位置所占空间
    • fixed: 相对于浏览器窗口定位，不占空间
    • absolute: 相对于最近的已定位父元素定位，没有符合的父元素则相对于整个文档定位，不占空间
    • sticky: 类似于relative，当元素滚动出可视范围后，表现为 fixed

  2. top/bottom/left/right属性调整定位的相对位置

  3. z-index属性控制多个定位元素的层叠顺序，作用于最近的已定位父元素相同的定位元素之间

    具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面

    如果两个定位元素重叠，没有指定 z-index，在 HTML 代码中最后定位的元素将被显示在最前面

BFC

  1. BFC：block formating context，块级格式化上下文

  2. 文档流分为普通流 normal flow 和浮动流 float flow，BFC 属于普通流，不会影响其他元素

  3. 几种 BFC 场景

    • body 元素

    • 浮动元素

    • position 为 absolute 或 fixed

    • display 为 inline-block 或 tabe-cell

    • overflow 为 hidden auto scroll

  4. margin 塌陷指当子元素设置浮动时，父元素高度将无法被撑开，解决方法如

    • 设置父元素为 BFC
    • 利用伪元素::after清除浮动

  5. margin 合并指两个普通的兄弟元素，在垂直方向上的 margin 是合并的，也可通过设置 BFC 来解决

属性书写顺序

  1. 位置属性(position, top, right, z-index, display, float 等)
  2. 尺寸属性(width, height, padding, margin, border)
  3. 文字属性(font, line-height, letter-spacing, color- text-align 等)
  4. 装饰属性(background, box-shadow 等)
  5. 其他属性(animation, transition 等)
avatar
文章
阅读
粉丝