CSS基础

酷小洋2025-05-08 11:53

详细请看 菜鸟教程的 CSS

五、CSS基础

1.CSS和DHTML简介

  1. 什么是CSS？
    • CSS（Cascading style Sheet）：层叠样式表
    • CSS是用来控制网页的外观的一门技术
  2. 什么是DHTML？
    • DHTML 是制作动态 HTML 页面的技术
    • DHTML = HTML + CSS（层叠样式表）+ JavaScript（脚本语言）
  3. HTML、CSS、JS
    • HTML控制网页的结构
    • CSS控制网页的外观
    • JavaScript控制网页的行为
  4. CSS的特点
    • 将结构和格式分离
    • 强有力的控制页面布局
    • 制作体积小下载快的页面
    • 将许多页面同时更新，比以前更快，更容易
    • 浏览器将成为更友好的界面

2. CSS语法

  • CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）
  • 基本格式：selector {property: value} / 选择符{属性：属性值}
  • CSS规则
    • CSS规则由选择器以及一条或多条声明组成
    • 组成
      • 选择器
      • 声明：属性：属性值
    • CSS声明以分号(;)结束，用大括号({})括起来
  • 常用的样式属性
  • CSS样式分类

    • 行内样式（内联样式）

      • 行内样式：将表现和内容混杂在一起
      • 在标签内使用样式（style）属性
      html 复制代码 
      <p style="color:sienna;margin-left:20px;">一个段落。</p>

    • 内嵌样式

      • 希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式
      • 内嵌样式写在head区域：将样式写在<style type="text/css" ></style>之中

    • 外部样式

      • 使用link（链接）标签

      • 语法

        html 复制代码 
        <head>
	<link   rel = "stylesheet"    type = "text/css"    href = "样式表文件.css" >
</head>

      • "rel=stylesheet"

        • rel是关联的意思
        • 关联的是一个样式表(stylesheet)文档
        • 表示这个link在文档初始化时将被使用

    • 优先级：行内样式 > 内嵌样式 > 外部样式> 浏览器默认样式

3. 选择器分类

  • 根据选择器的不同，内嵌样式 HTML选择器、class选择器、id选择器、包含选择器
  • 分类
    • html选择器
    • class选择器
      • class 选择器用于描述一组元素的样式
      • class 选择器在HTML中以class属性表示
      • 在 CSS 中，类选择器以一个点"."号显示
    • id选择器
      • id 选择器可以为标有特定 id 的 HTML 元素指定样式
      • 在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式
      • HTML元素以id属性来设置id选择器
      • CSS 中 id 选择器以 "#" 来定义
    • 包含选择器

      • 可以单独对某种元素包含关系定义的样式表

      • 元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义

        css 复制代码 
        table a{
   font-size: 12px；
}
/*在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小*/

4. CSS背景

  • CSS 背景属性用于定义HTML元素的背景

  • 常用背景属性

    属性 描述
    background-color 定义了元素的背景颜色
    background-image 描述元素的背景图像（默认情况下平铺显示）
    background-repeat 设置背景图像不平铺
    background-attachment 定义背景图片随滚动轴的移动方式
    scroll: 随着页面的滚动轴背景图片将移动
    fixed: 随着页面的滚动轴背景图片不会移动
    inherit: 继承初始值: scroll
    background-position 设置背景图像的位置

  • 背景的简写属性

    • 使用简写属性时，属性值的顺序
      1. background-color
      2. background-image
      3. background-repeat
      4. background-attachment
      5. background-position
    • 属性不用全部使用，依据需求按照顺序写
    css 复制代码 
    body {
	background: #ffffff  url('img')  no-repeat  right  top
}

5. CSS字体

  • font：在一个声明中设置所有的字体属性
  • font-family：指定文本的字体系列
  • font-size：指定文本的字体大小
  • font-style：指定文本的字体样式
  • font-variant：以小型大写字体或者正常字体显示文本
  • font-weight：指定字体的粗细

6. CSS链接

  • CSS链接样式的定义属于伪类的定义

  • 链接状态

    • a:link - 正常，未访问过的链接

      css 复制代码 
      a:link {
    color：#000；
}/*设置未访问的链接字体颜色*/

    • a:visited - 用户已经访问过的链接

      css 复制代码 
      a:visited {
    color：#000；
}/*设置访问过的链接字体颜色*/

    • a:hover - 当用户鼠标放在链接上的映射

      css 复制代码 
      a:hover {
    color：#000；
}/*设置鼠标放在链接上的字体颜色*/

    • a:active - 链接被点击的那一刻

      css 复制代码 
      a:active {
    color：#000；
}/*设置 链接被点击时的字体颜色*/

  • 常用属性

    CSS属性 用途 可选值
    text-decoration 用于判断是否有下划线 none(无下划线), underline(有下划线)
    background-color 指定链接的背景颜色 CSS颜色值

  • 定义链接时，四种状态可以根据需求定义，但是如果四种都有，则必须要按照上述顺序定义

