目录
1. text-decoration:None(让文字的下划线消失)
2. hover:让用户在将鼠标放到文字上,文字显示为下划线。
6. position布局(分为relative和absolute)
一、如何用CSS进行版面设计和网页的美化
总共有三种方法
1. 直接将语法写在html标签里
例子:
<h1 style="color: brown;">你好</h1>
用style的color属性,直接将文字改成别的颜色。
但是这样太耗时费力,如果页面有很多个文本。
2. 把CSS语法统一写到head标签里
例子:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
color:brown;
}
</style>
</head>
这里加了一个<style>区块,在里面将正文里所有出现过的h2颜色都统一设置为了brown。
省时省力(对于页面较少的网站来说)
除了修改颜色之外,还能修改字体大小(font-size)
3. 将CSS单独提出来变成一个样式表
先要单独开一个新的文件,后缀为.css
将原本在html文件中的head文件里的设置放到里面
具体语法如下:(无需<style>...</style>)
h2{
color:brown;
}
p2{
color:red;
}
但是在这之后,还需要将这个css文件连接回原来的html文件。
所以在原来的html文件里加上这段
(<link rel="stylesheet" href = style.css>)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href = style.css>
</head>
其中,rel代表所指向的文件类型,因为这里是样式表,所以是stylesheet。
href指向文件所在的路径
二、CSS三大元素
1. Border(边框)
在style.css里对应要修改样式的内容
语法:border: 边框粗细,颜色和线条样式
header, section, footer {
backaround-color: 0#d6cCC2;
border:5px 口#9d8189 solid;
}
solid(一般的直线)
dashed(虚线)
dotted(圆点线)
2. Padding(内边距)
内容与边框之间的空隙大小
2.1 只输入一个值
这个值会套用在外边框的四周
2.2 只输入两个值
上下、左右
2.2 只输入三个值
按上、左右、下的边去调整
2.2 输入四个值
padding: 30px(上),0px(右),20px(下),10px(左)
顺时针
3. margin(外边距)
不同网页元素之间的距离
语法与Padding一致
可以重设这三大元素,在style.css里修改
* {
padding: 0;
margin: 0;
}
三、常用语法
1. text-decoration:None(让文字的下划线消失)
设置为underline则为让它有下划线
header a {
color:white;
text-decoration: none;
header a:hover {
text-decoration: underline;
}
2. hover:让用户在将鼠标放到文字上,文字显示为下划线。
3. 将导航栏变成行内元素(变成横的)
header li {
display:inline;
}
4. margin-right(右边距)
header li{
display: inline;
margin-right: 4vw;
}
这里的vw(viewpoint width)表示视窗宽度
4vw表示页面宽度的4%
还有margin-bottom(底部外边距)
5. height(所占高度)
6. position布局(分为relative和absolute)
注意:使用relative时,从原先所在位置移动
比如
header {
position:relative;
left:50px; top:100px;
}
这里表示在原先的位置上左边多出50像素,上方多出100像素
7. 放logo
background-image:url(相对路径);
background-image:url(images/logo.svg) ;
#(把logo图片换上来,但因为为了有助于搜索引擎理解网页内容,所以这里的文字不能取代,
这里就用了背景图片)
background-repeat: no-repeat; (这是为了不要重复加载背景图)
background-position: center;(将背景居中)
width:210px;(logo的宽度)
text-indent: -9999px;(将原有的文字推的很远)
8.为section分组
因为如果单纯在.css文件中对所有section进行更改,会使其他section丧失灵活性。
所以这里需要为section分组。
分组方式:
<section class = "任何想要的名称">
使用方式(在样式表中使用):
."对应的section的组名"{
属性
}
记得要加.
9.添加背景图片时
此时用no-repeat,以防重叠
但是这会导致图片与边框间有一定的间隙,为了填补间隙,需要调节图片的尺寸。
调节尺寸的方法:
background-size:cover;
background-position: center;(使图片居中)
10. Flexbox(实现灵活布局)
使用方式:在html的父元素中,写入
display:flex;
这就能让子元素产生各种排列的方式(各方块各代表一个部分里的内容)
但是使用后,会让子元素变成横向展示,若要变成原先的竖向堆叠,
则要使用
flex-direction:column;
比如:水平置中
justify-content:center;
再比如:伸展到父元素的两侧
justify-content:space-between;
均分子元素以外的空隙:
justify-content:space-evenly;
垂直置中:
align-items:center;
11. 边框圆角效果
border-radius: 5px;
12. 辅助标签(div)
用于划分或组织html的元素
用法可参考下方:
<div class="info">
<h2>8月1日大安旗艦店隆重開張!</h2>
<p>享受花園庭院的悠閒時光,內用座位區美食相伴,<br>
即日起來店消費加 LINE 好友可獲精緻小點心,等您一同品味!</p>
</div>
就是相当于把两块子元素封装在一起,并设置类名。
13. 几个对齐属性的区别和效果
1⃣️align-content属性
作用:设置同一列子元素在Y轴的对齐方式
2⃣️justify-content属性
作用:设置同一行子元素在X轴的对齐方式
3⃣️align-items属性
作用:设置同一行子元素在Y轴的对齐方式
总而言之,"text-align" 用于控制文本的水平对齐,而 "align-items" 和 "justify-content" 用于控制 flex 容器中项目的垂直和水平对齐。
14. cursor(让鼠标移到按钮上时,变成手指的形状)
cursor:pointer;
15. 单独对输入框文字进行更改
input::placeholder{
属性
}
注意这里不需要加类名
16. 单独对鼠标移到输入框时输入框颜色的更改
一般预设的输入框颜色是黑色
若要更改,需使用
input:focus {
outline:none;
border-color:white;
}
这里是让边框去除颜色后,变成白色
17. 固定导航栏,使网页下滑时导航栏仍在上方
在.css文件中,将导航栏的position改成fixed即可
但是这样的话,原本下方的区块会往上移动,弥补先前导航所占的空间。
而为了弥补这一缺陷,可以将第二区块的height加大,并调节标题的上边距,
就能完成这一缺陷。
18. 在X轴上使元素移动的语法
transform: translate(-50%);
表示往左移动50%的距离
19. 汉堡选单(菜单栏的按钮)
注意,这里是html
<button class="menu">☰</button>
☰是汉堡选单按钮的字符代码
当需要隐藏它时,可使用
display:none;
将其隐藏
同样,需要显示时,使用
display:block;
隐藏边框时,可使用
border:none
四、响应式设计(Responsive Design)
目的:为了让页面缩放时,在页面内容大小改变时,能够维持原有的比例进行缩放。
具体语法如下:
@media screen and (max-width: 768px){
这里表示当屏幕小于768像素时界面变化的属性
}
五、动画效果(animation)
先在.css文件中
@keyframes change-color {
from {background-color: red;}
to {background -color: blue;}
}
这里的change-color是动画的名字
这里表示改变颜色,从红色变成蓝色
. box-animation {
animation-name: change-color:
animation-duration:2s
}
这里表示对box进行一个动画效果,animation-name表示指向哪个animation
duration表示动画的时间。
animation-iteration-count:infinite
这里表示无限重复
animation-delay:2s
这里表示进入网页2s后开启动画效果