CSS基础、盒子模型、选择器

已于 2022-04-16 22:30:35 修改
阅读量167 收藏
点赞数 2
分类专栏： 前端 文章标签： 前端
于 2022-04-10 22:29:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ordinaryzry/article/details/124085614
版权

1、CSS基础

CSS概述

CSS（Cascading style sheets 层叠样式表）是为了将网页的内容和样式相分离，便于修改网页的样式。
主要分为行内样式、内嵌样式和列表样式三种类型。

  • 行内样式：将属性直接添加到当前需要添加样式的标签内部【当前样式只对当前标签有效】
  • 内嵌样式：将CSS代码内嵌到当前页面的head标签部分 【当前样式只对当前页面的有效】
    • 即使有公共的CSS代码，也是每个页面都要定义的
    • 适合文件很少，CSS代码也不多的情况
  • 链接样式：使用单独的样式表文件来添加样式 【文件后缀为 .css 】
    • <link rel="stylesheet" href="文件的位置">
    • 只需在 head 标签添加 link 标签即可引用
    • 实现了将页面结构 HTML 与样式 CSS 代码完全分离；
    • 维护方便（如果需要改变网站风格，只需改动公共 CSS 文件）
      *可以在同一个 HTML 文档内部引用多个外部样式表

这里是引用样式之间的优先级：
1、多重样式可以层叠，可以覆盖
2、样式的优先级按照“就近原则”
3、行内样式 > 内嵌样式 > 链接样式 > 浏览器默认样式

文本样式

1、单位

单位描述
px像素
em字符（自动适应用户所使用的字体）
%百分比

2、颜色

颜色描述
red、blue、green、…颜色名
rgb(x,x,x)RGB值（0-255）
rgb(x%,x%,x%)RGB百分比值（0%-100%）
rgba(x,x,x,x)RGB值，透明度（0.0【完全透明】-1.0【不透明】）
#rrggbb十六进制数

3、文本

