文章目录
概念
- CSS 即层叠样式表 Cascading Style Sheets
- 通过CSS可以让我们定义HTML元素如何显示。
- CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。
- 通过CSS描述我们的html页面，可以让我们的页面更加美观，提高工作效率。
CSS与HTML的结合方式
方式一：内联/行内样式
- 在我们的HTML标签上通过
style属性来引用CSS代码。- 优点：简单方便
- 缺点：只能对一个标签进行修饰
<body>
<div style="color: blue">聚沙成塔，滴水穿石。</div>
</body>
方式二：内部样式表
- 我们可以通过
<style>标签来声明我们的CSS，通常<style>标签我们推荐写在head和body之间，也就是脖子的位置 - 优点：可以通过多个标签进行统一的样式设置
- 缺点：只能在本页面上进行修饰
- 语法：
选择器 {属性:值; 属性:值}
<style>
div {
color: blueviolet;
}
</style>
<body>
<div>聚沙成塔，滴水穿石。</div>
</body>
方式三：外部样式表
- 我们需要单独定义一个CSS文件，CSS文件的后缀名就是
.css - 在
<head>中使用<link>标签引用外部的css文件
/* test.css */
div {
color: blueviolet
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello, HTML!</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div>聚沙成塔，滴水穿石。</div>
</body>
</html>
- 这里还可以使用
@import方式引入 css 文件
<style>
@import 'test.css'
</style>
- 外部导入css，使用
<link>与@import的区别：- 加载顺序不同：
@import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。- link方式则是会先加载样式表，也就是说我们看到的直接就是修饰的页面。
@import方式不支持 javascript 的动态修改；而link支持。
- 加载顺序不同：
- 三种样式表的优先级：满足就近原则（意思是三种样式表如果同时存在的话，优先使用哪一种样式）
- 内联 > 内部 > 外部
CSS的使用
CSS选择器
元素（标签）选择器
- 它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称。
<style>
div {
color: cyan
}
</style>
<body>
<div>聚沙成塔，滴水穿石。</div>
<div>千里之行，始于足下。</div>
</body>
类选择器 & id选择器
- 类选择器在使用时使用
.来描述，它描述的是元素上的class属性值。 - id选择器只能选择一个元素，使用
#引入，引用的是元素的id属性值。（比类选择器更具唯一性）
<style>
.a {
color: cyan
}
#b {
color: blue
}
</style>
<body>
<div class="a">聚沙成塔，滴水穿石。</div>
<div id="b">千里之行，始于足下。</div>
</body>
选择器组
- 例如：我有手机，你有手机，他也有手机，一条一条写过于繁琐，可以合并编写。
<style>
.a, #b {
color: cyan
}
</style>
<body>
<div class="a">聚沙成塔，滴水穿石。</div>
<div id="b">千里之行，始于足下。</div>
</body>
派生选择器
- 子代：仅父子关系
- 后代：父子孙、曾孙、从孙…子子孙孙无穷尽也…
<style>
/* 子代，表示受影响的仅有div下的p（数学 语文） */
div>p {
color: blue
}
</style>
<body>
<div>
<p>数学</p>
<p>语文</p>
<span>
<p>文言文</p>
<p>现代文</p>
</span>
</div>
</body>
<style>
/* 后代，表示受影响的为div下的所有元素 */
div p {
color: blue
}
</style>
<body>
<div>
<p>数学</p>
<p>语文</p>
<span>
<p>文言文</p>
<p>现代文</p>
</span>
</div>
</body>
CSS伪类
- CSS伪类可对选择器添加一些特殊效果
- 伪类属性列表：
:active向被激活的元素添加样式。:hover当鼠标悬浮在元素上方时，向元素添加样式。:link向未被访问的链接添加样式。:visited向已被访问的链接添加样式。:first-child向元素的第一个子元素添加样式。
- 超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha按顺序使用。
CSS基本属性
文本属性
- 指定字体：
font-family : value - 字体大小：
font-size : valuepx：像素em：倍数
- 字体加粗：
font-weight : normal / bold - 文本颜色：
color : value - 文本排列：
text-align : left / right / center - 文字修饰：
text-decoration : none / underline - 行高：
line-height : value - 首行文本缩进：
text-indent : value（2em）
背景属性
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
background-color设置元素的背景颜色。background-image把图像设置为背景。
background-image: url('img/1.jpg');
background-repeat设置背景图像的墙纸效果，是否及如何重复repeat：在垂直方向和水平方向重复repeat-x：仅在水平方向重复repeat-y：仅在垂直方向重复no-repeat：仅显示一次
background-position设置背景图像的起始位置- 控制x轴： 正值，向右移动； 负值，向左移动
- 控制y轴： 正值，向下移动； 负值，向上移动
/* 图片向右移动50px，向下移动100px */
background-position: 50px 100px;
background-attachment背景图像固定或随着页面滚动- 默认值是
scroll：默认情况下，背景会随文档滚动 - 可取值为
fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像
- 默认值是
列表属性
- CSS列表属性作用如下：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
- 有两种类型的列表：
- 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
- 有序列表 - 列表项的标记有数字或字母
- 使用CSS，可以列出进一步的样式，并可用图像作列表项标记。
none：无标记。（去除标记）disc：默认，标记是实心圆。circle：标记是空心圆。square：标记是实心方块。decimal：标记是数字。decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)upper-roman：大写罗马数字(I, II, III, IV, V, 等。)lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)
边框属性
CSS边框属性允许你指定一个元素边框的样式和颜色。
<style> div { border-width: 20px; border-color: green; border-style: outset; }</style><body> <div>hello</div></body>
border-style 取值：
轮廓属性
- 轮廓（
outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 - 轮廓和边框的区别：
- 边框 (
border) 可以是围绕元素内容和内边距的一条或多条线； - 轮廓（
outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
- 边框 (
- CSS
outline属性可以规定元素轮廓的样式、颜色和宽度。
盒子模型
-
所有HTML元素可以看作盒子，在CSS中，“box model” 这一术语用来设计和布局时使用。
-
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
-
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
-
下面的图片可以简单描述盒子模型(Box Model)：
-
margin(外边距) - 盒子与盒子之间的距离 -
border(边框) - 盒子的保护壳 -
padding(内边距/填充) - 内填充，盒子边与内容之间的距离 -
content(内容) - 盒子的内容，显示的文本或图像
CSS定位
默认定位
-
块级元素：
h1~h6，p,div等，自上而下，垂直排列（自动换行）；可以改变宽高。 -
行内元素：
a,b,span等，从左向右，水平排列（不会换行）；不能改变宽高。<style> div { display: inline } </style> -
行内块元素：
input,img等，从左向右，水平排列（自动换行）；可以改变宽高。<style> div { display: inline-block } </style>
浮动定位
- 让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。
float取值：none：不浮动left：靠左浮动right：靠右浮动
<style>
div {
float: left
}
</style>
相对定位
- 和原来的位置进行比较，进行移动定位（偏移）
<style> div { position: relative; top: 50px; left: 50px }</style>
绝对定位
- 本元素与已定位的祖先元素的距离
- 如果父级元素已定位，则以父级为参照物；
- 如果父级未定位，找爷级，爷级定位了，以爷级为参照物。
- 如果爷级未定位，则继续逐级向上查找，如果都没有定位的话，body是最终选择。
<style> div { position: absolute; top: 50px; left: 50px }</style>
固定定位
将元素的内容固定在页面的某个位置，当用户滚动页面时元素框不随之移动。
<style>
div {
position: fixed;
top: 50px;
left: 50px;
}
</style>
Z-index
- 如果有重叠元素，使用
z轴属性，定义上下层次。 - 在重叠的区域，
z-index数值较大者优先显示。（下图为块b优先显示）
<style>
div {
position: fixed;
top: 50px;
left: 50px;
}
.a {
position: relative;
z-index: 1;
}
.b {
position: relative;
z-index: 2;
}
</style>
<body>
<div class="a">A</div>
<div class="b">B</div>
</body>
- 注意事项：
z轴属性需要配合相对或绝对定位来使用z-index没有额定数值（整型即可）
CSS3
圆角
border-radius：左上 右上 右下 左下;（当同时设置4个参数时，各个参数分别代表的位置）border-radius：四个角;（当仅设置一个参数时，表示同时设置四个角）border-radius：50%; （圆形）
盒子阴影
box-shadow：1 2 3 4 5（以下为各个位置的参数分别代表的含义）1：水平偏移2：垂直偏移3：模糊半径4：扩张半径5：颜色
渐变
线性渐变
background:linear-gradient([方向/角度]，颜色列表)；
径向渐变
- 以圆心向外扩散
background: radial-gradient(颜色列表);
背景
背景位置
background-origin：指定背景图像的位置区域border-box: 背景贴边框的边padding-box: 背景贴内边框的边content-box: 背景贴内容的边
背景裁切
background-clip:border-box边框开切padding-box内边距开切content-box内容开切
背景大小
background-size:cover缩放成完全覆盖背景区域的最小尺寸contain缩放成完全适应背景区域的最大尺寸
过渡 & 动画
过渡
- 从一个状态到另一个状态，中间的“缓慢”过程；
- 缺点是，控制不了中间某个时间点。
transition: 1 2 3 4（以下为各个位置的参数分别代表的含义）- 1：过渡或动画模拟的css属性
- 2：完成过渡所使用的时间（2s内完成）
- 3：过渡函数
- 4：过渡开始出现的延迟时间
- 目前，css3只开发出部分的过渡属性，如下图所示：
<style>
div {
width: 100px;
height: 50px;
border: 2px solid red;
}
.a {
transition: width 2s linear 1s; /*1秒过后，div在2秒内匀速缓慢的变宽*/
}
div:hover {
width: 300px; /*触发div变宽*/
}
</style>
<body>
<div class="a">Hello, CSS3!</div>
</body>
动画
- 从一个状态到另一个状态，过程中的每个时间点都可以控制。
- 关键帧：
@keyframes动画帧{ from{} to{} }或者{ 0%{} 20%{}... } - 动画属性：
animation: 1 , 2 , 3 , 4 , 51：动画帧2：执行时间3：过渡函数4：动画执行的延迟（可省略）5：动画执行的次数
<style>
div {
width: 700px;
border: 1px solid red;
}
@keyframes x {
from {
margin-left: 0px;
}
to {
margin-left: 550px;
}
}
img {
animation: x 3s linear 2;
}
</style>
<body>
<div><img src="img/cat.gif"> </div>
</body>
- 以上代码表示：一个元素从左向右移动，3秒内执行2次
<style>
.wai {
width: 600px;
height: 100px;
border: 2px solid red;
}
.nei {
width: 40px;
height: 80px;
margin: 5px;
background: red;
}
.nei {
animation: x 3s linear infinite alternate;
}
@keyframes x {
0% {
margin-left: 0px;
}
25% {
background: yellowgreen;
}
50% {
background: goldenrod;
}
75% {
background: palevioletred;
}
100% {
background: coral;
margin-left: 550px;
}
}
</style>
<body>
<div class="wai">
<div class="nei"></div>
</div>
</body>
- 以上代码表示：一个元素匀速从左向右移动（期间逐渐变色），3秒内执行完成，无限次往返执行
infinite：无限次alternate：来回执行（交替，往返）
3529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
