CSS概述及常用样式

发表于 更新于 本文字数： 4.5k 阅读时长 ≈ 4 分钟

点击查看图片来源

CSS3 概述

CSS概述

CSS 是什么

CSS全称 Cascading Style Sheets层叠样式表，是一种用来表现文件样式的计算机语言。
1.CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式。
3.CSS拥有对网页对象和模型样式编辑的能力。
4.在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色等效果实现更加精确的控制。

CSS历史

接下来，我们从总体上看一下CSS的发展历史。
CSS 1。
1996年12月，CSS 1(Cascading Style Sheets,level 1)正式推出。在这个版本中，已经包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。
CSS 2。
1998年5月，CSS 2(Cascading Style Sheets,level 2)正式推出。在这个版本中开始使用样式表结构。
CSS 2.1。
2004年2月，CSS 2.1(Cascading Style Sheets,level 2 revision 1)正式推出。它在CSS 2的基础上略微做了改动，删除了许多诸如text-shadow等不被浏览器所支持的属性。
现在所使用的CSS基本上是在1998年推出的CSS 2的基础上发展而来的。10年前在Internet刚开始普及的时候，就能够使用样式表来对网页进行视觉效果的统一编辑，确实是一件可喜的事情。但是在这10年间CSS可以说是基本上没有什么很大的变化，一直到2010年终于推出了一个全新的版本———CSS 3。

使用CSS能做什么

模块与模块化结构

在CSS中，采用分工协作的模块化结构，如下表在CSS中，采用分工协作的模块化结构，如下表

模块名称 功能描述
basic box model 定义各种与盒相关的样式
Line 定义各种与直线相关的样式
Lists 定义各种与列表相关的样式
Hyperlink Presentation 定义各种与超链接相关的样式。訾如锚的显示方式、激活时的视觉效果等
Presentation Levels 定义页面中元素的不同的样式级别
Speech 定义各种与语音相关的样式。譬如音量、音速、说话间歇时间等属性
Background and border 定义各种与背景和边框相关的样式
Text 定义各种与文字相关的样式
Color 定义各种与颜色相关的样式
Font 定义各种与字体相关的样式
Paged Media 定义各种页眉、页脚、页数等页面元数据的样式
Cascading and inheritance 定义怎样对属性进行赋值
Value and Units 将页面上各种各样的值与单位进行统一定义，以供其他模块使用
Image Values 定义对image元素的赋值方式
2D Transforms 在页面中实现2维空间上的变形效果
3D Transforms 在页面中实现3维空间上的变形效果
Transitions 在页面中实现平滑过渡的视觉效果
Animations 在页面中实现动画
CSSOM View 查看管理页面或页面的视觉效果，处理元素的位置信息
Syntax 定义CSS样式表的基本结构、样式表中的-一些语法细节、浏览器对于样式表的分析规则
Generated and Replaced Content 定义怎样在元素中插入内容
Marquee 定义当一些元素的内容太大，超出了指定的元素尺寸时，是否以及怎样显示溢出部分
Ruby 定义页面中ruby元素（用于显示拼音文字)的样式
Writing Modes 定义页面中文本数据的布局方式
Basic User Interface 定义在屏幕、纸张上进行输出时页面的渲染方式
Namespaces 定义使用命名空间时的语法
Media Queries 根据媒体类型来实现不同的样式
‘Reader’Media Type 定义用于屏幕阅读器之类的阅读程序时的样式
Multi-column Layout 在页面中使用多栏布局方式
Template Layout 在页面中使用特殊布局方式
Flexible Box Layout 创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局
Grid Position 在页面中使用网格布局方
Generated Content for Paged Media 在页面中使用印刷时使用的布局方式

第二章 CSS常用样式

CSS 常用样式属性

宽高

    • 宽width：像素值/百分比（上一级标签的百分之多少）
    • 高height：像素值/百分比（上一级标签的百分之多少[注：当标签为body下的第一层标签时，高度使用百分比是不生效的]）

文字

    • 文字大小
      • font-size：像素值
    • 文字颜色
      • color:颜色单词/十六进制值/rgba值
    • 文字对齐方式
      • text-align:居中/靠左/靠右
    • 文字的字体设置
      • font-family:字体

