首页 > 代码库 > CSS学习总结

CSS学习总结

2024-11-08 00:03:02   203人阅读

CSS基础

  • 简介
    1. 什么是CSS？
    2. CSS如何创建？
  • 选择器
    1. 通用选择器
    2. 标签选择器
    3. 类选择器
    4. ID选择器
    5. 属性选择器
    6. 后代选择器
    7. 子选择器
    8. 相邻元素选择器
    9. 伪类选择器
  • CSS样式
    1. 背景
    2. 文本
    3. 字体
    4. 链接
    5. 列表
    6. 表格
  • 页面布局
    1. 边框
    2. 盒子模型
    3. display
    4. visibility
    5. float 浮动
    6. clip 剪裁图像
    7. overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容
    8. position 规定元素的定位类型（static、relative、absolute、fixed）
    9. z-index 元素层叠顺序
    10. outline 边框轮廓
    11. zoom 缩放比例 
    12. cursor 鼠标的类型形状（Crosshair、Pointer、Move、text、wait、help...）
    13. transform、transition 动画效果

简介

什么是CSS？

  • CSS(Cascading Style Sheets)层叠样式表。
  • CSS是一种用于Web的标准布局语言。
  • 样式定义如何显示HTML元素，样式通常存储在样式表中。
  • CSS语法分为两个部分：选择器，一条或多条声明。
    1. 选择器：通常是需要改变样式的HTML元素
    2. 声明：由一个属性：一个值成对组成
    3. 格式： 
          selector{
    property1:value1;  //每一行只写一个属性，是为了增强CSS可读性
    property2:value2;
    ...
    }

CSS如何创建？

插入样式表的方法有三种：外部样式表，内部样式表，内联样式。

外部样式表(理想):可通过改变一个文件来改变整个站点的外观，每个页面使用link标签来链接样式表。

格式： 
    <head>
       <link href="http://www.mamicode.com/My.css" rel="stylesheet" type="text/css">//浏览器会从文件My.css读到样式声明。样式表以.css扩展名保存，不包括任何HTML标签。
    </head>

内部样式表:单个文档需要特殊的样式时使用。每个页面使用style标签来编写样式表。

格式： 
    <head>
       <style  type="text/css">
       ...//此处编写样式
       </style>
    </head>

内联样式(慎用):在相关的标签内使用style标签。

选择器

基本选择器：

1.通用选择器

*定义页面所有元素的样式。

格式：*{样式；}

2.标签选择器

也称元素选择器，是最常见的 CSS 选择器。选择器通常是某个 HTML 元素。

格式：HTML元素{样式；}

3.类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

格式：.类名{样式；} （类名不能以数字开头，区分大小写）

HTML中引用：class=“类名”

4.ID选择器

ID选择器可以为标有特定ID的HTML元素制定特定的样式。id属性在每个HTML文档中只出现一次。

格式：#ID名{样式；} （ID名不能以数字开头）

HTML中引用：id=“ID名”

属性选择器

后代选择器

子选择器

相邻元素选择器

伪类选择器

CSS样式

背景

文本

字体

链接

列表

表格

页面布局

边框

盒子模型

display

visibility

float 浮动

clip 剪裁图像

overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容

position 规定元素的定位类型

z-index 元素层叠顺序

outline 边框轮廓

zoom 缩放比例 

cursor 鼠标的类型形状

transform、transition 动画效果

CSS学习总结


联系
我们