css基础教程

lanxuanzzz
93 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

mdn官方术语解释

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

css书写规则为：选择器+声明块

  h1{  
  
    color:red;  
    background-color:lightblue; 
    text-align: center;  
}

选择器：

  • 元素选择器：即上面大括号前面的元素H1
  • 类选择器：书写格式为.name{}
  • id选择器：书写格式为#name{}

声明块：

  • 出现在大括号中
  • 声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式

注意：HTML只是语义化标签，最终样式由CSS决定

CSS代码书写位置

  1. 内部样式表
  • 书写在style元素中<style></style>
  1. 内联样式表，元素样式表
  • 直接书写在元素内部<style>属性中 3.外部样式表（推荐）
  • 将样式卸载独立的css文件中
  • 优点：
  • 外部样式表可以解决多页面样式重复的问题
  • 有利于浏览器缓存，从而提高页面享用速度
  • 有利于代码分离（HTML,CSS），更容易阅读和维护

CSS就是用来定义不同盒子之间的布局方式和样式的

盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

盒子类型：

  1. 行盒，display等于inline的元素

  2. 块盒，display等于block的元素

行盒在页面中不换行、块盒独占一行

display默认值为inline

浏览器默认样式表设置的块盒：div、h1~h6、p

常见的行盒：span、a、img、video、audio

盒子的组成部分

image.png

无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：

  1. 内容 content

width、height，设置的是盒子内容的宽高

内容部分通常叫做整个盒子的内容盒 content-box

  1. 填充(内边距) padding

盒子边框到盒子内容的距离

padding-left、padding-right、padding-top、padding-bottom

padding: 简写属性

padding: 上 右 下 左

填充区+内容区 = 填充盒 padding-box

  1. 边框 border

边框 = 边框样式 + 边框宽度 + 边框颜色

边框样式：border-style

边框宽度：border-width

边框颜色：border-color

边框+填充区+内容区 = 边框盒 border-box

  1. 外边距 margin

边框到其他盒子的距离

margin-top、margin-left、margin-right、margin-bottom

速写属性margin

块盒

  • 常见块级元素有：div、p、h1~h6 、header、footer、nav、hr、ul、ol、dl等

块盒的特点:

  • 1、独占一行, 所以也可以用来分区(div元素就常用于分区)
  • 2、可以设置宽高
  • 3、宽度是父元素宽度的100%
  • 4、里面可以嵌套块级元素和行内元素
  • 5、display:block
<div class="box">
        <div class="header">//头部
            <p></p> //p标签的语义为段落，块盒独占一行
            <img src="" alt=""><span>123</span>
        </div>
        <div class="content"></div>//内容区
        <div class="bottom"></div>//底部区域
    </div>

块盒理解并不难，重点是行盒

行盒

行盒的盒模型

常见的行盒：包含具体内容的元素

span、strong、em、i、img、video、audio

显著特点

  1. 盒子沿着内容沿伸

  2. 行盒不能设置宽高

调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。

  1. 内边距（填充区 padding）

水平方向有效，垂直方向不会实际占据空间。

  1. 边框(border)

水平方向有效，垂直方向不会实际占据空间。

  1. 外边距(margin)

水平方向有效，垂直方向不会实际占据空间。

行块盒

display：inline-block 的盒子

  1. 不独占一行

  2. 盒模型中所有尺寸都有效

空白折叠

空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间

可替换元素 和 非可替换元素

大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素

少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素

可替换元素：img、video、audio

绝大部分可替换元素均为行盒。

可替换元素类似于行块盒，盒模型中所有尺寸都有效。

常见样式声明

颜色

  • color: 元素内部的文字颜色
  • background-color:背景颜色
三原色，色值：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达，色值。
  rgb表示法：color:rgb(0, 255, 0)  
 
  hex（16进制）#表示法：#红绿蓝  
    
-   淘宝红：#ff4400, #f40  

-   黑色：#000000，#000  

-   白色：#ffffff, #fff  

-   红：#ff0000, #f00  

-   绿：#00ff00, #0f0  

-   蓝：#0000ff, #00f  

-   紫：#f0f  

-   青：#0ff  

-   黄：#ff0  

-   灰色：#ccc

文字

  • font-size:文字大小
  • font-weight:文字粗细程度
  • font-family：字体样式
  • text-decoration:文本修饰，给文本加线
  • text-indent:首行文本缩进
  • line-height:每行文本的高度，该值越大，每行文本的距离越大。
font-size:1px
px：像素，绝对单位，简单的理解为文字的高度占多少个像素  

em：相对单位，相对于父元素的字体大小  

每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。
avatar
文章
阅读
粉丝