浮动

    • 标准文档流
      • web页面的制作不同于设计软件，它是个流，必须从上而下，先执行渲染显示上边的元素，依次向下渲染显示
      • 我们知道元素分块级和行级元素两类，如果页面完全遵循文档流去开发就会导致很多页面排版不能实现或不能完全实现
      • 通过浮动我们可以让元素脱离标准流，实现块级元素并排等一些效果
    • 浮动特点
      • 脱离标准流
      • 元素并排（如果容器宽度足够元素则在容器宽度范围内并排，如果宽度不够则容器内元素会依次换行排列）
      • 收缩（如果一个没有设置宽度的元素浮动，那么元素的宽度会自动收缩为内容宽度）
    • 注：在学习初期关于浮动要遵循的一个原则：不要让一个元素单独浮动，要浮一起浮，要么都别浮
    • 浮动属性
      • 左浮动 float:left;
      • 右浮动 float:right

背景

    • 背景图 background-image:url(“图片地址”)
      • 注：
        • 在元素添加背景图时其运行时高度必须大于1
        • 背景图处于元素的最底层不会占用元素内容的存储空间
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo{
            width: 100%;
            height: 200px;
            background-image: url("../images/mapImages/4.png");
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
    • 背景图大小 background-size:宽度 高度；
      • 注：
        • 为背景图设置大小时需要注意该图的纵横比（容易出现背景变形）
1
2
3
4
5
6
7
8
<style>
       .demo{
           width: 100%;
           height: 200px;
           background-image: url("../images/mapImages/1.png");
           background-size: 100% 100%;
       }
   </style>
    • 背景重复 background-repeat:no-repeat/repeat-x;repeat-y;
      • 当图片宽高小于容器宽高时图片默认会铺满整个容器，会导致背景重复
      • 背景重复属性值默认为repeat（重复），也可以设置为
        • no-repeat:不重复
        • repeat-x：X轴重复
        • repeat-y：Y轴重复
1
2
3
4
5
6
7
8
9
10
<style>
      .demo{
          width: 100%;
          height: 200px;
          background-image: url("../images/mapImages/1.png");
          /*background-repeat: repeat-x;*/
          /*background-repeat: repeat-y;*/
          background-repeat: no-repeat;
      }
  </style>
    • 背景位移 background-position:x轴值 Y轴值；

      • 当背景图大小小于容器大小的时候，容器中添加背景图后只能展示出部分背景图

      • 通过背景位移，可以移动背景图片让容器中显示背景图中想要展示分部分

      • 注：

        ​

    • 背景色 background-color:颜色单词/十六进制值/rgba值

    • 背景渐变

      1
      2
      3
      4
      5
      6
      7
      <style>
           .demo{
               width: 100%;
               height: 200px;
               background:linear-gradient(#ff0000,#ffffff);
           }
       </style>

      ​

阴影 box-shadow

    • 语法：

box-shadow: h-shadow v-shadow blur spread color inset;

    • 属性值：
值 说明
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影 
1
2
3
4
5
6
7
8
<style>
      .demo{
          width: 100px;
          height: 100px;
          background-color: white;
          box-shadow: 0px 0px 50px 2px gainsboro;
      }
  </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
        .demo{
            width: 100px;
            height: 100px;
            background-color: white;
            box-shadow:    0px -10px 0px 0px #ff0000,   /*上边阴影  红色*/
            -10px 0px 0px 0px #3bee17,   /*左边阴影  绿色*/
            10px 0px 0px 0px #2279ee,    /*右边阴影  蓝色*/
            0px 10px 0px 0px #eede15;    /*下边阴影  黄色*/
            border-radius: 50%;
        }

    </style>

圆角 border-[--]radius:圆角值

圆形示例

1
2
3
4
5
6
7
8
<style>
       .box{
           width: 200px;
           height: 200px;
           background-color: red;
           border-radius: 50%;
       }
   </style>

单角示例

1
2
3
4
5
6
7
8
9
10
11
12
<style>
      .box{
          width: 200px;
          height: 200px;
          background-color: red;
          border-bottom-left-radius: 20px;
          /*border-bottom-right-radius: 20px;*/
          /*border-top-right-radius: 20px;*/
          /*border-top-left-radius: 20px;*/
          
      }
  </style>