目录
1. 概述
层叠样式表(Cascading Style Sheets)
css能对网页中元素位置的排版进行像素精确控制,实现美化页面的效果,能够做到页面样式和结构分离。就是对前面的html骨架进行美化。
2. 基本语法规范
选择器 + {一条/n条声明}
· 选择器决定针对谁修改
· 声明决定修改的内容
· 声明的属性是键值对,使用 “ ;”区分键值对, 键值对的格式:键:值
· 冒号后面加空格,选择器和 { 之间也加空格
例如:
<style>
p {
/* 字体颜色 */
color: red;
/* 字体大小 */
font-size: 30px;
}
</style>
说明:
· CSS要写到style标签中
· style标签可以放到页面的任意位置,但是一般放到head标签内
· CSS使用/* */作为注释
3. 引入的方式
3.1 内部样式
写在style标签中,嵌入html内部,如上述例子所示
优点:这样能让样式和页面结构分离
缺点:当css内容很多的时候,分离的不够彻底
3.2 行内样式
通过style属性,来指定某个标签的样式,只针对某个标签生效
缺点:只适合简单的样式,不能写太复杂的样式
这种写法优先级高,会覆盖其他的样式
例如:
<style>
p {
color: red;
}
</style>
<P style="color: green;">一去二三里</P>
结果:字体颜色显示绿色,而不显示红色
3.3 外部样式
外部样式是实际开发中最常用的方式
1. 创建一个css文件
2. 使用link标签引入css
<link rel="stylesheet" href="blog.css">
例如:
创建html文件,并引入css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div>好好学习,天天向上</div>
</body>
</html>
创建css文件
div {
/* 字体颜色 */
color: blue;
/* 字体大小 */
font-size: 30px;
}
结果:
优点:样式和页面结构彻底分离
缺点:受浏览器缓存影响,修改之后不一定立刻生效,可以使用 ctrl+F5 强制刷新页面
4. 选择器
选择器的功能:选中页面中指定的标签元素,要先选中元素,才能设置元素的属性
选择器的种类:
1. 基础选择器:单个选择器构成
· 标签选择器
· 类选择器
· id选择器
· 通配符选择器
2. 复合选择器:把多种基础选择器综合运用起来
· 后代选择器
· 子选择器
· 并集选择器
· 伪类选择器
4.1 基础选择器
4.1.1 标签选择器
特点:能快速为同一类型的标签都选择出来,但是不能差异化选择
<style>
p {
color: red;
}
div {
color: blue;
}
</style>
<p>哈哈</p>
<p>嘻嘻</p>
<p>嘿嘿</p>
<div>王昭君</div>
<div>妲己</div>
4.1.2 类选择器
特点:差异化表示不同的标签,可以让不同的标签使用同一种样式
<style>
.c1 {
color: brown;
}
</style>
<div class="c1">苹果</div>
<span class="c1">香蕉</span>
注意:
· 类名用.开头
· 下方的标签使用class属性来调用
· 一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割)
· 不要使用纯数字,或者中文,以及标签名来命名类名
示例:使用多个类名
<style>
.c1 {
color: brown;
}
.f1 {
font-size: 30px;
}
</style>
<div class="c1 f1">苹果</div>
<span class="c1 f1">香蕉</span>
4.1.3 id选择器
· 使用#开头表示id选择器
· id是唯一的,不能被多个标签使用
<style>
#i1 {
color: red;
font-size: 50px;
}
</style>
<div id="i1">我爱学Java</div>
4.1.4 通配符选择器
使用 * 的定义,选取所有标签
* {
color: pink;
}
页面中所有的内容都会被修改为粉色
4.2 复合选择器
4.2.1 后代选择器
选择某个父元素中的某个子元素
元素1 元素2 { 样式声明 }
说明:
· 元素1和元素2要使用空格分割
· 元素1是父级,元素2是子级,只选元素2,不影响元素1
示例1:修改ul中的li颜色,不影响ul
<style>
ul li {
color: green;
}
</style>
<ul>
<li>Java</li>
<li>c++</li>
<li>python</li>
</ul>
示例2:元素2不一定是儿子,也可以是孙子
<style>
ul li a {
color: green;
}
/* 这两种都行 */
ul a {
color: green;
}
</style>
<ul>
<li>Java</li>
<li>c++</li>
<li><a href="#">空连接</a></li>
</ul>
4.2.2 子选择器
和后代选择器类似,但是只能选择子标签,也就是亲儿子,不能是孙子
元素1>元素2 { 样式声明 }
· 使用大于号分割
· 只能是亲儿子,不能是孙子
<style>
div>a {
color: red;
}
</style>
<div>
<a href="#">链接1</a>
<p><a href="#">链接2</a></p>
</div>
注意:只有链接1变色,链接2不变色,因为1是亲儿子,2是孙子
4.2.3 并集选择器
用于选择多组标签(集体声明)
元素1,元素2 {样式声明}
· 使用逗号分割多个元素,表示同时选中
· 最后一个选择器不能加逗号
示例:将香蕉和苹果同时染成红色
<style>
div,span {
color: red;
}
</style>
<div>苹果</div>
<span>香蕉</span>
4.2.4 伪类选择器
1. 链接伪类选择器
a:link ,未被访问过的链接
a:visited ,已经访问过的链接
a:hover ,鼠标悬停的链接
a:active ,鼠标按下未弹起的链接
示例: 给链接添加样式
<a href="#">陕西科技大学</a>
a:link {
color: blue;
}
a:visited {
color: grey;
}
a:hover {
color: brown;
}
a:active {
color: green;
}
说明:未访问蓝色,访问过灰色,悬停棕色,按下不弹起绿色
2. force伪类选择器
选取获取焦点的input表单元素
示例:
<style>
#i1:focus {
color: red;
}
#i2:focus{
color: green;
}
#i3:focus {
color: blue;
}
</style>
<input id="i1" type="text">
<input id="i2" type="text">
<input id="i3" type="text">
结果:鼠标悬停在哪个输入框,哪个输入框的文本就会变成设置的颜色
5. 常用元素属性
5.1 字体属性
5.1.1 设置字体
div {
font-family: '微软雅黑';
}
span {
font-family: '宋体';
}
说明:
· 字体名称可以用中文,但是不建议
· 多个字体之间使用逗号分隔(从左到右查找字体,如果都找不到,会使用默认字体)
· 如果字体名有空格,使用引号包裹
· 建议使用常见字体,否则兼容性不好
5.1.2 设置字体大小
div {
font-size: 50px;
}
说明:
· 不同浏览器默认字号不一样,chrome默认是16px
· 可以给body标签使用font-size
· 注意单位px,表示像素
· 标题标签需要单独指定大小
5.1.3 设置字体粗细
div {
font-weight: 500px;
}
span {
font-weight: bold;
}
· 可以使用数值表示粗细
· 700==bold,400是不变粗细为normal,数字取值范围:100~900
5.1.4 设置文字样式
/* 倾斜 */
div {
font-style: italic;
}
/* 取消倾斜 */
span {
font-style: normal;
}
5.2 文本属性
5.2.1 文本颜色
认识RGB
我们的显示器是由很多很多像素构成的,每个像素视为一个点,这个点能反映出一个具体的颜色,R(red)G(green)B(blue)的方式表示颜色,三种颜色按照不同的比例搭配,就能混合出各种颜色。
计算机中针对R,G,B三个分量,分别用一个字节表示(8个比特位,表示的范围是0-255,十六进制表示为00-FF),数值越大,表示该分量颜色就越浓,255,255,255就表示白色;0,0,0就表示黑色
设置文本颜色
color:red;
color:#ff0000;
color:rgb(255,0,0);
color属性值的写法:
· 预定义的颜色值(单词)
· 十六进制形式(常用)
· RGB方式
<style>
.c1 {
color: green;
}
</style>
<div class="c1">好好学习进大厂</div>
5.2.2 文本对齐
控制文字水平方向的对齐,除了文本,也能控制图片等元素对齐的方式
text-align:[值];
center:居中对齐
left:左对齐
right:右对齐
<style>
.c1 {
text-align: left;
}
.c2 {
text-align: center;
}
.c3 {
text-align: right;
}
</style>
<div class="c1">左对齐</div>
<div class="c2">居中对齐</div>
<div class="c3">右对齐</div>
结果:
5.2.3 文本装饰(上划线,下划线,删除线)
text-decoration:[值]
常用值:
underline:下划线
none:啥都无,可以取掉下划线,删除线等
overline:上划线
line-through:删除线
<style>
.c1 {
text-decoration: overline;
}
.c2 {
text-decoration: none;
}
.c3 {
text-decoration: underline;
}
.c4 {
text-decoration: line-through;
}
</style>
<div class="c1">上划线</div>
<div class="c2">啥都无</div>
<div class="c3">下划线</div>
<div class="c4">删除线</div>
结果:
5.2.4 文本的缩进与行高
缩进:控制段落的首行缩进(其他行不受影响)
text-indent:[值];
单位可以用px或者em
em作为单位,1个em为一个文字大小
缩进可以为负数,表示往左缩进(文字就会冒出去)
<style>
.c1 {
text-indent: 2em;
}
.c2 {
text-indent: -2em;
}
</style>
<div class="c1">正常缩进</div>
<div class="c2">反向缩进</div>
行高:行高是上下文本行之间基线距离
line-height:[值]
注意:行高 = 上边距 + 下边距 + 字体大小
HTML中涉及到这几个基准线:
· 顶线 · 中线 · 基线(相当于四线三格倒数第二条线)· 底线
内容区:底线和顶线包裹的区域,即下图深灰色背景区域
基线之间的距离 = 顶线的距离 = 底线之间的距离 = 中线间距
注意:行高与元素高度相等,就可以实现文字居中对齐
例:
<style>
div {
height: 100px;
line-height: 100px;
font-size: 30px;
}
</style>
<div>文字居中对齐</div>
5.3 背景属性
5.3.1 背景颜色
background-color:[指定颜色]
默认是transparent透明的,可以通过设置颜色的方式修改
<style>
div {
background-color: blue;
}
</style>
<div>设置蓝色背景</div>
5.3.2 背景图片
background-image:url();
注意:url可以是相对路径也可以是绝对路径,url可以加引号也可以不加
url的路径必须正确,否则找不到照片
<style>
div {
height: 1000px;
width: 1000px;
background-image: url(../10.jpg);
}
</style>
<div>设置背景图片</div>
结果:
5.3.3 背景平铺
background-repeat:[平铺方式]
重要值:
repeat:平铺
no-repeat:不平铺
repeat-x:水平平铺
repeat-y:垂直平铺
默认是repeat,背景颜色可以和背景图片同时存在,背景图片在背景颜色的上方
<style>
div {
height: 1000px;
width: 1000px;
background-image: url(../作业/5.jpg);
background-repeat: no-repeat;
/* no-repeat repeat repeat-x repeat-y */
}
</style>
repeat:
no-repeat:
repeat-x:
repeat-y:
5.3.4 背景位置
background-position:x y;
注意:是修改图片内容的位置
参数:
方位名词:(top,left,right,bottom)
精确单位:坐标或者百分比(以左上角为原点)
混合单位:同时包含方位名词和精确单位
<style>
div {
height: 1000px;
width: 1000px;
background-image: url("../10.jpg");
background-position: center;
}
</style>
<div>背景位置</div>
说明:没有把图片的位置放到屏幕中间,而是把图片内容的中间部分按要求大小展示在屏幕上
注意:
如果参数的两个值都是方位名词,则前后顺序无关(top left与left top效果一样)
如果只指定了一个方位名词,则第二个默认居中(left就是水平居中,top就是垂直居中)
如果参数为精确值,则第一个为x,第二个为y
如果参数为精确值且只给了一个数值,则该数值为x坐标,另一个默认垂直居中
5.3.5 背景尺寸
background-size:length|percentage|cover|contain;
· 可以填具体数值,40px 60px表示宽为40px,高为60px
· 也可以填百分比,按照父元素的尺寸设置
· cover,把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,这样背景图片的某些位置就无法显示
· contain,把图像扩展至最大尺寸,以使宽度,高度完全适应内容区域
contain:
cover:
5.4 圆角矩形
使用border-radius使边框带圆角效果
border-radius:length;
length:内切圆半径,数值越大,弧线越强烈
<style>
/* 普通圆角矩阵 */
#d1 {
width: 300px;
height: 200px;
border: 2px solid blueviolet;
border-radius: 20px;
}
/* 圆形 */
#d2 {
width: 200px;
height: 200px;
border: 2px solid blueviolet;
border-radius: 50%;
/* 50%也可以替换为数值100px */
}
/* 圆角矩阵 */
#d3 {
width: 300px;
height: 200px;
border: 2px solid blueviolet;
border-radius: 100px;
}
</style>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
展开写法:可以针对四个角分别设置
border-radius:2em; 相当于四个角全都是2em
border-radius:10px 20px 30px 40px
等价于 (按顺时针旋转)
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottopm-right-radius:30px;
border-bottom-left-radius:40px;
6. 元素的显示模式
这里重点介绍两个:块级元素 行内元素
6.1 块级元素
常见的元素:
h1-h6
p
div
ul ol li
...
特点:
独占一行
高度,宽度,内外边距,行高都可以控制
宽度默认是父级元素宽度的100%
是一个容器盒子,里面可以放行内元素和块级元素
注意:
· 文字类元素内不能使用块级元素
· p标签主要用于存放文字,内部不能放块级元素,特别是div
6.2 行内元素/内联元素
常见元素:
a
strong
b
em
i
del
span
...
特点:
· 设置行高,宽度,高度无效
· 左右外边距有效(上下无效),内边距有效
· 默认高度就是内容本身的高度
· 行内元素只能容纳文本和其他行内元素,不能放块级元素
注意:
a标签内不能在放a标签
a标签可以放块级元素,但是先把a转换为块级元素
行内元素与块级元素的区别
· 块级元素独占一行,行内元素不独占一行
· 块级元素可以设置宽高,行内元素不能设置宽高
· 块级元素四个方向都能设置内外边距,行内元素垂直方向不能设置
6.3 改变显示模式
使用display属性可以修改元素的显示模式
display:block,改成块级元素
display:inline,改成行内元素
display:inline-block ,改成行内块元素
7. 盒模型(重点)
每一个HTML元素相当于是一个矩形盒子,这个盒子由以下几部分构成:
边框:border
内容 :content
内边距:padding
外边距:margin
7.1 边框
基础属性
粗细:border-width
样式:border-style,默认没有边框,solid实线边框,dashed虚线边框,dotted点线边框
颜色:border-color
例:
<style>
div {
width: 300px;
height: 50px;
border-style: dashed;
border-color: blue;
border-width: 5px;
}
</style>
可以简写(建议),减少代码量
border:5px solid red;
可以改变四个方向的任意边框
border-top/bottom/left/right
例:给边框的四个方向设置不同的颜色和属性
<style>
div {
width: 400px;
height: 100px;
border-top: 3px solid red;
border-right: 3px dashed blue;
border-bottom: 3px dotted green;
border-left: 3px dashed yellow;
}
</style>
注意:边框会撑大盒子
可以看到weight,height为400,100,但是整个盒子为406*106,多出来的那部分为边框像素的大小。
可以通过box-sizing属性可以修改浏览器的行为,使边框不在撑大盒子
* {
box-sizing: border-box;
}
可以看到盒子的大小又恢复400*100了
7.2 内边距
padding设置内容和边框之间的距离
默认内容是顶着边框来放置的,用padding来控制这个距离
给四个方向都加边框
· padding-top
· padding-bottom
· padding-left
· padding-right
不加内边距:
<style>
div {
width: 200px;
height: 100px;
}
</style>
<div>内边距</div>
加上内边距padding后:
<style>
div {
width: 200px;
height: 100px;
padding: 5px;
}
</style>
注意:内边距也会影响到盒子的大小,使用box-sizing:border-box;不在撑大盒子
复合写法:
padding:5px;表示四个方向都是5px
padding:5px 10px 20px 30px;上,右,下,左(顺时针方向,与设置边框的复合写法类似)
7.3 外边距
控制盒子与盒子之间的距离
· margin-top
· margin-bottom
· margin-left
· margin-right
不加外边距:
<style>
#i1 {
width: 200px;
height: 100px;
}
#i2 {
width: 200px;
height: 100px;
}
</style>
<div id="i1">哈哈</div>
<div id="i2">嘿嘿</div>
加了外边距margin后:
<style>
#i1 {
width: 200px;
height: 100px;
margin: 5px;
}
#i2 {
width: 200px;
height: 100px;
margin: 5px;
}
</style>
复合写法:与padding相同
7.4 块级元素水平居中
三种写法:
margin-left:auto;margin-right:auto;
margin:auto;
margin:0 auto;
示例:
<style>
#i1 {
width: 200px;
height: 100px;
margin: auto;
}
</style>
<div id="i1">哈哈</div>
注意:这种居中方式和text-align不一样,margin:auto是给块级元素用的,text-align:center是让行内元素或者行内块元素居中的
7.5 去除浏览器默认样式
浏览器会给元素加上一些默认的样式,尤其是内外边距,不同浏览器的默认样式存在差别,为了保证在不同的浏览器上运行的效果相同,往往去掉浏览器默认样式,使用通配符去掉浏览器默认样式:
* {
margin: 0;
padding: 0;
}
7.6 弹性布局
display:flex;
示例:创建一个div包含3个span
<style>
div {
width: 100%;
height: 100px;
background-color: red;
}
div>span {
background-color: green;
width: 100px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
给div加上display:flex;后:
div {
width: 100%;
height: 100px;
background-color: red;
display: flex;
}
此时看到,span不在是行内元素了,再给div加上justify-content:space-around;此时效果:
此时可以看到,span已经能够水平隔开了
把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:设置主轴上的子元素排列方式
flex-start | 默认值,位于容器开头 |
flex-end | 位于容器结尾 |
center | 位于容器中央 |
space-between | 行与行之间有间隔 |
space-around | 行之前,行之间,行之后又间隔 |
center效果展示:
space-between效果展示:
align-items:设置侧轴上元素排列方式
stretch | 默认值,行拉伸以占据剩余空间 |
center | 朝着弹性容器的中央对行打包 |
flex-start | 朝着弹性容器的开头对行打包 |
flex-end | 朝着弹性容器的结尾对行打包 |
space-between | 行均匀分布在弹性容器中 |
space-around | 行分布在弹性容器中,两端各占一半 |
stretch效果展示:
center效果展示:
flex-start,flex-end效果展示:
可以使用align-items实现垂直居中:
<style>
div {
width: 500px;
height: 300px;
background-color: green;
display: flex;
justify-content: space-around;
align-items: center;
}
div>span {
background-color: red;
width: 150px;
height: 100px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
注意:align-items只能针对单行元素来实现,如果有多行元素,就需要使用items-contents