css3基础语法与盒模型

css3基础语法与盒模型

  • 前言
  • CSS3基础入门
    • css3的书写位置
      • 内嵌式
      • 外链式
      • 导入式(工作中几乎不用)
      • 行内式
    • css3基本语法
    • css3选择器
      • 标签选择器
      • id选择器
      • class类名
      • 原子类
      • 复合选择器
      • 伪类
      • 元素关系选择器
      • 序号选择器
      • 属性选择器
      • css3新增伪类![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7e56e99b96c245c0b4c15fdadd46fa29.png)
      • 伪元素
      • 层叠性和选择器权重计算
        • 普通选择器权重
        • 复杂选择器权重
        • !important提升权重
    • 文本与字体属性
      • 常用文本样式属性
        • color 属性
        • font-size属性
        • font-weight属性
        • font-style属性
        • text-decoration属性
      • 字体属性详解
        • font-family属性
      • 段落和行相关属性
      • 继承性
    • 盒模型
        • **padding**内边距
        • **margin**外边距
        • **box-sizing**属性
        • **display**属性
        • 元素的隐藏
  • 结语

前言

CSS是网页设计的灵魂,而了解其基础语法与盒模型则是打开这扇门的第一步。就像学习一门新语言,我们需要了解语法规则,并掌握构建页面的基本单位,即盒模型。本文将带你踏上这场代码之旅,解开CSS3的神秘面纱。

