文章目录
CSS
层叠样式表 (Cascading Style Sheets)
CSS能对网页中元素位置的排版进行像素级的精准控制, 从而实现美化页面的效果
基本语法规范
选择器 + {声明}
<style>
div {
color: red;
}
</style>
1. 此处的 div 就是一个选择器, 这个选择器决定修改div
2. color: red; 就是声明. 声明是使用键值对的格式. 使用 ; 区分键值对. 使用 : 区分建和值
3. style标签可以放入Html的任何位置中
CSS的引入方式
1.内部样式表
通过 style 标签来写CSS, 并将style放入html的任何位置中(一般放在head中)
<head>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
2.内联样式表
通过style属性来指定某个标签的属性, 只针对当前标签
<div style="color: green">
头上不戴绿, 生活过不去
</div>
3.外部样式
通过创建一个专门的css文件, 并通过link标签将css引入html中
html:
css:
显示样例:
选择器
选择器是为了选中页面中指定的标签元素
选择器种类
基础选择器
1.标签选择器
可以快速将同一类型的标签选择出来
<style>
div {
color: red;
}
</style>
<div>我是红色</div>
2.类选择器
可以差异化的表示不同的标签, 可以使不同的标签使用同一个类选择器标签.
- 类名用.开通
- 标签使用class来调用类
- 一个类可以被多个标签使用, 一个标签也可以使用多个类
<style>
.one {
color: red;
}
</style>
<div class="one">我是红色</div>
3.id选择器
1.用#来表示id选择器
2.id选择器的值和html中的某个标签的id相同
3.id是唯一的, 故id选择器只能被一个标签使用
<style>
#one {
color: green;
}
</style>
<div id="one">我是绿色</div>
4.通配符选择器
通过 * 来选择页面中的所有标签
<style>
* {
color: green;
}
</style>
<div>我绿了</div>
<p>我也绿了</p>
复合选择器
后代选择器
通过元素的组合, 可以选中某个元素的后代(儿子, 孙子)元素
<style>
ul li {
color: red;
}
</style>
<ul>
<li>我又红了</li>
<li>俺也是</li>
</ul>
子选择器
通过>将元素组合, 不过只可以指定某个元素的儿子元素
<style>
.one>a {
color: red;
}
</style>
<ul class="one">
<li><a href="#">我是链接</a></li>
<a href="#">我也是链接</a>
</ul>
只有作为儿子的a标签变色了, 作为孙子的a标签并没有变色.
并集选择器
并集选择器用于选择多个标签.
1.通过,分割多个元素
2.表示同时选择
<body>
<style>
div,
h1 {
color: green;
}
</style>
<div>我绿了</div>
<h1>我又绿了</h1>
</body>
伪类选择器
链接伪类选择器
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
<body>
<style>
a:link {
color: black;
}
a:visited {
color: green;
}
a:hover {
color: pink;
}
a:active {
color: brown;
}
</style>
<a href="#">看我的颜色变化</a>
</body>
字体属性
设置字体
font-family
<body>
<style>
div {
font-family: '宋体';
}
p {
font-family: '微软雅黑';
}
</style>
<div>我是宋体</div>
<p>我是微软雅黑</p>
</body>
设置大小
font-size
<body>
<style>
div {
font-family: '宋体';
font-size: 50px;
}
p {
font-family: '微软雅黑';
font-size: 20px;
}
</style>
<div>我是宋体</div>
<p>我是微软雅黑</p>
</body>
设置粗细
font-weight
可以使用数字表示粗细, 取值100->900, 700bold, 400normal
<body>
<style>
div {
font-family: "宋体";
font-size: 50px;
font-weight: 700;
}
p {
font-family: "微软雅黑";
font-size: 20px;
font-weight: 100;
}
</style>
<div>我是宋体</div>
<p>我是微软雅黑</p>
</body>
文字样式
变倾斜: font-style: italic;
取消倾斜: font-style: normal;
<body>
<style>
div {
font-family: "宋体";
font-size: 50px;
font-weight: 700;
font-style: italic;
}
p {
font-family: "微软雅黑";
font-size: 20px;
font-weight: 100;
}
</style>
<div>我是宋体</div>
<p>我是微软雅黑</p>
</body>
设置文本颜色
可以使用 R(red) G(green) B(blue) 色光三原色来表示颜色 每种数值取值
0->255
<body>
<style>
div {
font-family: "宋体";
font-size: 50px;
font-weight: 700;
font-style: italic;
color: rgb(255, 0, 0);
}
p {
font-family: "微软雅黑";
font-size: 20px;
font-weight: 100;
color: rgb(0, 100, 255);
}
</style>
<div>我是宋体</div>
<p>我是微软雅黑</p>
</style>
文本属性
文本对齐
控制文本或图片的水平方向对齐方式
text-align: center 居中对齐
text-align: left 靠左对齐
text-align: right 靠右对齐
<body>
<style>
div {
font-family: "宋体";
font-size: 50px;
font-weight: 700;
font-style: italic;
color: rgb(255, 0, 0);
text-align: center;
}
p {
font-family: "微软雅黑";
font-size: 20px;
font-weight: 100;
color: rgb(0, 100, 255);
text-align: right;
}
</style>
<div>我是宋体</div>
<p>我是微软雅黑</p>
</body>
文本装饰
text-decoration: underline 设置下划线
text-decoration: none 取消下划线, 常用于取消链接下面的下划线
text-decoration: overline 设置上划线
text-decoration: line-through 删除线
<body>
<style>
.class1 {
text-decoration: underline;
}
.class2 {
text-decoration: none;
}
.class3 {
text-decoration: overline;
}
.class4 {
text-decoration: line-through;
}
</style>
<div class="class1">下划线</div>
<a href="#" class="class2">取消下划线的链接</a></br></br>
<div class="class3">上划线</div>
<div class="calss4">删除线</div>
</body>
文本缩进
text-indent: 值
单位为px 或 em , 一个em就是当前文字的大小
<body>
<style>
.class1 {
text-indent: 2em;
}
.class2 {
text-indent: -2em;
}
</style>
<p class="class1">我缩进了两个字</p>
<p class="class2">我负缩进了两个字</p>
</body>
设置行高
line-height: 值 单位:px
<body>
<style>
.class1 {
text-indent: 2em;
line-height: 200px;
}
.class2 {
text-indent: -2em;
line-height: 20px;
}
</style>
<p class="class1">我缩进了两个字</p>
<p class="class2">我负缩进了两个字</p>
</body>
背景属性
背景颜色
background-color: [指定颜色]
<body>
<style>
.class1 {
background-color: red;
line-height: 200px;
}
.class2 {
background-color: blue;
line-height: 20px;
}
</style>
<p class="class1">红色背景</p>
<p class="class2">蓝色背景</p>
</body>
背景图片
background-image: url(…); 来描述图片的路径
<body>
<style>
.class1 {
background-image: url(/WEB2022/afd421e401275a37fc15f9f77805f530.jpeg);
line-height: 200px;
}
.class2 {
background-color: blue;
line-height: 20px;
}
</style>
<p class="class1">背景图片</p>
</body>
背景平铺
background-repeat: repeat; 平铺
background-repeat: no-repeat; 不平铺
background-repeat: repeat-x; 水平平铺
background-repeat: repeat-y; 垂直平铺
<body>
<style>
.class1 {
background-image: url(/WEB2022/a5107469714be407dcd267fda2f0e77c.jpeg);
background-repeat: repeat-y;
line-height: 1000px;
}
.class2 {
background-color: blue;
line-height: 20px;
}
</style>
<p class="class1">背景图片</p>
</body>
背景位置
background-position: left | right | top | bottom
背景尺寸
background-size: length 具体数值
background-size: percentage 百分比
percentage: cover 是背景图片完全覆盖背景区域
percentage: contain 图像扩展至最大尺寸
<body>
<style>
.class1 {
background-image: url(/WEB2022/a5107469714be407dcd267fda2f0e77c.jpeg);
background-repeat: repeat-y;
background-size: cover;
line-height: 50px;
}
.class2 {
background-color: blue;
line-height: 20px;
}
</style>
<p class="class1">背景图片</p>
</body>
圆角矩形
border-radius 设置圆角
<body>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
color: black;
border-radius: 20px;
}
</style>
<div>
变成圆角了
</div>
</body>
元素的显示模式
块级元素
h1 - h6
p
div
ul
ol
li
特点: 独占一行
高度, 宽度, 内外边距, 行高都可以控制.
是一个容器(盒子), 里面可以放行内和块级元素.
行内元素
a
strong
b
em
i
del
s
ins
u
span
特点: 不独占一行, 一行可以显示多个
设置高度, 宽度, 行高无效
左右外边距有效(上下无效). 内边距有效.
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素, 不能放块级元素
行内元素和块级元素的区别
块级元素独占一行, 行内元素不独占一行
块级元素可以设置宽高, 行内元素不能设置宽高.
块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置.
改变显示模式
通过display改变元素的显示模式
display: block 改成块级元素
display: inline 改成行内元素
display: inline-block 改成行内块元素
<body>
<style>
div{
display: inline;
}
</style>
<div>
变成圆角了
</div>
<div>
同一行了
</div>
</body>
盒模型
每一个Html元素都相当于一个矩形, 由 (边框border) (内容 content) (内边padding) (外边距 margin) 组成
边框
通过border来设置, 有border-width(粗细) border-style(样式) border-color(颜色) 三个属性
样式又有solid 实线边框 dashed 虚线边框 dotted 点线边框
<body>
<style>
div {
border: 1px solid red;
}
</style>
<div>我有框框了</div>
</body>
边框会撑大盒子
<body>
<style>
div {
width: 100px;
height: 100px;
border: 10px solid red;
}
</style>
<div>我有框框了</div>
</body>
我们看到设置的宽高 是100px
但实际是:
可以通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.
<body>
<style>
* {
box-sizing: border-box;
}
div {
width: 100px;
height: 100px;
border: 10px solid red;
}
</style>
<div>我有框框了</div>
</body>
此时边框就不会撑大盒子了
内边距
通过 padding 来设置边框和内容之间的距离
默认内容是顶着边框来放置的. 用 padding 来控制这个距离
可以给四个方向都加上边距
padding-top
padding-bottom
padding-left
padding-right
外边距
控制盒子和盒子之间的距离.
可以给四个方向都加上边距
margin-top
margin-bottom
margin-left
margin-right
块级元素水平居中
把水平方向margin设为auto 可以实现块级元素居中
弹性布局
首先先来看这一段代码及其效果,
<body>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
}
div > span {
background-color: green;
width: 100px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
效果:
我们再给div加上display:flex后
再给 div 加上 justify-content: space-around; 此时效果为
把 justify-content: space-around; 改为 justify-content: flex-end; 可以看到此时三个元素在
右侧显示了.
flex布局基本概念
flex 是 flexible box 的缩写. 意思为 “弹性盒子”.
任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.
基础概念:
被设置为 display:flex 属性的元素, 称为 flex container
它的所有子元素立刻称为了该容器的成员, 称为 flex item
flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)
常用属性
justify-content
设置主轴上子元素的排列方式
stretch 行拉伸占据剩余空间:
center为设置到中间位置:
space-between 为均匀分布到弹性容器中:
space-around 也是均匀分布到弹性容器中, 不过两端各占一半:
align-items
使用 align-items 来完成垂直方向上的排列
通过start来完成靠上布局:
通过center来完成居中布局:
通过end完成靠下布局:
flex布局操作
- 设置为弹性布局 display: flex实现
- 水平方向布局 justify-content: 实现
- 垂直方向布局 align-items: 实现
扫一扫
744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