属性描述取值
color文本颜色red、#F00、rgb(255,0,0)
letter-spacing字符间距2px、-3px
line-height行高14px、1.5em、120%
text-align对齐center 、left、right、justify
text-decoration装饰线none、overline、underline、line-through
text-indent|首行缩进|2em`

line-height【行高可应用于垂直居中】
text-decoration:none【可用于删去超链接的下划线】

4、字体

属性描述举例
font在一个声明中设置所有的字体属性font:bold 18px '宋体'
font-family字体系列font-family:"Microsoft YaHei";
font-size字号14px、120%、pt（表示磅值）
font-style斜体italic
font-weight粗体bold

1、font:斜体 粗体 字号/行高 字体
2、网页安全字体：font-family:"Hiragino Sans GB","Microsoft YaHei",sans-serif;【定义多种字体，可进行选择，第一种有就用第一种，没有就看下一种有没有……以此类推】

背景样式

属性描述
background-color背景颜色
background-image背景图片 url("logo.jpg")
background-repeat背景图片的填充方式
background顺序：颜色 图片 repeat

1、背景图片显示时会覆盖背景颜色
2、background-repeat的值

值描述
repeat棋盘式
repeat-x水平填充
repeat-y垂直填充
no-repeat不填充

列表样式

属性描述
list-style所有用于列表的属性设置于一个声明中
list-style-image为列表项标志设置图像 url("图像的位置")
list-style-position标志的位置【inside/outside】
list-style-type标志的类型
  • list-style-type的值
    • 无序列表ul
      描述
      none`
      disc`
      circle`
      square`
    • 有序列表ol
      描述
      decimal`
      lower-roman`
      upper-roman`
      lower-alpha`
      upper-alpha`
      lower-Greek`
      lower-latin`
      upper-latin`

2、选择器

选择器类型

1 标签选择器

和标签同名的选择器
例：

<style>
    body{
        /*此处插入内容*/
    }
    h1{
        /*此处插入内容*/
    }
    p{
        /*此处插入内容*/
    }
</style>

2 类别选择器

在需要定义的标签内采用class属性来进行类别样式的引用

<head>
    <meta charset="UTF-8">
    <title>example</title>
    <style>
        .one{
            /*此处插入内容*/
        }
        .two{
            /*此处插入内容*/
        }
    </style>
</head>
<body>
    <p class="one">类别1</p>
    <p class="two">类别2</p>
</body>

3 ID选择器

在需要定义的标签内采用id属性来进行类别样式的引用
（具有唯一性，只能在一个元素上显示）

<head>
    <meta charset="UTF-8">
    <title>example</title>
    <style>
        #one{
            /*此处插入内容*/
        }
        #two{
            /*此处插入内容*/
        }
    </style>
</head>
<body>
    <p id="one">文字1</p>
    <p id="two">文字2</p>
</body>

4 伪类选择器

:伪类选择器
样例：超链接

超链接的状态描述
a:link普通的、未被访问的链接
a:visited用户已访问的链接
a:hover鼠标指针位于链接的上方悬停
a:active链接被点击的时刻

注意：
1、a:hover必须位于a:link和a:visited之后
2、a:active必须位于a:hover之后

5 选择器组

【后代节点：B是A的子节点或间接的子节点】
【兄弟节点：AB具有相同的父节点】

名称组合选择器含义
选择器组A,B匹配满足A或者B的任意元素
后代选择器A B匹配B元素，B是A的后代节点
子选择器A>B匹配B元素，B是A的直接子节点
相邻兄弟选择器A+B匹配B元素，B是A的下一个兄弟节点
通用兄弟选择器A~B匹配B元素，B是A之后的任意一个兄弟节点

3、盒子模型

页面上的所有元素（ 区域、图片、导航、列表、段落 ）都可以是盒子，占据着一定的页面空间

盒子模型的组成

内容content
外边距padding
边框border
外边框margin

1 每个样式属性都有方向，排序为上、右、下、左
2 实际宽度、高度：width ( content ) + padding + border + margin
3 padding和margin

显示情况排序
显示四个值时上 右 下 左
显示两个值时上/下 左/右 （即上与下值相同，左与右值相同）
显示值为三个时上 右/左 下（即左与右值相同）
  • 若上与下值相同，左与右值不同，还是老老实实写四个吧，这个没有省略写法 :）

4 ·margin的合并：垂直方向合并（采取外边距高的那个作为两边之间的距离），水平方向上不合并；
5 margin:0 auto;可以进行盒子的水平居中
6 border边框

属性描述
border-widthpx（像素）、thin、medium、thick
border-styledashed、dotted、solid、double
border-color颜色
borderborder:width style color

7 border边框用于制作水平分割线

<style>
	.line{
		height:1px;
		width:500px;
		border-top: 1px solid #e5e5e5;
	}
</style>

8 overflow属性【当内容盒子框时，内容的处理方法】

值描述
hidden超出部分不可见
scroll显示滚动条
auto如果有超出部分，显示滚动条

9 div标签的盒子模型会自动换行，每一个独占一行；
10 常用语句段：对浏览器默认的设置清零【只有当属性值为零时才可以没有单位】

<style>
	*{
		margin:0;
		padding:0;
	}
</style>
嘿0v0
关注
专栏目录
CSS盒子模型和部分选择器
肉嘟嘟的博客
07-14 751
CSS基础
HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
04-26 456
文章目录1、CSS基础知识2、css样式2.1、代码：2.2 测试结果3、CSS的语法3.1 代码4、块元素和行内元素4.1 代码4.2 测试结果5、常用的选择器5.1 代码块5.2 测试结果6、父类和子类选择器6.1 代码6.2 测试结果7、列表7.1 代码7.2 测试结果8、盒子模型8.1 代码8.2 测试结果9、内边距9.1 代码块9.2 测试结果10、外边距10.1 代码块10.2 测试结果11、块元素和行内元素、display11、代码11.2 测试结果12、overflow12.1 、代码12.
CSS(笔记中)
G18703584681的博客
11-20 386
强烈推荐新手观看！！！下正在进行中~
week3--CSS基础 盒子模型 选择器
mengweiwei_的博客
04-14 787
CSS基础 && 盒子模型 && 选择器 今天下午 我是V神 但是此时此刻 CSS 你是我的神CSS基础 && 盒子模型 && 选择器写在前面一、==CSS==1.==CSS是什么？==2.==CSS样式如何引用？==3.==CSS进阶==二、==选择器==1.==标签选择器==2.==类选择器==3.==id选择器==4.==通配符选择器==三、==盒子模型==总结 写在前面 恍惚之间已经是第三次写博客了 经过两周多系统的web学习，我.
CSS基础+盒子模型+选择器
weixin_52563771的博客
04-27 843
CSS基础+盒子模型+选择器一，CSS基础1.1 CSS简介1.2 CSS语法规范 一，CSS基础 1.1 CSS简介 CSS为层叠样式表(Cascading Style Sheets)的简称。也称CSS样式表或级联样式表。 CSS为标记语言，主要用于设置HTML页面中文本内容、图片的外形以版面的布局和外观显示样式(即描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素)。 样式定义通常保存在外部 .css 文件中。通过使用外部样式表文件，就可以使用一个CSS文件来改变很多网站的外观，取代了HTML
CSS中的盒子模型
小何代码咖啡馆
04-19 1962
在网页布局时，主要关注的就是如何利用CSS摆放盒子先准备好相关的网页元素，网页元素基本都是盒子利用 CSS 设置好盒子样式，然后摆放到相应位置往盒子里面装内容。
CSS基础知识(盒子模型)
m0_61886762的博客
01-07 2765
1.布局为什么用不同的盒子，而自己只想使用div？标签都是有语义的，合理的地方使用合理的标签。比如产品标题就使用h，大量文字的段落就使用p2.为啥用那么多的类名呢？类名就是给每一个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也很方便。3.到底使用margin还是padding？大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。4.自己做如果没有思路怎么办？
CSS盒子模型介绍、选择器详细演示教程
清豆的博客
11-04 1033
本文主要介绍CSS的盒子模型和各种选择器，包含消息的代码和演示效果图。
css基础之盒子模型、浮动问题
2302_80141844的博客
05-05 983
border边框、content内容、padding内边距、margin外边距(与另外盒子的距离)
css学习 盒子模型 css基础
06-27
在这个“css学习 盒子模型 css基础”的主题中，我们将深入探讨CSS的基础知识，特别是盒子模型这一关键概念。 首先，让我们从CSS的基础语法开始。CSS采用选择器+声明的方式来指定元素的样式。选择器定位HTML元素，如...
css基础3-盒子模型
12-05
CSS 基础 - 盒子模型 CSS 基础 - 盒子模型是 CSS 中的一個基础知识点，包括 CSS 三大特性、PxCook 的基本使用和盒子模型三个部分。 CSS 三大特性 CSS 三大特性包括继承性、层叠性和优先级。继承性是指子元素继承...
css盒子模型 css margin 外边框合并
09-25
对于CSS盒子模型的学习，除了了解上述的基础知识点外，开发者还应该熟练掌握如何通过各种CSS选择器来选择元素，并通过CSS属性来控制元素的布局与显示效果。通过不断实践和解决实际问题，才能真正掌握CSS盒子模型的...
day05（CSS03-盒子模型）v1.0.pdf
02-17
"CSS盒子模型和三大特性" CSS盒子模型是一个基本的布局模型，它由内容区域、边框区域、内边距区域和外边距区域...CSS盒子模型和三大特性是CSS的基础知识，master这些知识可以帮助我们更好地使用CSS来布局和设计网页。
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
iSee857的博客
11-12 513
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
前端 Flex 布局语法详解
ning的博客
11-10 1131
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
前端（1）——快速入门HTML
最新发布
m0_63086198的博客
11-14 807
参考： W3school 1. HTML 我使用的是vs code，在使用之前，先安装以下几个插件： Auto Rename Tage HTML CSS Support Live Server 1.1 HTML标签 HTML全称是Hypertext Markup Language(超文本标记语言) HTML通过一系列的标签(也称为元素)来定义文本、图像、链接等等。HTML,标签是由尖括号包围的关键 字。 标签通常成对出现，包括开始标签和结束标签(也称为双标签)，内容位于这两个标签之间，例如
Vue中的常用指令
m0_62388400的博客
11-12 1153
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
【前端基础】Javascript取整函数以及向零取整方式
警警的博客
11-11 731
在JavaScript中，有多种方式可以对数字进行取整操作，即去掉小数部分，只保留整数部分。在JavaScript中，有多种方法可以对数字进行取整操作。这些方法各有特点，适用于不同的场景。方法会去掉一个数字的小数部分，返回其整数部分，但不进行四舍五入。在处理数字时，会将操作数转换为32位整数，从而截断小数部分。每种方法都有其适用的场景和限制，选择时需根据具体需求进行权衡。也是一种按位取整的方式，效果与。类似，会截断小数部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值