CSS3基础入门

  • CSS (cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言
  • CSS3是CSS的最新版本,增加了大量的样式、动画、3D特效和移动端特性等
    在这里插入图片描述

css3的书写位置

内嵌式

在标签对中,书写标签对,里面书写CSS语句

外链式

  • 可以将CSS单独存为.css文件,然后使用标签引入它
  • 外链式的优点:多个html网页,可以共用一个css样式表文件

在这里插入图片描述

导入式(工作中几乎不用)

在这里插入图片描述

行内式

在这里插入图片描述

css3基本语法

在这里插入图片描述

  • 最后一条样式可以不书写分号
  • 可以没有换行.
  • 注释 /**/

css3选择器

标签选择器

  • 标签选择器也称元素选择器、类型选择器,它直接使用元素的标签名当做选择器,将选择页面上所有该种标签
  • 标签选择器将选择页面上所有该种标签,无论这个标签所处位置的深浅
  • 标签选择器“覆盖面”非常大,所以通常用于标签的初始化

id选择器

  • 标签可以有id属性,是这个标签的唯一标识
  • id的名称只能由字母、数字、下划线、短横构成,且不能以数字开头,字母区分大小写,但习惯上一般为小写字母
  • 同一个页面上不能有相同id的标签
  • CSS选择器可以使用井号#前缀,选择指定id的标签

class类名

  • class属性表示“类名"
  • 类名的命名规范和id的命名规范相同
  • 使用点前缀选择指定class的标签
  • 多个标签可以为相同类名
  • 同一个标签可以同时属于多个类,类名用空格隔开

原子类

  • 在做网页项目前,可以将所有的常用字号、文字颜色、行高外边距、内边距等都设置为单独的类
  • HTML标签就可以“则需选择”它的类名了,这样可以非常快速的添加一些常见样式

复合选择器

在这里插入图片描述

伪类

  • 指定要选择的元素的特伪类是添加到选择器的描述性词语,殊状态,超级链接拥有4个特殊状态
  • a标签的伪类书写,要按照“爱恨准则”的顺序,否则会有伪类不生效
    在这里插入图片描述
    在这里插入图片描述

元素关系选择器

在这里插入图片描述

序号选择器

在这里插入图片描述

  • :nth-child()可以写成an + b的形式,表示从b开始每a个选一个,注意不能写为b +an

  • 2n+1等价于odd,表示奇数

  • 2n等价于even,表示偶数

    .box2 p:ntn-child(2n){color:green
    }
    // 等价于2n = even
    .box2 p:ntn-child(even){color:green
    }
    

在这里插入图片描述

注意陷阱:
在这里插入图片描述

属性选择器

在这里插入图片描述

css3新增伪类在这里插入图片描述

伪元素

  • CSS3新增了“伪元素”特性,顾名思义,表示虚拟动态创建的元素
  • 伪元素用双冒号表示,IE8可以兼容单冒号
  • ::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素,必须设置 content 属性表示其中的内容
  • ::after 创建一个伪元素,其将成为匹配选中的元素的最后个子元素,必须设置 content 属性表示其中的内容
  • ::selection CSS伪元素应用于文档中被用户高亮的部分,使用鼠标圈选的部分
  • :first-letter会选中某元素中(必须是块级元素)第一行的第一个字母
  • ::first-line会选中某元素中 (必须是块级元素)第一行全部文字

层叠性和选择器权重计算

普通选择器权重

id权重>class权重>标签权重

复杂选择器权重

在这里插入图片描述

!important提升权重

在这里插入图片描述

文本与字体属性

常用文本样式属性

color 属性
  • color属性可以设置文本内容的前景色
  • color属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法
    • 英语单词表示法,比如color:red 仅仅用于学习时临时设置一下颜色,工作时基本不用这样的形式,因为追求精确
    • 十六进制表示法是所有设计软件中都通用的颜色表示法,设计师给我们的设计图上面标注的颜色,通常为十六进制表示 比如:color:#ff0000(十六进制ff就是十进制的255,每种颜色分量都是0~255的数字),如果颜色值是#aabbcc的形式,可以简写为#abc(常见的颜色有:黑色#000、白色#fff、灰色#ccc、#333、#2f2f2f等)
    • rgb()表示法,比如 color:rgb(255,0,0)
    • 颜色也可以用rgba()表示法,最后一个参数表示透明度,介于0到1之间,0表示纯透明,1表示纯实心 比如 color:rgba(255,0,0,.65),rgba()表示法从IE9开始兼容
font-size属性

font-size属性用来设置字号,单位通常为px,em,rem,网页文字正文字号通常是16px,浏览器最小支持10px字号

font-weight属性

font-weight属性设置字体的粗细程度,通常就用normal和bold两个值
在这里插入图片描述

font-style属性

font-style设置字体的倾斜
在这里插入图片描述

text-decoration属性

text-decoration属性用于设置文本的修饰线外观的(下划线、删除线)
在这里插入图片描述

字体属性详解

font-family属性
  • font-family属性用于设置字体
  • 字体可以是列表形式,一般英语字体放到前面,后面的字体是前面的字体的“后备”字体 eg:font-family:serif,“Times New Roman”,“微软雅黑” ,注意(字体名称中有空格,必须用引号包裹,中文字体也需要用引号包裹)
  • 中文字体也可以称呼它们的英语名字:eg:微软雅黑 Microsoft Yahei , 宋体 SimSun
  • 字体通常必须是用户计算机中已经安装好的字体,所以一般来说设置为微软雅黑和宋体较多,设置成其他字体较少
  • 如何设置为用户电脑中没有的字体呢?那就必须自己定义新字体,这就需要我们有字体文件,用户加载网页的时候,会同时下载这些字体文件
  • 字体文件根据操作系统和浏览器不同,有eot、woff2.woff、ttf、svg文件格式,需要同时有这5种文件

段落和行相关属性

  • text-indent属性定义首行文本内容之前的缩进量,缩进两个字符应该写作eg:text-indent:2em(em表示2个字符的宽度)
  • line-height属性用于定义行高,单位可以是以px为单位的数值,也可以没有单位的数值,表示字号的倍数,这是最推荐的写法 eg:line-height:1.5
  • 单行文本垂直居中,设置行高=盒子高度,即可实现单行文本垂直居中 eg:text-align:center 文本水平居中
  • font合写属性:eg font:20px/1.5 Arial,“微软雅黑” (字号、行高、字体)在这里插入图片描述

继承性

  • 文本相关的属性普遍具有继承性,只需要给祖先标签设置,即可在后代所有标签中生效
  • 在继承的情况下,选择器权重计算失效,而是”就近原则(谁描述的近,听谁的)“

盒模型

所有HTML标签都可以看成矩形盒子,由width、height、padding、border构成,称为“盒模型

padding内边距
  • 上右下左(padding:1px 1px 1px 1px) 上左右下(padding:1px 1px 1px) 上下左右(padding:1px 1px)
margin外边距
  • 竖直方向的margin有塌陷现象: 小的margin会塌陷到大的margin中,从而margin不叠加,只以大值为准
  • 一些元素(比如body、ul、p等) 都有默认的margin,在开始制作网页的时候,要将他们清除
    • eg: *{ margin:0;padding:0} *通配符选择器表示选择所有元素
    • body,ul,p{margin:0;padding:0} 通配符有效率问题,应该使用并集选择器
  • 盒子的水平居中,将margin都设置为auto,盒子将水平居中
box-sizing属性
  • 将盒子添加了box-sizing: border-box; 之后,盒子的widthheight数字就表示盒子实际占有的宽高(不含margin)了,即padding、border变为“内缩”的,不再“外扩
  • box-sizing属性大量应用于移动网页制作中,因为它结合百分比布局、弹性布局等非常好用,在PC页面开发中使用较少
  • box-sizing属性兼容到IE9
display属性

在这里插入图片描述

  • 行内块:img和表单元素师特殊的行内块,它们既能够设置宽度高度,也能够并排显示
  • 行内元素和块级元素的相互转换
    • 使用display:block;即可将元素转为块级元素
    • 使用display:inline;即可将元素转为行内元素,将元素转为行内元素的应用不多见
    • 使用display:inline-block;即可将元素转为行内块
元素的隐藏
  • 使用display: none;可以将元素隐藏,元素将彻底放弃位置,如同没有写它的标签一样
  • 使用visibility: hidden;可以也可以将元素隐藏,但是元素不放弃自己的位置

结语

在学习CSS3的基础语法与盒模型之后,你将能够更加自如地掌控页面的外观与布局。这是一场充满乐趣的旅程,让我们共同迎接前端世界的挑战,创造出令人瞩目的网页设计。

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

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

相关文章

canvas设置渐变色文字(线性、径向)

查看专栏目录 canvas示例教程100专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重…

gitee完整使用教程,创建项目并上传

目录 一 什么是gitee 二 安装Git 三 登录gitee,生成密钥 四 配置SSH密钥 五 创建项目 六 克隆仓库到本地 七 关联本地工程到远程仓库 八 添加文件 九 异常处理 十 删除仓储 十一 git常用命令 一 什么是gitee gitee是开源中国推出的基于git的代码托管服务…

Sqoop性能优化:高效数据传输的技巧

当使用Apache Sqoop进行数据传输时,性能优化至关重要。高效的数据传输可以减少任务运行时间,减轻集群负载,提高整体工作效率。在本文中,将深入探讨Sqoop性能优化的关键技巧,并提供丰富的示例代码,以帮助大家…

response.cookies详解

response.cookies详解 大家好,我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天,让我们一同深入探讨在Web开发中不可或缺的一项知识——“response.cookies”&…

短视频账号矩阵剪辑分发系统技术源头开发

1.技术开发必备的开发文档说明: 1.1系统架构: 抖音SEO排名系统主要由以下几个模块组成: 1. 数据采集模块:负责采集抖音上的相关数据,包括视频、用户、话题等。 2. 数据处理模块:对采集到的数据进行处理&a…

使用斐波那契(Fibonacci)数列来测试各大语言的性能

笔者使用最多的语言是C,目前项目中在使用Go,也使用过不少其它语言,像Erlang,Python,Lua,C#等等。最近看到C#夺冠,首次荣获 TIOBE 年度编程语言,同时也看到网上有不少Java与C#之争的文…

【机器学习300问】4、机器学习到底在学习什么?

首先我们先了解一个前置问题,再回答机器学习到底在学习什么。 一、求机器学习问题有哪几步? 求解机器学习问题的步骤可以分为“学习”和“推理”两个阶段。首先,在学习阶段进行模型的学习,然后,在推理阶段用学到的模型…

C++ STL中的 pair

pair 概述 pair 用于将两个可能是不同数据类型的值结合在一起。pair 提供了一种将两个异构对象存储为单个单元的方法。如果想存储元组&#xff0c;基本上会使用它。pair 容器是一个定义在 <utility> 头文件中的简单容器&#xff0c;由两个数据元素或对象组成。 第一个元…

匠心科技BLDC开发板原理图讲解

匠心科技BLDC开发板资料 链接&#xff1a;https://pan.baidu.com/s/1s5YjzRSDLKQvl86lBVAqKA?pwda6cx 提取码&#xff1a;a6cx 解压密码&#xff1a;JXKJ_RALDNWB站视频讲解&#xff08;&#xff09; 链接: 匠心科技直流无刷电机开发板原理图讲解 BLDC的开发板主要分为四个模…

【PythonCode】eval()函数巩固和复数模运算等

【PythonCode】eval()函数巩固和复数模运算等 前言 在很多高大上的项目中&#xff0c;一个花费很长时间、消耗大量人力物力才查出来的BUG&#xff0c;经常是一个符号错误、一个值传错、一个基本函数的用法没有考虑周到等基本问题&#xff0c;所以基础不牢、地动山摇&#xff0…

Linux的权限(1)

目录 操作系统的"外壳"程序 外壳程序是什么&#xff1f; 为什么存在外壳程序&#xff1f; 外壳程序怎么运行操作&#xff1f; 权限 什么是权限&#xff1f; 权限的本质&#xff1f; Linux中的&#xff08;人&#xff09;用户权限&#xff1f; su和su -的区别…

2024 1.6~1.12 周报

一、上周工作 论文研读 二、本周计划 思考毕业论文要用到的方法或者思想&#xff0c;多查多看积累可取之处。学习ppt和上周组会内容、卷积神经网络。 三、完成情况 1. 数据训练的方式 1.1 迁移学习 迁移学习是一种机器学习方法&#xff0c;把任务 A 训练出的模型作为初始模…

react 项目结构配置

1 项目整体目录结构的搭建 如下图&#xff1a; 2 重置css样式: normalize.css reset.less ; 第一步 安装 npm i normalize.css 入口文件index.tsx导入&#xff1a;import ‘noremalize.css’ 第二步 创建自己的css样式&#xff1a;在assets文件夹中创建css…

常用冷凝器的传热系数与单位换热面积推荐数据

制冷剂 氨 立式壳管式 700~800 传热系数W/m2℃ 3000~4000 单位面积热负荷W/m2 &#xff08;1&#xff09;温升2~3℃ &#xff08;2&#xff09;传热温差4~6℃ &#xff08;3&#xff09;单位面积冷水耗量1~1.7m3/m2h &#xff08;4&#xff09;光钢管 &#xff08;5&#xf…

【设计模式-03】Strategy策略模式及应用场景

一、简要描述 Java 官方文档 Overview (Java SE 18 & JDK 18)module indexhttps://docs.oracle.com/en/java/javase/18/docs/api/index.html Java中使用到的策略模式 Comparator、comparable Comparator (Java SE 18 & JDK 18)declaration: module: java.base, pa…

JAVA进化史: JDK14特性及说明

JDK 14于2020年3月发布。这个版本引入了一些新特性和改进&#xff0c;以下是其中一些主要特性 JEP 361: 进一步改进了switch表达式 进一步改进了switch表达式&#xff0c;引入了新的用法和语法。 // 使用标准的switch表达式 int day 3; String dayType switch (day) {case…

js(JavaScript)数据结构之散列表(Hash)

什么是数据结构&#xff1f; 下面是维基百科的解释&#xff1a; 数据结构是计算机存储、组织数据的方式。数据结构意味着接口或封装&#xff1a;一个数据结构可被视为两个函数之间的接口&#xff0c;或者是由数据类型联合组成的存储内容的访问方法封装。 我们每天的编码中都会…

web学习笔记(十五)

目录 1.Date对象 1.1日期对象的概念 1.2Date()方法的使用 1.3Date()常用方法汇总 1.4例题&#xff1a;用函数编写一个倒计时 2.函数 2.1函数的概念 2.2函数的使用 2.3函数的参数 2.4函数的声明 2.5函数的返回值 2.6异步函数 3特殊函数类型 3.1匿名函数 3.2箭头函数…

前端开发中需要注意的CSS命名规则以及书写顺序

1、CSS的命名——BEM规则&#xff1a; CSS命名一般是用 BEM 规则命名的。它背后的想法是将用户界面划分为独立的块。 BEM的意思就是B模块(block)、E元素(element)、M修饰符(modifier)&#xff0c; 即&#xff1a;[block]__[element]--[modifier]。 模块和子元素之间用两个下划…

SPARK--cache(缓存)和checkpoint检查点机制

SPARK–cache(缓存)和checkpoint检查点机制 rdd的特性 缓存和checkpoint 作用都是进行容错rdd在计算是会有多个依赖&#xff0c;为了避免计算错误是从头开始计算&#xff0c;可以将中间* 依赖rdd进行缓存或checkpoint缓存或checkpoint也叫作rdd的持久化一般对某个计算特别复杂的…