[前端开发] CSS基础知识 [上]

  • 下篇:CSS基础知识 [下]

CSS基础知识 [上]

    • CSS 学习
      • CSS 引入方式
      • 选择器
    • 文字属性
    • 盒模型
      • 盒模型分类
      • 盒模型应用
    • 盒模型单位

CSS 学习

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

  • CSS 规则: 选择器 + 一条或多条声明
    • 选择器: 需要改变样式的 HTML 元素
    • 声明: 由一个属性和一个值组成(属性和值用冒号分开)

CSS 引入方式

  1. 内联样式(行内样式)

    • 直接在标签内设置(style="...;...;" 中间用 ; 分开)
      <p style="color: blue; font-size: 20px;">CSS</p>
      
  2. 内部样式(不同页面需要重复写才能生效)

    • .html 文件中的 <header></header> 里面添加 <style></style> 来设置样式.
      <!--给p标签设置样式,将这个放在<header>内--><style>p{color:blue;font-size: 10px;}
      </style>
      
  3. 外部样式(推荐使用)

    • 当样式需要应用于多个页面时,使用外部样式可以通过改变一个文件来改变整个站点的外观,每个页面使用 <link> 标签链接到样式表, 该标签写在文档的头部,即 <header></header> 里.
      <link rel="stylesheet" type="text/css" href="xxx.css">
      
      • rel="stylesheet" 是默认的不许修改
      • href="xxx.css" 引入 .css 文件
      • type="text/css" 指示了被链接的文档是一个外部的样式表

选择器

  • 内部和外部样式中不同样式书写方法

全局选择器

  • 可以和任何元素匹配,优先级最低,一般做样式初始化
    *{margin: 0;
    }
    

元素选择器

  • HTML文档中使用的各个元素(img|p|div|body|b)
  • 标签选择器: 选择页面上所有这类型的标签,设置样式
    img{width: 20px;
    }
    

类选择器

  • 规定用 class="类名" + .类名{} 搭配使用, 针对你想要的所有标签使用

    <p class="title">你好</p><!--设置样式-->
    <style>.title{color: yellow;font-size: 20px;}
    </style>
    
    • 注意:
      • 类名不可以用数字开头
      • 同一个标签可以使用多个类选择器,用空格分开, 例如 class="classone classtwo"
      • 类选择器可被多个标签使用

