基础认知
书写位置：
css应该书写在head标签内title标签下面
范例：
<!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>
<style>
/* 这个是css的注释 */
/* 这里写的都是css */
/* 选择器{css属性} */
/* 选择器：查找标签 */
p {
/* 文字颜色变成红色 */
color: red;
/* 字变大 px：像素 */
font-size: 30px;
/* 背景颜色 */
background-color: green;
/* width:宽度 */
width: 400px;
}
</style>
</head>
<body>
<p>这个是段落标签</p>
</body>
</html>
CSS引入方式
内嵌式：
css写在style标签中 适合小案例
提示：style标签虽然可以写在页面的任意位置，但是通常约定写在head标签中
范例：
<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>
<style>
p {
/* 文字颜色变成红色 */
color: red;
}
</style>
</head>
<body>
<p>这个是段落标签</p>
</body>
外联式：
css写在一个单独的.css文件中 项目中
提示：需要通过link标签在网页中引入
范例：
<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="./my.css">
</head>
单独写的一页css代码：
/* 选择器 {} */
p {
color: gray;
}
行内式：
css写在标签的style属性中 配合js使用
提示：基础班不推荐使用，之后会配合js使用
范例：
<div style="color: green;">这个是div标签</div>
基础选择器
1.标签选择器
<style>
/* 标签选择器：就是以标签名命名的选择器 */
p {
color: gray;
}
/* 标签选择器 选中所有的这个标签都生效css */
</style>
2.类选择器
类选择器：
结构：.类名{css属性名: 属性值;}
注意点：
1.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
2.一个标签可以同时由多个类名，类名之间以空格隔开
范例：
<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>
<style>
.black {
color: black;
}
.size {
font-size: 66px;
}
p {
color: green;
}
</style>
</head>
<body>
<p>11111</p>
<!-- 一个标签可以使用多个类名 需要用空格隔开即可 -->
<p class="black size">22222</p>
</body>
3.id选择器
结构：
#id属性值{css属性名: 属性值;}
注意点：
id属性值类似于身份证号码，在一个页面中是唯一的
范例：
<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>
<style>
#blue {
color: blue;
}
</style>
</head>
<body>
<p id="blue">段落标签</p>
</body>
4.通配符选择器
结构： {css属性名: 属性值;}*
注意点：
开发中极少使用，只会在极特殊的情况下才会使用到
在小页面中可能会用于去除标签默认的margin和padding
范例：
<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>
<style>
* {
color: yellow;
}
</style>
</head>
<body>
<p>我是段落标签</p>
<h1>ppppp</h1>
字体和文本样式
1字体大小：
属性名：font-size
取值：数字 + px
注意点：
谷歌浏览器默认文字大小是16px
单位需要设置，否则无效
2字体粗细：
属性名：font-weight
取值：
关键字 ：正常 normal
加粗 bold
纯数字： 正常 400
加粗700
注意点：
不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中：正常、加粗两种取值使用最多
3字体是否倾斜：
属性名：font-style
取值：正常 normal
倾斜 italic
4字体系列：
属性名：font-family
常见取值：
具体字体1，具体字体2，具体字体3…字体系列
具体字体：
“Micsoft YaHei”、微软雅黑
字体系列：sans-serif serif monospace
渲染规则：
1.从左往右按顺序查找，如果电脑中未安装该字体，则显示下一个字体
2.如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意点：
如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时，尽量使用是同常见自带字体，保证不同用户
5.font属性：
一个属性冒号后面书写多个值的写法 — 复合属性
省略要求：
只能省略前两个，如果省略了，相当于设置了默认值
注意点：
如果需要同时设置单独和连写的形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
例子：
写在下面
font: italic 700 66px 宋体;
font-style: normal;
6.文本缩进
属性名：
text-indent
取值：
01.数字：px
02.数字+em（推荐：1em = 当前标签的font-size的大小）
范例：
p {
text-indent: 4em;
}
7.文本水平对齐方式
属性名：
text-align
取值：
left：左对齐
center：居中对齐
可以使1.文本、2. span标签、3. a标签、4. input标签 5. img标签
right：右对齐
注意点：
如果需要让以上元素水平居中，text-align属性给文本所在标签（文本的父元素）设置。
范例：
h1 {
text-align: center;
}
8.文本修饰
属性名：
text-decoration
取值：
underline 下划线（常用）
line-through 删除线（不常用）
overline 上划线（几乎不用）
none 无装饰线（常用）
注意点：
开发中会使用text-decoration : none; 清除a标签默认的下划线
div {
text-decoration: underline;
}
p {
text-decoration: none;
}
9.行高
作用：
控制一行的上下行间距
属性名：
line-height
取值：
01.数字+px
02.倍数（当前标签font-size的倍数）
应用：
1.让单行文本垂直居中可以设置line-height：文字父元素高度
2.网页精准布局，会设置line-height:1 取消上下间距
行高与font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题
font：style weight size/line-height family;
选择器进阶
1.后代选择器
作用：
找到div的儿子p设置文字颜色
语法：
父选择器 后代选择器 {css}
范例：
div p {
color: red;
}
2.子代选择器
选择器语法：
选择器1 > 选择器2{css}
作用：
只能够让子代的选择器起作用 孙子 重孙子不选
范例：
div > a {
color: red;
}
3.并集选择器
语法：
选择器1 , 选择器2 {css}
作用：
同时选择多组标签，设置相同的样式
范例：
p,
div,
span {
color: red;
}
4.交集选择器
语法:
选择器1选择器2 {css}
注意:
选择器1与选择器2之间什么都不能加
范例：
p.box {
color: red;
}
5.hover伪类选择器
作用:
选中鼠标悬停在元素上的状态,设置样式
语法:
after选择器:hover {css}
任何标签都可以添加伪类选择器
范例：
p:hover {
color: red;
}
背景相关属性
1.背景颜色
属性名:
background-color(bgc)
范例：
p {
background-color: rgba(118, 48, 48, 0.5);
}
2.背景图片
属性名:
background-image(bgi)
属性值:
url(图片路径)
范例：
p {
background-image: url();
}
3.背景平铺
属性名:
background-repeat(bgr)
属性值: 效果:
repeat (默认值)水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿着水平方向(x轴)平铺
repeat-y 沿着垂直方向(y轴)平铺
4.背景位置：
属性名:
background-position(bgp)
正数:
向右向下移动;
负数:
向左向右移动
注意:
背景色和背景图只显示在盒子里面
范例：
p {
background-position: 0 0;
}
4.背景相关属性连写
属性名:
background
属性值:
单个属性值的合写,取值之间以空格隔开
书写顺序:
推荐: background: color image repeat position
元素显示模式
1.块级元素
显示特点：
1.独占一行（一行只能显示一个）
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高
代表标签：
div、p、h系列、ul、li、dl、dt
2.行内元素
显示特点：
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
代表标签：
a、span、b、u、i、s、strong、ins…
3.行内块元素
显示特点：
1.一行可以显示多个
2.可以设置宽高
代表元素：
input textarea button select
特殊情况：
img标签有行内块元素的特点，但是Chrome调试工具中显示结果是inline
4.元素显示模式转换
目的：
改变元素默认的显示特点，让元素符合布局要求
语法：
属性： display:block 效果： 转换成块级元素
属性： display:inline-block 效果： 转行成内行块元素
属性： display:inline 效果： 转换成行内元素
5.HTML嵌套规范注意点：
1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等
但是：p标签中不要嵌套div、p、h等块级元素
2.a标签内部可以嵌套任意
但是：a标签中不能嵌套a标签
盒子模型
1.盒子模型的介绍
盒子模型的概念：
1.页面中的每一个标签，都可以看做一个"盒子"，通过盒子的视角更方便的进行布局
2.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
盒子模型
css中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin） 构成，这就是盒子模型
记忆：
可以联想显示张的包装盒
范例：
<style>
div {
/* 设置盒子的宽高，背景颜色 */
width: 300px;
height: 300px;
background-color: pink;
/* 设置盒子边框线 */
border: 1px solid #000;
/* 设置内边距 */
padding: 20px;
/* 外边距:出现在两个盒子之间，出现在盒子外面 */
margin: 20px;
}
</style>
效果图：
2.内容区域的宽度和高度
作用：
利用width和height属性默认设置是盒子内容区域的大小
属性： width/height
常见取值： 数字+px
范例：
div {
width: 300px;
height: 300px;
background-color: pink;
}
3.边框
属性名： border
属性值： 单个取值连写，取值之间以空格隔开
如：border: 10px（像素大小） solid（线的种类） red（线的颜色） ;
快捷键：bd + tab
如果只给盒子某个方向单独设置边框
属性名：border-方位名词
属性值：连写取值
范例：
div {
width: 200px;
height: 200px;
background-color: pink;
/* 给盒子左边加边框 */
border-left: 5px solid red;
}
效果图：
4.内边距
padding 属性可以当作复合属性使用，表示单独设置某个方向的内边距
padding最多取4个值
四个值分别表示：上 右 下 左
三个值分别表示：上 左右 下
两个值分别表示：上下 左右
5.自动內减
自动内减： 给盒子设置属性box-sizing : border-box; 即可
优点： 浏览器会自动计算多余大小，自动在内容中减去
6.外边距
margin 属性
7.外边距折叠现象-合并现象
出现场景： 垂直布局的块级元素，上下合并margin会合并
结果： 最终两者距离为margin的最大值
解决方法： 避免就好
只给其中一个margin盒子设置margin即可
浮动
1.结构伪类选择器
作用：
根据元素在HTML中的结构关系查找元素
优势：
减少对于HTML中类的依赖，有利于保持代码整洁
场景：
常用于查找某父级选择器中的子元素
n的注意点：
n的常见公式：
偶数 2n、even
奇数 2n+1、2n-1、odd
找到前5个 -n+5
找到从5个往后 n+5
范例：
li:first-child{
/* 匹配父元素中第一个子元素，并且是li元素 */
color: red;
}
li:last-child {
/* 选中最后一个元素 */
color: green;
}
li:nth-child(3) {
/* 任意一个元素,第三个元素 */
color: black;
}
li:nth-last-child(2) {
/* 倒数第2个元素 */
color: orange;
}
2.伪元素
伪元素：
一般页面中的非主体内容可以使用伪元素
区别：
1.元素：HTML设置的标签
2.伪元素：由CSS模拟出来的标签效果
种类： 作用：
::before ： 在父类元素内容的最前面加一个伪元素
::after ： 在父类元素内容的最后面加一个伪元素
注意点：
1.必须设置content属性才能生效
2.伪元素默认是行内元素,宽高不生效
3.添加中文一定要加引号""
范例：
.fathor {
width: 300px;
height: 300px;
background-color: #ccc;
}
.fathor::before {
content: "老鼠";
}
.fathor::after {
content: "大米";
}
效果图：
3浮动：
浮动的标签是顶对齐的
1.浮动的作用: 网页布局
2.浮动的代码 float: left;
3.浮动的特点：
3.1. 浮动的元素会脱离标准流（简称脱标），在标准流中不占位置相当于从地面飘到空中
3.2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3.3. 浮动找浮动 下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素有特殊的显示效果，一行可以显示多个，可以设置宽高
注意点：
浮动的元素不能通过text-align:center或者margin:0 auto
4清除浮动
含义： 清除浮动带来的影响
影响： 如果子元素浮动了，此时子元素不能撑开标准流的块级元素
原因： 子元素浮动后脱标—>不占位置
目的： 需要父元素有高度，从而不影响其他网页元素的布局
清除浮动的方法：—额外标签法
操作
1.在父元素内容的最后添加一个块级元素
2.给添加的块级元素设置clear:both（清除左右两侧浮动的影响）
特点：
缺点： 会在页面中添加额外的标签，会让页面的HTML结构变得复杂
定位
1定位的介绍
定位的使用步骤
1.设置定位方式
属性名：position
常见属性值：
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
2.设置偏移值
偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
选取的原则一般是就近原则（离哪一个近用哪一个）
作用：
1.可以让元素自由的摆放在网页的任意位置
2.一般用于盒子之间的层叠情况
2.相对定位
介绍： 自恋型定位，相对于自己之前的位置进行移动
代码： position:relative;
特点：
1.需要配合方位属性实现移动
2.相对于自己原来位置进行移动
3.在页面中占位置—>没有脱标
4.占有原来的位置
5.仍然具有标签原有的显示模式
应用场景：
1.配合绝对定位组CP（子绝父相）
2.用于小范围
注意点： 如果left和right都有以left为准，如果top和bottom都有以left为准
范例：
.box {
position: relative;
left: 100px;
top: 200px;
}
3.绝对定位
介绍： 拼爹行定位，相对于非静态定位的父元素进行定位移动
代码： position:absolute
特点：
1.需要配合方位属性实现移动
2.默认相对于浏览器可视区域进行移动
3.脱标，在页面中不占位置
应用场景：
1.配合绝对定位组CP(子绝父相)
范例：
.box {
position: absolute;
left: 50px;
top: 0;
width: 200px;
height: 200px;
background-color: pink;
}
4固定定位
介绍： 死心眼型定位，相对于浏览器进行定位移动
代码： position:fixed
特点：
1.需要配合方位属性实现移动
2.相对于浏览器可视区域进行移动
3.在页面中不占位置—> 脱标
应用场景：
1.让盒子固定在屏幕中的某个位置
范例：
.box {
position: fixed;
left: 300px;
width: 600px;
height: 50px;
background-color: pink;
}
5元素的层级关系
默认情况下，定位的盒子 后来者居上
z-index:整数数字; 取值越大，显示顺序越靠上 ，z-index的默认值为0
注意：z-index必须配合定位才能生效
6装饰
垂直对齐方式：
属性名： vertical-align
属性值： baseline 效果： 默认，基线对齐
属性值： top 效果： 顶部对齐
属性值： middle 效果： 中部对齐
属性值： bottom 效果： 底部对齐
7光标类型
场景： 设置光标在元素上显示的样式
属性名： cursor
常见属性值： default 效果： 默认值，通常是箭头
常见属性值： pointer 效果： 小手效果，提示用户可以点击
常见属性值： text 效果： 工字型，提示用户可以选择文字
常见属性值： move 效果： 十字光标，提示用户可以移动
8编号圆角
画一个正圆：
1.盒子必须是正方型
2.设置边框圆角为盒子宽高一半—>border-radius：50%
胶囊按钮：
1.盒子要求是长方形
2.设置—>border-radius:盒子高度的一半
范例：
.box {
margin: 0 auto;
width: 200px;
height: 200px;
background-color: pink;
/* 一个值：表示4个角是相同的
4个值：是从左上顺时针转一圈
*/
border-radius: 50%;
}
9溢出部分显示效果
属性名： overflow
常见属性值： visible 效果： 默认值，一处部分可见
常见属性值： hidden 效果： 溢出部分隐藏
常见属性值： scroll 效果： 无论是否一处，都显示滚动条
常见属性值： auto 效果： 根据是否溢出，自动显示或隐藏滚动条
10元素本身显示隐藏
展位隐藏：
visibility：hidden
不占位隐藏
display：none
精灵图
1精灵图的使用步骤
1.创建一个盒子，设置盒子的尺寸和小图尺寸相同
2.将精灵图设置为盒子的背景图片
3.修改背景图位置
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y
范例：
span {
width: 200px;
height: 200px;
background-color: pink;
/* 背景图位置属性：改变背景图的位置 */
/* 水平方向的位置 垂直方向的位置 */
/* 想要往左移动图片，位置取负数 */
background-position: 0 0;
}
2背景图片大小
作用： 设置背景图的大小
语法： background-size: 宽度 高度;
取值： 数字+px 场景： 简单方便，常用
取值： 百分比 场景： 相当于盒子自身的宽高之比
取值： contain 场景： 包含，将背景图片等比例缩放，直到不会超出盒子的最大
取值： cover 场景： 覆盖，将背景图片等比例缩放，知道刚好填满整个盒子没有空白
3盒子阴影
作用： 给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名： box-shadow
取值：
参数： h-shadow 作用： 必须，水平偏移量。允许负值
参数： v-shadow 作用： 必须，垂直偏移量。允许负值
参数： blur 作用： 可选，模糊度
参数： spread 作用： 可选，阴影扩大
参数： color 作用： 可选，阴影颜色
参数： inset 作用： 可选，将阴影改为内部阴影
注意： 外阴影，不能添加outset，添加了会导致属性报错
4过渡
作用： 让元素的样式慢慢变化，长配合hover使用，增强网页交互体验
属性名： transition
常见取值：
参数： 过渡的属性 取值： all：所有能过渡的属性都过渡、具体属性名如width：只有width有过渡
过渡的时长 数字+s（秒）
注意点：
1.过渡需要：默认状态和hover状态样式不同，才能有过渡效果
2.transition属性给需要过渡的元素本身加
3.transition属性设置在不同状态中，效果不同
① 给默认状态设置，鼠标移入移出都有过渡效果
② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
CSS书写顺序：
1.浮动 / display
2.盒子模型相关属性
3.文字样式
优势：浏览器的执行效率高
扫一扫
642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
