层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
css是对网页进行修饰最成熟的工具，前提是你会利用h5进行网页布局，然后利用css进行修饰，你就会拥有一个完美的网页了，让我们来开始学习吧，不会h5的请走这里https://blog.csdn.net/weixin_43271086/article/details/100914574。就是我的上一篇博客啦，哈哈！！不多说，开始讲解
目录
1，创建CSS（使用內联式，外部式，标签式）三种样式优先级：内联式>嵌入式>外部式
3，创建文本样式（利用style标签在head头标签中完成）
。
1，创建CSS（使用內联式，外部式，标签式）三种样式优先级：内联式>嵌入式>外部式
- 內联式：写在标签的后边，比如注明他的大小，颜色，等等
<a style="font-size: 40px; color: #ff7291">勃勃</a> <!--元素内嵌样式表-->
- 嵌入式：写在head中的一部分内容，以style开头的一个标签，类型type写成 text/css，如果对a标签进行修饰，则写a{}在里面写你修饰的内容。比如：
<style type="text/css">
a{
font-size: 20px;
color: #e660ff;
}
</style>- 外部式，通过名字就是写在外面的东西，我们需要重新创建一个.css后缀名的文件，在里面写标签和你需要设计的东西，然后在html文件中利用link标签在head头标签中进行调用。
a{
font-size: 40px;
color: #96ff85;
}<link rel="stylesheet" href="a.css" type="text/css">2，创建CSS选择器
-
根据类型标签进行
a{
font-size: 40px;
color: aquamarine;
}- 用*进行所有标签的选择
*{
font-size: 40px;
color: aquamarine;
}- 根据类进行选择
根据类选择元素
.class1{
font-size: 40px;
color: yellowgreen;
}- 根据ID进行选择
根据ID选择元素 ,id是一个唯一的身份标志,尽量只使用一次即可
#id1{
font-size: 40px;
color: fuchsia;
}-
根据属性进行选择
根据属性进行选择
[href]{
font-size: 40px;
color: aquamarine;
}-
根据具体属性进行选择
根据具体属性进行选择
[href="1cssprimary.html"]{
font-size: 40px;
color: aquamarine;
}以上属性验证代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建CSS选择器</title>
<style type="text/css">
/*!*根据类型标签进行字体设置*!*/
a{
font-size: 40px;
color: aquamarine;
}
/*利用冒号选择器,在鼠标经过的时候进行标识的改变*/
a:hover{
font-size: 50px;
color:blanchedalmond;
}
/*选择所有元素*/
*{
font-size: 40px;
color: aquamarine;
}
根据类选择元素
.class1{
font-size: 40px;
color: yellowgreen;
}
根据ID选择元素 ,id是一个唯一的身份标志,尽量只使用一次即可
#id1{
font-size: 40px;
color: fuchsia;
}
根据属性进行选择
[href]{
font-size: 40px;
color: aquamarine;
}
根据具体属性进行选择
[href="1cssprimary.html"]{
font-size: 40px;
color: aquamarine;
}
</style>
</head>
<body>
<a href="1cssprimary.html" target="_blank">bobo</a>
<p >bobo</p>
<h1 >bobo</h1>
<a href="2cssxuanze.html">hehe</a>
<p>hehe</p>
<h1>hehe</h1>
</body>
</html>3，创建文本样式（利用style标签在head头标签中完成）
-
设置居中,靠左,靠右对齐
text-align: center;/*设置居中,靠左,靠右对齐*/-
设置字间距
letter-spacing: 20px;/*设置字间距*/-
设置单词间距
word-spacing: 100px;/*设置单词间距*/-
设置行高
line-height: 100px;/*设置行高*/
-
设置首行缩进
text-indent: 50px;/*设置首行缩进*/
-
设置下划线 overline上划线,line-through 中划线
text-decoration: underline;/*设置下划线 overline上划线,line-through 中划线*/
-
capitalize自动化配置,可将首字母变大,uppercase全部变成大写lowercase全部变成小写
text-transform: lowercase;/*capitalize自动化配置,可将首字母变大,uppercase全部变成大写lowercase全部变成小写*/
- 创建字体类型
font-family: "微软雅黑 Light";-
设置字体风格,italic为斜体
font-style: oblique;/*设置字体风格,italic为斜体*/
-
指定字母是否以小型大写字母显示
font-variant: small-caps;/*指定字母是否以小型大写字母显示*/
- 进行字体加粗
font-weight: 500;/*加粗*/- 设置阴影
text-shadow: 5px 5px 5px aquamarine;/*设置阴影,必须设置三个值或者四个值,水平偏移,竖直偏移,模糊程度,颜色*/
4，创建文本过渡
重点在于，写完标签设计之后，重写标签在后面加上hover意思是当鼠标移动在上面后会发生变化
- 创建p标签
p{
width: 200px;
height: 200px;
background-color: aqua;
}- 创建p:hover标签
p:hover{
width: 1000px;
height: 1000px;
background-color: aquamarine;
transition-delay: 150ms;/*设置延迟变化时间*/
transition-duration: 1000ms;/*设置缓慢变化*/
/*transition-property: background-color;!*background-color缓慢触发*!*/
transition-timing-function: ease;/*过渡专用*/
}利用hover标签在p：hover标签中进行变化，你可以设置大小的改变等等，具体看图，还有缓慢出发大家也可以了解了解，下面细讲几个点。
- 设置缓慢变化时间，在于你本文本的变化周期
transition-duration: 1000ms;/*设置缓慢变化*/- 缓慢触发（就是你鼠标点击慢慢变化啦）
transition-property: background-color;/*background-color缓慢触发*/
- 过渡，csae表示颜色过渡速度一致，case-in直接到达
transition-timing-function:case-in-out;/*过渡专用*/5，创建动画
创建动画利用前面的p标签和p:hover标签还用到了@keyframes标签和to标签，当然你在@keyframes里面可以写from to 标签，也可以写from 25% 50% 75% to等等。首先来讲讲@keyframes是什么意思？
就是规定这是一个动画，理解为一种系统提示吧，其实动画效果用的不多，更多使用过渡吧，除了这些，你还得考虑每个浏览器的是否支持，你需要在前面加上前缀，比如
-moz-animation 适用于火狐-o-background-image 适用于欧鹏-webkit-flex-flow 适用于谷歌上整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建动画</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
background-color: aquamarine;
}
p:hover{
animation-delay: 500ms;
animation-duration: 200ms;
animation-name: kuku;
animation-iteration-count: 3;
animation-direction:alternate;
animation-fill-mode: forwards;/*停止在最后一帧*/
}
@keyframes kuku {
to{
width: 200px;
height: 200px;
background-color: fuchsia;
opacity: 0.1; /*透明度*/
}
}
</style>
</head>
<body>
<p></p>
</body>
</html>6，css适用变换
-
rotate进行角度的变换（deg代表角度）
transform:rotate(45deg);-
scale进行比例放大（）内是放大倍数
transform:scale();- 在rotate上改变旋转中心
transform-origin: bottom right;/*改变旋转的中心点*/bottom 向下 right 向右 left 向左 top 向上
7.创建盒子模型
标准盒子模型
Margin(外边距)-清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建盒子模型</title>
<style type="text/css">
.class1{
border: 1px solid black;
background-color: aquamarine;
/* padding-top: 100px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 100px;*/
padding: 100px; /*组合使用方式*/
margin: 400px;/*盒子外部设置*/
background-clip:padding-box ; /*content-box规定只有内容区域有颜色 padding-box所有区域*/
}
</style>
</head>
<body>
<div class="class1">haha</div>
</body>
</html>
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