ID选择器

  • 针对某一个特定的标签使用,只能使用一次(css中用 # 来定义)
    <h1 id="title">hello</h1><style>#title{border: 3px dashed green;}   
    </style>
    
    • ID是唯一的
    • ID不能用数字开头
    • 测试提示:要把<style></style>放在 <header></header> 内运行或者在 .css 中写入然后在 .html 中引入.

合并选择器

  • 语法: 选择器1, 选择器2 {...}
  • 提取共同样式

,减少代码量
css p, div, h1 { font-size: 20px; color: blue; }

文字属性

  • text-align: 水平方向对齐方式(left/center/right)
  • line-height: 设置行高
  • word-spacing: 设置字间距
  • letter-spacing: 设置字间距
  • text-indent: 设置首行缩进
  • text-decoration: 设置文本装饰
  • text-transform: 设置字母大小写

盒模型

盒模型:指的是页面上的每个元素都是一个矩形盒子,这个盒子由contentpaddingbordermargin四个部分组成.

  • content: 内容区域,显示内容
  • padding: 内边距,内边距是包围内容的透明区域,内边距的背景可以设置背景颜色或背景图片
  • border: 边框,边框是围绕在内边距和外边距外的边界
  • margin: 外边距,外边距是指元素边缘与外部元素边缘之间的距离

盒模型分类

  1. 标准盒模型

    • box-sizing: content-box; (默认属性)
      • widthheight 只包含内容(content)的宽度和高度,不包括内边距(padding)、边框(border)、外边距(margin)
  2. IE 盒模型

    • box-sizing: border-box;
      • widthheight 包含内容(content)、内边距(padding)和边框(border),但不包括外边距(margin)

盒模型应用

div {width: 300px;height: 200px;padding: 20px;border: 10px solid black;margin: 20px;box-sizing: border-box; /* 或者 content-box */
}
  • 在此例中,元素的总宽度为 300px + 2*20px + 2*10px = 360px, 总高度为 200px + 2*20px + 2*10px = 260px

盒模型单位

  • px(像素): 绝对单位,设置的大小不会改变
  • em: 相对单位,以父元素的 font-size 为基准进行计算,当一个元素没有设置 font-size 属性时,其计算值将继承父元素的 font-size
  • rem: 相对单位,始终相对于根元素(html)的字体大小来计算

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/684186.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文生图提示词:气候特征

天气和气候 --气候特征 Climate Features 气候特征的基本词汇&#xff0c;涵盖了温度和湿度的变化&#xff0c;以及它们在不同气候类型中的体现。 Hot 炎热 Cold 寒冷 Warm 温暖 Cool 凉爽 Humid 湿润 Dry 干燥 Mild 温和 Chilly 冷飕飕 Freezing 冰冻 Sweltering 酷热 Frosty …

RK3568平台开发系列讲解(实验篇)杂项设备驱动实验

🚀返回专栏总目录 文章目录 一、什么是杂项设备驱动二、杂项设备的注册和卸载三、杂项设备驱动实验代码沉淀、分享、成长,让自己和他人都能有所收获!😄 一、什么是杂项设备驱动 在 Linux 中,把无法归类的五花八门的设备定义成杂项设备。相较于字符设备,杂项设备有以下两…

企业数字化转型战略规划与实践:迈向未来的关键之举

在信息技术的不断革新和全球数字化浪潮的推动下&#xff0c;企业数字化转型已经成为当今商业世界中不可或缺的一项战略规划。随着技术的进步&#xff0c;企业必须积极应对数字化转型的挑战&#xff0c;并将其作为发展的关键驱动力。本文将探讨企业数字化转型的重要性&#xff0…

幻兽帕鲁联机服务器搭建新手小白教程

这里分为两种搭建方式&#xff0c;都是采用的一键搭建的傻瓜式教程&#xff0c;1分钟就可以搞定。 一、通过阿里云一键部署幻兽帕鲁服务器 以下教程基于阿里云服务器来搭建幻兽帕鲁游戏服务器&#xff0c;通过一键部署的方式&#xff0c;最快1分钟即可完成部署。 阿里云一键…

【白话前端】一篇文章区分js库和js框架

假定你选择自助游&#xff0c;你需要找不同服务商帮你解决吃住行的问题&#xff0c;这些服务商就是js库。你也可以选择旅行社&#xff0c;给你全解决&#xff0c;这是js框架。 JavaScript库和框架都是用于简化Web开发的工具&#xff0c;但它们之间有一些区别。 JavaScript库&a…

【Java多线程】Thread类的基本用法

目录 Thread类 1、创建线程 1.1、继承 Thread&#xff0c;重写run 1.2、实现 Runnable&#xff0c;重写run 1.3、使用匿名内部类&#xff0c;继承 Thread&#xff0c;重写run 1.4、使用匿名内部类&#xff0c;实现 Runnable&#xff0c;重写run 1.5、使用 lambda 表达式…

Swift Combine 级联多个 UI 更新,包括网络请求 从入门到精通十六

Combine 系列 Swift Combine 从入门到精通一Swift Combine 发布者订阅者操作者 从入门到精通二Swift Combine 管道 从入门到精通三Swift Combine 发布者publisher的生命周期 从入门到精通四Swift Combine 操作符operations和Subjects发布者的生命周期 从入门到精通五Swift Com…

KMS知识管理系统:一文扫盲,体验为王,落地为皇

知识管理系统是学习型组织的必备&#xff0c;重要性不言而喻&#xff0c;但是往往在执行中不能落地&#xff0c;本位尝试做些KMS的扫盲。 一、KMS是什么 知识管理系统&#xff08;英语&#xff1a;Knowledge management system&#xff09;是一种用于管理和共享企业内部知识的…

如何为你的幻兽帕鲁服务器手动配置虚拟内存或Swap、Zram

其实非常简单&#xff0c;如果是Windows系统服务器的话&#xff0c;直接远程连接到服务器桌面。 连上之后&#xff0c;打开设置&#xff0c;找到“高级系统设置” 可以参考视频教程&#xff1a; 拒绝卡顿&#xff01;幻兽帕鲁服务器内存优化攻略&#xff01; 详细教程地址&…

RedisTemplate重写的一些模板

1.为什么要重写RedisTemplate 我们知道SpringBoot官方给出了2种实例化方式&#xff0c;分别是 RedisTemplate<Object,Object> 和 RedisTemplate<String,String> 这两种或多或少都有一些问题&#xff1b; 1.第一种对key所采用的序列化方式是JdkSerializationRedis…

常用文件命令

文章目录 文件命令文件内容查看catnlmoreless&#xff08;more的plus版&#xff09;headtailod 文件属性操作用户权限常见的权限chownchmodchgrpumask 隐藏属性常见的隐藏属性lsattrchattr 查找文件查看文件类型查找文件位置whichwhereislocatefind 文件操作&#xff08;复制、…

深度学习之梯度下降算法

梯度下降算法 梯度下降算法数学公式结果 梯度下降算法存在的问题随机梯度下降算法 梯度下降算法 数学公式 这里案例是用梯度下降算法&#xff0c;来计算 y w * x 先计算出梯度&#xff0c;再进行梯度的更新 import numpy as np import matplotlib.pyplot as pltx_data [1.0,…

2024 前端面试题(GPT回答 + 示例代码 + 解释)No.21 - No.40

本文题目来源于全网收集&#xff0c;答案来源于 ChatGPT 和 博主&#xff08;的小部分……&#xff09; 格式&#xff1a;题目 h3 回答 text 参考大佬博客补充 text 示例代码 code 解释 quote 补充 quote 上一篇链接&#xff1a;2024 前端面试题&#xff08;GPT回答 示例…

深度学习领域的最新前沿:2024年的关键突破与趋势

文章目录 导言01 深度学习的基本原理和算法1.1 神经网络&#xff08;Neural Networks&#xff09;1.2 前馈神经网络&#xff08;Feedforward Neural Network&#xff09;1.3 反向传播算法&#xff08;Backpropagation&#xff09;1.4 激活函数&#xff08;Activation Function&…

基于HTML5实现动态烟花秀效果(含音效和文字)实战

目录 前言 一、烟花秀效果功能分解 1、功能分解 2、界面分解 二、HTML功能实现 1、html界面设计 2、背景音乐和燃放触发 3、燃放控制 4、对联展示 5、脚本引用即文本展示 三、脚本调用及实现 1、烟花燃放 2、燃放响应 3、烟花canvas创建 4、燃放声音控制 5、实际…

五个编程原则:Rob Pike‘s 5 Rules of Programming

原文 https://users.ece.utexas.edu/~adnan/pike.html Rob Pike’s 5 Rules of Programming Rule 1. You can’t tell where a program is going to spend its time. Bottlenecks occur in surprising places, so don’t try to second guess and put in a speed hack until y…

用函数实现乘法口诀表

用函数实现乘法口诀表 实现一个函数&#xff0c;打印乘法口诀表&#xff0c;口诀表的行数和列数自己指定 如&#xff1a;输入9&#xff0c;输出99口诀表&#xff0c;输出12&#xff0c;输出1212的乘法口诀表。 思路&#xff1a; 1. 设计函数原型&#xff0c;不需要返回值&…

开源图形库Thor Vector Graphics:Paint类, Result、 CompositeMethod、 BlendMethod 枚举类型

0. 简介 开源图形库Thor Vector Graphics的Paint类是一个用于绘制图形的API类&#xff0c;提供了各种功能来控制绘制对象的外观和行为。所属头文件&#xff1a;thorvg.h 1. 成员函数与使用方法 Result rotate(float degree) noexcept&#xff1a;设置对象的旋转角度。 使用方…

idea基础配置

配置jre 【file】->【Project Structure】 设置SDK设置Language level 【Settings】->【Build,Execution,Deployment】->【Compiler】->【Java Compiler】设置Project bytecode version&#xff1a; 配置maven 【Settings】->【Build,Execution,Deployment】…

25届Javaer在2023的打怪升级之路

开头说一下基本信息&#xff1a;25届Java&#xff0c;二本&#xff0c;科班 刚刚结束第二段实习&#xff0c;回家过年准备春招&#xff0c;浅浅记录一下过去的一年 开始的原因&#xff1a; 虽然很不想回忆&#xff0c;但是走上Java的道路还是和前女友有些关系。 在今年年初…