层叠样式表(英文全称: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>