CSS(层叠样式表)

简述

层叠样式表(Cascading Style Sheet,简称:CSS)是为网页添加样式的代码

CSS 是一门样式表语言, 不是一门编程语言,也不是标记语言。

CSS 文档中所有位于 /* 和 */ 之间的内容都是 CSS 注释,不支持 // 注释。

  • padding:即内边距,围绕着内容(比如段落)的空间。

  • border:即边框,紧接着内边距的线。

  • margin:即外边距,围绕元素外部的空间

  • width :元素的宽度

  • background-color :元素内容和内边距底下的颜色

  • color :元素内容(通常是文本)的颜色

引入CSS方式

1, 行间样式

<div style="width:100px; height:100px;"></div>

2, 页面级CSS

<style>
      div {
       width: 110px;
       margin: 0 auto;
     }

</style>

3, 外部CSS文件

<link rel="stylesheet" type="text/css" href="https://x.x.x.x/div.css">

选择器

  • ID选择器, 以#开头, ID和标签为一一对应关系。 例如: #d1

  • class选择器,以点开头,class和标签是多对多关系,一个标签可以有多个class,

多个标签也也可以有一个相同的class, 例如: .aa

  • 标签选择器, 例如div{}

  • 属性选择器 [id]表示有id的标签。

  • 通配符选择器, 选择所有的标签。

如果ID和class相冲突,ID的优先级高, class优先级次之,最后是标签选择器。

如果有行间样式,行间样式比ID选择器优先级更高。

属性选择器和class选择器两个优先级相同,后面会覆盖前面的。

字体大小

  • font-size: 1.2em; 表示1.2倍标准字体。

符号

含义

举例

px

像素,图像的一个点

min-width: 992px

pt

磅,字体大小单位,

font-size: 14pt

ex

字体大小

96ex表示能方96个字体

em

字体大小,

%

百分比。

100%

盒子模型(Box Model)

每个元素都相当于一个盒子,都有外边距(margin),内边距(padding),边框(border)和内容区四部分。

  • Margin(外边距) - 边框外的区域,外边距是通常是透明的。

  • Border(边框) - 围绕在内边距和内容外的边框。

  • Padding(内边距) - 内容周围的区域,内边距通常是透明的。

  • Content(内容) - 盒子的内容,显示文本和图像。

margin

margin 属性为给定元素设置所有四个(上边,右边,下边和左边)方向的外边距属性。

/* 上边下边 左边右边 */ margin: 0 auto;

  • auto 让浏览器自己选择合适的外边距。

rgba

rgba() 函数使用红(Red)、绿(Green)、蓝(Blue)、透明度(Alpha)的叠加来生成各式各样的颜色。

  • 红色(Red) 0 到 255 之间的整数。

  • 绿色(Green) 0 到 255 之间的整数。

  • 蓝色(Blue) 0 到 255 之间的整数。

  • 透明度(Alpha)取值 0~1 之间的浮点数。

例如

background-color: rgba(209, 215, 224, 1)

rgba()是一个css函数。在JAVAScript中示例如下

newName.style.borderColor = "rgba(209, 215, 224, 1)"

注释

CSS代码中的注释以” /* “开头,以” */ “结尾,中间为注释内容,可以跨越多行。

@规则

是以at符号开头, ‘@’后跟一个标识符,并包括直到下一个分号的所有内容。

@规则, 由标示符指定, 每种规则都有不同的语法含义。

  • @page, 描述打印文档时布局的变化。

  • @import 引入一个外部样式表。

  • @media screen 彩色屏幕设备, 和打印有区别

  • @media print 打印,和屏幕显示有区别。

screen

如何适配各种屏幕,例如手机屏幕。使用 @media screen实现网页布局的自适应。只需在CSS中添加@media screen属性即可

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

语法:@media mediatype and|not|only (media feature) { CSS-Code; }

  • max-width 显示区域的最大宽度。

  • min-width 显示区域的最小宽度。

    @media screen and (min-width: 400px) {
    body {

    background-color: green;

    }

    }

    @media screen and (min-width: 800px) {
    body {

    background-color: red;

    }

更新日期 2022.1