CSS
Cascading Style Sheets 层叠样式表
给HTML文档进行样式设计以及布局的
CSS是为HTML文档服务的
需要在HTML文档中引入CSS的行为操作
引入方式
- 行内引用
在开始标签添加属性 style 在属性值中设置标签样式 - 内部引用
在head标签中 添加style标签 在style标签之间就是CSS的内容 - 外部引用
单独的CSS文件
在head标签中通过link引入CSS层叠样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 外部引用
rel 必须设置的 CSS文件的话 对应的值就是stylesheet
href 引入的是css文件的路径
-->
<link rel="stylesheet" href="../css/style.css" />
<!-- 内部引用 -->
<style>
/* CSS的内容 */
/* 元素选择器定位标签 */
p{
/* 边框 */
border: dotted 2px palevioletred;
/* 设置文字颜色 */
color: purple;
/* 设置背景颜色 */
background-color: deepskyblue;
}
</style>
</head>
<body>
<!-- 行内引入设计文字颜色 -->
<p style="color: red;">草莓喜温凉气候，草莓根系生长温度5-30℃，适温15-22℃，茎叶生长适温为20-30℃，芽在-15-10℃发生冻害，花芽分化期温度须保持5-15℃，开花结果期4-40℃。草莓越夏时，气温高于30℃并且日照强时，需采取遮荫措施。</p>
<p>香蕉喜湿热气候，在土层深、土质疏松、排水良好的地里生长旺盛。在类似牙买加南部的半干旱地区灌溉栽培也已成功。野生香蕉采用种子栽培，人工香蕉可用吸根和假鳞茎分株栽培；第一次收获需10～15个月，之后几乎连续采收。</p>
<p>苹果是落叶乔木，有较强的极性，通常生长旺盛，树冠高大，树高可达15米，栽培条件下一般高3～5米左右。树干灰褐色，老皮有不规则的纵裂或片状剥落，小枝光滑。果实为仁果，颜色及大小因品种而异。喜光，喜微酸性到中性土壤。最适于 土层深厚、富含有机质、心土为通气排水良好的沙质土壤。</p>
<div>
草莓地应选择地势稍高，地面平整，排灌方便，光照良好，有机质丰富，保水力强，通气性良好，PH值呈弱酸性或中性的肥沃土地。前茬作物以蔬菜、豆类、瓜类、小麦等较好。
</div>
</body>
</html>
-
这三种引入方式的作用范围：
- 行内引用 — 只作用于当前行
- 内部引用 — 作用于当前的HTML文档
- 外部引用 — 作用于关联该CSS文件的所有HTML文档
-
这三种引入方式的优先级别：
选择器也是以这种方式判断优先级别的
查找标签定位越精确 优先级别越高
行内引用 > 内部引用=外部引用
到底采用内部还是采用外部 看后来者 因为后来者会把对应相同的样式设计给覆盖掉 -
CSS的注释方式：
/注释的内容/
不可以相互嵌套
选择器
在内部引用和外部引用的时候 需要查找定位到需要进行样式设计的标签，这种查找定位的方式就称作是选择器
元素选择器 — 标签名称选择器
就是根据标签名称进行定位查找
语法格式：
```HTML
标签名称{
样式名:样式值;
样式名:样式值;
....
}
```
全局选择器 — 匹配所有的标签
```HTML
*{
样式名:样式值;
样式名:样式值;
....
}
```
根选择器
根 --- 只有子标签 没有父标签
:root{
样式名:样式值;
样式名:样式值;
....
}
id选择器
根据id属性值去进行定位查找标签的
```HTML
#id值{
样式名:样式值;
样式名:样式值;
....
}
```
类选择器
根据class的属性值进行查找的
一个标签可以赋予多个类
一个类可以被应用于多个标签
多个类使用空格分开
```HTML
<开始标签 class="类1 类2 类3"></开始标签>
```
```HTML
.类名{
样式名:样式值;
样式名:样式值;
....
}
```
属性选择器
name title href 这些属性是没有特殊符号可以表示的 如果我想通过这些属性来进行定位查找 怎么操作？？ 格式如下：
- 只根据属性名进行定位的
选择器[属性名]{ 样式名:样式值; 样式名:样式值; .... } - 明确属性值定位查找
选择器[属性名=“属性值”]{ 样式名:样式值; 样式名:样式值; .... } - 多个属性的筛查
选择器[属性1][属性2]{ 样式名:样式值; 样式名:样式值; .... } - 筛选属性值以指定内容开头
选择器[属性^="内容"]{ 样式名:样式值; 样式名:样式值; .... } - 筛选属性值以指定内容结尾的
选择器[属性$="内容"]{ 样式名:样式值; 样式名:样式值; .... } - 筛选属性值包含指定内容
选择器[属性*="内容"]{ 样式名:样式值; 样式名:样式值; .... }
包含选择器
定位具有标签嵌套这种格式的标签的
- 父找子标签
父标签对应的选择器 > 子标签对应的选择器{ 样式名:样式值; 样式名:样式值; .... } - 先辈找后辈标签(包含子标签)
先辈标签对应的选择器 后辈标签对应的选择器{ 样式名:样式值; 样式名:样式值; .... } - 相邻标签
- 兄弟标签
伪类选择器
- 鼠标悬浮选择器: 当鼠标悬浮到这个标签上就能触发这个选择器
.类名:hover{
样式名:样式值;
样式名:样式值;
…
} - 针对于超链接的
- 未被访问
标签:link{ 样式名:样式值; 样式名:样式值; .... } - 即将访问
标签:active{ 样式名:样式值; 样式名:样式值; .... } - 访问后
标签:visited{ 样式名:样式值; 样式名:样式值; .... }
- 未被访问
结构选择器
- 否定选择器
在选择器中定位到没有选择器1标记的标签选择器:not(选择器1){ 样式名:样式值; 样式名:样式值; .... } - 空节点选择器
- 找全局空节点
:empty{ 样式名:样式值; 样式名:样式值; .... }- 找指定选择器中为空间点的
选择器:empty{ 样式名:样式值; 样式名:样式值; .... } - 针对于一些被包含的标签的结构选择器 例如 td li
- 选择器:first-child 指定选择器下的第一个子节点
- 选择器:last-child 指定选择器下的最后一个子节点
- 选择器:nth-child(数值/even/odd) 指定选择器下的第几个节点 或者 偶数行 或者是奇数行
组合选择器
不同标记的标签 样式是一样
选择器1, 选择器2, 选择器3,...{
样式名:样式值;
样式名:样式值;
....
}
样式设计
关于背景的样式设计
设置宽度、高度
单位 px 像素 或者 %（占父标签的百分之多少）
width: 100%;
height: 300px;
背景颜色
background-color: red;
background-color: #aafcbe;
background-color: rgb(252, 162, 150);
background-color: rgba(255, 12, 35,0.5);
background-color: hsl(10, 100%, 0%);
设置背景颜色过渡
- 线性过渡
linear-gradient(方向， 颜色值1，颜色值2， 颜色值3…)
方向不设置的话默认为从上到下的 to bottom
还可以设置成角度- 从下到上 to top
- 从左到右 to right
- 从有到左 to left
- 从右下到左上 to top left
- 从左下到右上 to top right
- to bottom left
- to bottom right
- odeg 从下到上的渐变
- 180deg 从上到下
- 90deg 从左到右
- 270deg 从右到左
background: linear-gradient(30deg,red, orange, yellow, green, cyan, blue, purple); - 设置 椭圆形渐变
radial-gradient(形状, 颜色值， 颜色值…)
形状默认为椭圆
可以设置为circle 变成圆
background: radial-gradient(red, orange, yellow, green, cyan, blue, purple);
background: radial-gradient(circle,red, orange, yellow, green, cyan, blue, purple);
设置背景图片
background-image: url(…/img/动漫.jpg);
- 图片大小 = 标签大小 正好设置背景图
- 图片大小 > 标签大小 按照标签大小截取图片设置为背景图
- 图片大小 < 标签大小 平铺的现象
设置平铺的效果
background-repeat: no-repeat;
- no-repeat 不出现平铺的状态 图片默认在左上角
- repeat-x 横向平铺 纵向不平铺
- repeat-y 横向不平铺 纵向平铺
- repeat 平铺默认值
背景图位于标签的中央
相对于标签移动背景图的位置
- 横向移动 left(默认) center right 自定义数值（距离左边多少，向右移动值为正 反之为负）
- 纵向移动 top(默认) center bottom 自定义数值(距离上边多少，向下移动值为正 反之为负)
如果横向和纵向一样 写一个值即可
- background-position: center center;
- background-position: center;
- background-position: -100px 100px;
上面三个行为合并成一个方法
background: url(…/img/动漫.jpg) no-repeat center bottom;
- url引入图片路径
- 是平铺的状态
- 水平移动
- 垂直移动
background_size:
- contain 适应
关于文字的样式设计
-
设置文字的字体
font-family: “楷体”;
可以设置多种字体
使用空格隔开即可 字体是汉字或者多个单词组成的使用引号包含
使用的时候使用哪个字体 — 浏览器识别 识别哪个用那个 都不识别用默认的 -
设置文字的颜色
color: red; -
设置字号
font-size: 2em;
单位：- px 像素
- em 默认字体的倍数
-
设置字体加粗
font-weight: normal;
100到900 100-500是常规字体 600-900是加粗字体- bold
- bolder 加粗
- normal 常规字体
- lighter 细体
-
设置字体风格
font-style: italic;
斜体：oblique、italic -
设置标签内容的水平对齐方式
text-align: left;- left
- center
- right
-
设置行高
一行文本的高度 = font-size + 文本与标签上下的间隙
line-height: 60px;
当标签中只有一行文本的时候 行高设置成标签的高度 文本内容是可以达到上下居中的 -
文本修饰
text-decoration: none;- underline 下划线
- line-through 删除线
- overline 上划线
- none 去除划线修饰
-
首行缩进 2个字符 — 2em 3个字符就是3em
text-indent: 2em; -
字符和字符之间的间隙
- 不管是汉字还是英文字母 都当做是字符 都会设置间隙
letter-spacing: 10px;
需求： 汉字之间的间隙是10px 单词的字母之间的间隙不变 但是单词和单词之间的间隙是10px
- 不管是汉字还是英文字母 都当做是字符 都会设置间隙
-
单词之间的间隙
对于汉字没有影响的 影响的是英文单词和单词之间的间隙
word-spacing: 10px; -
文本阴影
水平偏移
垂直偏移
羽化度 — 设置的是阴影的虚化度 值越大 模糊度越高
阴影的颜色
text-shadow: 5px 5px 5px gray;
关于列表的样式设计
设计项目符号的样式
- none – 去除项目符号
list-style-type: none; - 自定义项目符号： 给的是一个图片
list-style-image: url(…/img/listicon.png); - 设置项目符号的位置
默认情况下项目符号是在li元素外的 outside
inside设置项目符号在li元素之内
list-style-position: inside;
盒子模型
标准盒子模型
- 去除标签自带的边距
*{
margin: 0;
padding: 0;
}
width与height为内容区的大小，不包括任何边框和内边距
img{
width: 50%;
height: 142px;
background-color: plum;
/* 内边距: 标签内容与标签之间的间隙 */
padding: 20px;
}
怪异盒子模型
width与height为整个标签大小
img{
box-sizing: border-box;
width: 50%;
height: 142px;
background-color: plum;
/* 内边距: 标签内容与标签之间的间隙 */
padding: 20px;
}
属性详情
内边距
内容区与边框之间的间隙
- 上下左右都会有间隙 而且 间隙是一致的
padding: 10px; - 上下左右都会有间隙 第一个控制的是上下， 第二个控制的是左右
padding: 10px 30px; - 上下左右都会有间隙 上 左右 下
padding: 10px 30px 50px; - 上下左右都会有间隙 上 右 下 左
padding: 10px 30px 50px 70px; - 某个方向有间隙 其他方向没有
padding-left: 10px;
padding-top: ;
padding-bottom: ;
padding-right: ;
边框
标签的边缘线 宽度默认是0
- 线宽
- 线的样式
- solid 单实线
- double 双实线
- dashed段虚线
- dotted点虚线
- 线的颜色
顺序没有关系
border: solid 2px deepskyblue;
只有一边有边框 其他的没有
border-bottom: ;
border-top: ;
border-left: dotted 3px deepskyblue;
border-right: ;
外边距
标签与其他标签之间的间隙
- 上下左右的间隙一致
margin: 50px;
0 默认
auto — 子标签 相对于父标签水平居中 - margin的赋值情况类似于padding
有四种赋值情况 每一种赋值都会使上下左右有间隙的 - 只设置某一边的外边距
margin-left: 50px;
margin-right: ;
margin-top: ;
margin-bottom: ;
切圆角
- 四个角都有切的
赋值情况类似于padding
border-radius: 30px; - 设置两个值 左上与右下 左下与右上
border-radius: 20px 40px; - 左上 左下与右上 右下
border-radius: 20px 40px 60px; - 左上 右上 右下 左下
border-radius: 20px 40px 60px 80px; - 只设置某一个角
border-top-left-radius: 50%;
border-top-right-radius: ;
border-bottom-left-radius: ;
border-bottom-right-radius: ;
溢出
子标签的大小超过了父标签的大小
或者是标签的内容超出了标签的范围
处理溢出overflow
overflow: scroll;
- visible 溢出部分是可见的
- hidden 溢出的部分隐藏
- scroll 溢出的部分隐藏 但是可以滚动可见 不管有没有溢出 滚动条都可见
- auto 自适应 溢出的话 溢出部分隐藏 但是滚动可见
如果没有溢出 正常显示 不会出现滚动条
盒子阴影
水平偏移、垂直偏移、羽化度、阴影颜色
box-shadow: 5px 5px 5px palevioletred;
滚动条
overflow
标签的显示状态 display
标签的显示模式的分类： 块级标签(block) 行内标签(inline) 行内-块级标签(inline-block)
块级标签block
标签独占一行 宽度默认与父标签等宽 高度随着内容自适应 设置宽高时有效
例如 div p li tr body
行内标签inline
不会独占一行的 直到父标签宽度不够 内容才会换行 宽高是随着内容自适应的
设置宽高无效
例如 span b i a font
行内-块级标签inline-block
不会独占一行 直到父标签宽度不够 内容才会换行 宽高是随着内容自适应的
设置宽高有效
例如 img
可以通过display的样式修改标签的状态
需求： 就像设置span 宽高有效 但是不会独占一行
p标签 设置宽高无效 宽高随着内容自适应
修改行内标签的特点比较多一下
display还有一个值 为none 隐藏标签 隐藏标签之后 被隐藏的标签的位置是不会保留的
网页布局
布局分类：流式布局(标准文档流) 浮动布局(float) 定位布局(position属性)
流式布局
从上到下 从左到右输出文档内容
是由块级元素 或者 行内元素 或者 行内块级元素组成的
浮动布局float
这种布局会脱离流式布局(脱离了标准文档流)
以坐标系为例 讲解
- 流式布局 在xy平面上布局的标签 （z=0）
- 浮动布局 会脱离流式布局
浮动布局就是 在xy平面上布局的标签 z大于0的
浮动布局的元素就有可能会遮盖住流式布局的元素
例如
- 流式布局 （10， 20， 0）
- 浮动布局 (10, 20 , 1)
在浮动布局的基础上 ， 标签就没有块级和行内之分了
浮动布局的标签的大小都是有内容自适应 而且设置宽高有效
因为浮动布局的维度比流式布局维度高 会出现遮盖流式布局的情况出现。 这个问题怎么解决？？？
给被遮挡的元素添加 clear：both
问题：
在一个容器中有流式布局的元素 还有浮动布局的元素
因为浮动布局 导致容器的高度 并没有把浮动布局的标签包含在内， 这个问题怎么解决：
在浮动布局的下方 添加一个标签 这个标签也要在容器中
布局的时候这个标签不能被浮动布局的标签遮挡， 所以要给这个标签添加clear清除浮动 在浮动布局的下方开始布局。那么就可以通过这个标签的设计将容器的高度拉伸 将浮动布局的元素包含在内
在流式布局中对应的位置没有标签，下方的标签会向上移动
隐藏标签
- display 隐藏之后标签的位置不会保留
display: none;
下面的这几种方式都是保留位置的 */
- 设置是否可见
- visible 可见的
- hidden 隐藏的
visibility: hidden;
- 设置透明 opacity
0到1 0表示完全透明 1表示完全不透明
opacity: 0.5;
定位布局
position这个属性有四个值：
- static — 标签默认的就是static 就是流式布局
- relative – 相对定位
参照物：标签原本的位置
在标签原本位置的基础上进行移动
不会脱离流式布局 - absolute – 绝对定位 脱离流式布局
参照物：首先先看该标签的先辈标签中是否有设置有效的定位属性值(除了static都是有效的)， 如果有的话 就以该先辈标签为参照物进行定位。 否则就以body为参照物进行定位 - fixed — 固定定位 脱离流式布局
参照物：以窗口为参照物的
不管文档怎么上下移动 就相当于窗口定位在固定位置
当设置有效的定位属性后 标签相对于参照物如何进行定位：
当设置有效的定位属性后 会启动top left right bottom这几个属性。
- top:
正数：相对于参照物向下移动的位移
负数：相对于参照物向上移动的位移 - left:
正数：相对于参照物向右移动的位移
负数：相对于参照物向左移动的位移 - right：
正数：相对于参照物向左移动的位移
负数：相对于参照物向右移动的位移 - bottom：
正数：相对于参照物向上移动的位移
负数：相对于参照物向下移动的位移
z-index 设置z轴层次的位移值。 值越大 标签相对于咱们的视角就越靠前
问题：
行内 或者 行内块级标签 设置元素的时候 横向并不会在同一个水平线上
解决：
两种形式
- 设置 vertical-align: middle; 上下基准线对齐
- 还有一个是设置float 悬浮
从左向右走的 基准线在上方
形变
transform
- 拉伸形变 scale(sx, sy）
transform: scale(0.5,1.5);
横向拉伸
纵向拉伸
设置的是拉伸的倍数
如果这两个值一致 设置成一个即可 - 旋转形变 rotate(度数)
transform: rotate(-30deg);
度数单位deg
正数是顺时针旋转
默认以中心点为旋转点- 设置旋转点
transform-origin: left top;
x坐标 left center(默认值) right 自定义数值
y坐标 top center(默认值) bottom 自定义数值 - 既有拉伸 又有旋转
transform: scale(1.5) rotate(30deg);
- 设置旋转点
<style>
div{
width: 100px;
height: 100px;
background-color: plum;
color: white;
margin: 50px auto;
line-height: 100px;
text-align: center;
transform: scale(1.5) rotate(30deg);
}
</style>
过渡
transition
发生变化的数据 有一个渐变的特效
添加过渡属性
transition:all 2s linear;
- 发生过渡的属性名 如果有多个属性 可以赋值为all(所有都有过渡)
- 过渡需要的时间 单位是s秒
- 过渡渐变过程中的变化轨迹 默认ease由慢到快 linear 线性变化
<style>
div{
width: 200px;
height: 200px;
background-color: palevioletred;
transition:all 2s linear;
}
div:hover{
background-color: darkcyan;
transform: rotate(360deg);
}
</style>
动画
animate
添加动画属性：
- 自定义动画的名字
- 动画执行一次需要的时间 单位s
- 动画执行的次数 一直执行的话 infinite 无数次
- 动画执行期间的运动轨迹 ease linear
动画的效果需要自己设置 — 自己需要定义动画步骤
指定动画步骤：
- -webkit- 谷歌和safari
- -mz- IE浏览器
- -mos- 火狐
- -o- 欧朋
@keyframes 自定义动画名 {
from{动画起始的样式}
to{动画结束的样式}
}
动画步骤结束之后 标签的样式会回归到默认设计的样式
@keyframes 自定义动画名 {
0%{动画起始的样式}
....
100%{动画结束的样式}
}
例子：
<style>
div{
width: 200px;
height: 200px;
background-color: palevioletred;
animation: cus_an 6s infinite linear;
}
@keyframes cus_an{
from{
也可以不写 不写的话默认就是初始设置的标签的样式
}
to{
margin-left: 500px;
background-color: blue;
}
}
@keyframes cus_an{
0%{
opacity: 0;
margin-left: 0px;
transform: rotate(0deg);
}
25%{
opacity: 0.5;
margin-left: 250px;
transform: rotate(180deg);
}
50%{
opacity: 1;
margin-left: 500px;
transform: rotate(360deg);
}
75%{
opacity: 0.5;
margin-left: 250px;
transform: rotate(180deg);
}
100%{
opacity: 0;
margin-left: 0px;
transform: rotate(0deg);
}
}
</style>
来源：CSDN
作者：weixin_40354992
链接：https://blog.csdn.net/weixin_40354992/article/details/104315498