7. CSS列表

  • 常用的两种列表
    • 无序列表（ul）
    • 有序列表（ol）
  • 常用属性
    • list-style-position：设置列表中列表项的位置
    • list-style-type：指定列表项标记的类型
    • list-style-image： 将图像设置为列表项标志
      • 值：url("./img")
    • list-style：简写属性，用于将所有的列表属性设置于一个声明中

8. CSS表格边框

  • 指定表格的边框，用是border属性
  • 常用属性
    • border-collapse：表格塌陷（边框折叠）
      • 设置表格的边框是否被折叠成一个单一的边框
      • 值：collapse
    • width：设置表格宽度
    • height：设置表格高度
    • text-align：设置表格文字水平方向对齐方式
      • 值：left；左对齐
      • 值：center；居中对齐
      • 值：right；居右对齐
    • vertical-align：设置表格文字垂直方向对齐方式
      • 值：top；居上对齐
      • 值：middle；居中对齐
      • 值：bottom；居下对齐

9. 盒子模型（Box Model）

9.1 盒子

  • margin（外边距）：清除边框外的区域，外边距是透明的
  • border（边框）：围绕在内边距和外边距的边框
  • padding（内边距）：清除内容区周围区域，内边距是透明的
  • content（内容区）：盒子的内容，用于显示文本和图像
  • 盒子区域

9.2 div标签

  • <div>是块级容器标签
  • div设置了width/height，但是div所占页面实际的宽度/高度=width/height + margin + border + padding

9.3 border边框

  • border-style：定义边框的样式

    • 值：none；默认无边框
    • 值：dashed；虚线边框
    • 值：dotted；点线边框
    • 值：solid；实线边框

  • border-width：设置边框宽度

  • border-color：设置边框颜色

    • border-color单独使用不起作用，必须先使用border-style设置边框样式

  • border：简写属性，用于设置border的宽度、样式、颜色

    css 复制代码 
    div {
	border: 1px solid #000;
}

  • border-radius：设置边框的圆角

9.4 margin（外边距）和padding（内边距）

  1. margin（外边距）
    • margin清除周围的（外边框）元素区域
    • margin没有背景颜色，是完全透明的
  2. padding（内边距）
    • padding清除内容区周围区域，内边距是透明的
    • 当元素的padding内边距被清除时，所释放的区域将会受到元素背景颜色的填充

9.5 display属性

  • 每一个元素都有默认的display属性值
  • 可以将行内元素display的属性值由inline改为block，强制将它改成块元素
9.5.1 块级元素
  • 默认display属性值为"block"，成为"块级"元素
  • 块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形
  • 特点
    • 每个块级元素都从新的一行开始，并且其后的元素也另起一行
    • 元素的高度、宽度、行高以及顶和底边距都可设置
    • 元素宽度在不设置的情况下，是它本身父容器的100%
9.5.2 行内元素
  • 默认display属性值为"inline"，称为"行内"元素
  • 行内元素 ：自己的独立空间，它是依附于其他块级元素存在的
  • 对行内元素设置高度、宽度、内外边距等属性，都是无效的
  • 特点
    • 和其他元素都在一行上
    • 元素的高度、宽度及顶部和底部边距不可设置
    • 元素的宽度就是它包含的文字或图片的宽度，不可改变
9.5.3 块级内联元素
  • 属性值：block-inline
  • 块级内联元素：既可以换行，又能实现里面放多少内容，占多大地方
相关推荐
群联云防护小杜5 分钟前
如何有效防御服务器DDoS攻击
运维·服务器·前端·tcp/ip·安全·ddos
liuyang___1 小时前
vue3+ts的computed属性怎么用？
前端·javascript·vue.js
Python智慧行囊2 小时前
前端三大件--HTML
css·python
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS珠海网页设计网页设计（4页）附源码
javascript·css·html
爱编程的鱼2 小时前
如何用CSS实现HTML元素的旋转效果：从基础到高阶应用
前端·css·html
lhhbk3 小时前
angular的cdk组件库
前端·javascript·angular.js
Wcowin3 小时前
Mkdocs页面如何嵌入PDF
前端·pdf·mkdocs
Joker Zxc3 小时前
【前端基础】7、CSS的字体属性（font相关）
前端·css
JMS_兔子5 小时前
【面试 · 一】vue大集合
前端·javascript·vue.js
淺黙ベ5 小时前
✍️【TS类型体操进阶】挑战类型极限，成为类型魔法师！♂️✨
前端·vue.js·typescript·交互
热门推荐
01【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！02KGG转MP3工具|非KGM文件|解密音频03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】05YOLOv8目标检测在RK3588部署全过程06西电B测-计算机网络综合实验(含验收问题)07yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记08苍穹外卖面试总结09DeepSeek各版本说明与优缺点分析10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）