2022 7-9 第二组 曹雨CSS知识点
css
CSS叫做“层叠样式表”网页中:HTML相当于布料(结构)CSS网页相当于上色(美化)
定义css的方式
行内样式,内联样式
如:
<p style="background: rgb(0, 255, 85);">I love Java</p>
<span style="background: rgb(0, 255, 85 );" valve = "123"></span>
<h1 style="background: rgb(0, 255, 85);">i love html</h1>
内页样式
如选择器格式
<style>
p {
background: red;
}
.span {
background: yellow;
}
<style>
外部样式(推荐)
需要新建一个.css文件,在其中可以直接写CSS
CSS选择器
标签选择器
/* 根据标签来命名 */
/* 选择器selector */
/* 标签选择器:可以让页面上所有的p标签都有对应的样式 */
p {
background: red;
}
span {
background: yellow;
}
<!-- 调用 -->
<span>i love css</span>
类选择器
/* 声明一个样式,并起个名字 */
/* 类选择器 */
/* 标签选择器比类选择器优先级高 */
.bg {
background: blue;
}
<!-- 调用 -->
<div class="bg">i love mysql</div>
id选择器
/* id选择器 */
#spring {
background: purple;
}
<!-- 调用 -->
<div id="spring">i love spring</div>
组合选择器(可以选多个)
div与p两个标签的样式一摸一样的,选中div和p
/* 页面上所有的div和p的样式都一样 */
div,p {
color: yellow;
}
后代选择器(不管嵌套多少层,都能选到)
div里面的p */
div p {
color: purple;
}
直接子标签选择器(选儿子,不选孙子)
div > p {
color: orange;
}
选紧跟在div后的p
div+p {
color: blue;
}
属性选择器
=文本框永远只有一行
文本区可以换行
/* 属性选择器 */
[class~=font]{
height: 100px;
}
伪类选择器:
<style>
/* 默认样式 */
a:link {
color: red;
}
/* 鼠标悬停样式 */
a:hover {
color: green;
}
/* 元素被激活 */
a:active {
color: blue;
}
/* 点过的链接 */
a:visited {
color: gray;
}
</style>
css层叠性
优先级
类>标签>id
层叠性
如果样式冲突,遵循就是就近原则,哪个样式离结构近,就选哪个
如果样式不冲突,就不层叠
继承性
子标签会继承父标签的某些样式
*权重:继承的样式权重为0(继承过来的样式是最不重要的,优先级最低)
行内样式权重最高
如果权重相同,继续就近原则
!important 可以改变权重,改成无限大(比行内样式还要大)
css常用的单位:
1.px像素(绝对单位 一个像素代表一个点,如一个100px*100px的正方形,宽度100个点,高度100个点)
2.em(相对单位,它会参考它的父级元素。在字体上使用比较多,父级元素的字体是16px,要设置元素的字体大小为2em,当前元素的字体大小就是32px。
3.rem相对单位,由页面决定,当我们该百年来浏览器的页面设置,页面的字号也会随之发生变化。应用在老人版。
4.百分比,相对于父级元素的比例
字体大小:font-size:像素
字体样式:font-family:字体名字
行高:line-height:~~~px
粗细:font-weight:
字体下划线:text-decoration:underline/none
字体颜色:color:
*如果样式很多,每个样式后用;结尾
背景
div可以理解为一张纸,不对其进行任何设置就是一张透明的纸
背景颜色:background-color
背景图片:background-image
简写:background:
颜色的表示方法:
1.英文 2.rgb(是一个函数) 3.rgba:多加了一个透明度(透明度0-1 全透明-不透明) 4.16进制
div {
height: 200px;
width: 200px;
background-color: green;
/* 边框线的样式 */
/* border-style: dotted; */
/* 边框线的宽度 */
/* border-width: 5px; */
/* 边框线的颜色 */
/* border-color: yellow; */
/* 简写 */
border: red solid 1px;
border-bottom: 1px yellow double;
border-left: 1px blue dotted;
/* css3新增的属性,半径 */
border-radius: 15px;
}
table {
/* border: 1px black solid; */
/* 边框线的折叠 */
border-collapse: collapse;
/* 边框线间距 */
border-spacing: 0;
border-left: 1px solid black;
border-top: 1px solid black;
}
table tr {
border-bottom: 1px solid black;
}
table tr td {
border-right: 1px solid black;
}
定位,浮动
position: absolute:绝对定位 当前的文档流可以理解为飘起来了,参照物是他的父级元素
relative:相对定位 :参照物是已经定位的父级元素,占原有位置,不会上天,父相子绝
visibility:hidden:隐藏
overflow:溢出样式
scroll:滚动条
<style>
body{
height: 2000px;
}
.div1 {
height: 300px;
width: 300px;
background-color: yellow;
/* 定位:
absolute:绝对定位
当前的文档流可以理解为上天了,
参照物是已经定位的父级元素
relative:相对定位
参照物是已经定位的父级元素
占有原有位置,不会上天
父相子绝
static:文档流(默认)
fixed:浮动
*/
position: relative;
left: 200px;
top: 200px;
}
.div2{
height: 100px;
width: 800px;
background-color: red;
/* 定位:浮动,钉住了 */
position: fixed;
}
.father {
height: 600px;
width: 600px;
background-color: skyblue;
position: relative;
/* 元素隐藏 */
/* visibility: hidden; */
}
.divimg {
height: 200px;
width: 200px;
border: 5px red solid;
/* 溢出样式
hidden:隐藏
scroll:滚动条
visible:显示(默认)
*/
overflow: auto;
}
</style>
</head>
<body>
<div class="div2">我是div2</div>
<div class="father">
<div class="div1">我是div1</div>
<div>哈哈</div>
</div>
<div class="divimg">
<img src="img/123.png" alt="">
</div>
</body>
盒子模型
<title>盒子模型</title>
<style>
.div1 {
/*
盒子模型:
width、height:表示内容区的宽和高
margin:外边距。元素距离上一个元素的位置
padding:内边距。本元素内部空出的距离
border:边框线
*/
height: 300px;
width: 300px;
background-color: yellow;
padding: 50px;
/* margin-top: 100px; */
border: 10px black solid;
/* 设置盒子模型的尺寸计算方式 */
box-sizing: border-box;
}
.div2{
height: 300px;
width: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="div2">我是div2</div>
<div class="div1">我是div1</div>
</body>
总结
今天是第二天,我们学习了CSS的技能,用于HTML网页的美化,基本知识点方面,比较多,比较杂乱。老师刚刚讲过,过了一会可能就会忘记,最后的盒子模型与浮动,定位感觉应用层面一窍不通。最后的作业也不是独立自主完成,是在同学的帮助才最后完成。依然没有感觉,依然没有思维,依然很焦虑。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效