文章目录
CSS
一基础认知
1.1:css的介绍
css:层叠样式表
css作用:给页面中的HTML标签设置样式
1.2css语法规则
写在哪里
- css写在style标签中,style标签一般写在head标签里面,title标签下面
样式:
选择器{
属性名:属性值;
}
1.3css初体验
常见属性:
color:文字颜色
font-size:字体大小
background-color:背景颜色
width:宽度
height:高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: red;
font-size: 30px;
background: skyblue;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
注意点:
-
css标点符号都是英文转态下的
-
每一个样式键对写完后,都需要写分号
2.1:css引入方式
- 内嵌式:css写在style标签中,通常约定写在head标签中,作用于小案例
- 外联式:css写在一个单独的.css文件中,需要通过link标签在网页中引入,作用于项目中
- 行内式:css写在标签的style属性中,之后配合js使用
二:基础选择器
1.1:选择器的作用
选择页面中对应的标签,方面后续设置样式
1:标签选择器
结构:标签名{
css属性名:属性值;
}
作用:通过标签名,找到页面中所有这类标签,设置样式
注意点:
- 标签选择器选择的是一类标签,而不是单独一个
- 标签选择器无论嵌套关系有多深,都能找到对应标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: red;
}
div{
color:blue;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我也是一个p标签</p>
<div>我是一个div标签</div>
<div>我也是一个div标签</div>
<div>
<div>
<div>
<div>
<p>躲猫猫</p>
</div>
</div>
</div>
</div>
</body>
</html>
效果:
2:类选择器
结果:
.类名{
css属性名:属性值;
}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color: red;
}
.big{
font-size: 30px;
}
.yellow{
color: yellow;
}
.pink{
color: pink;
}
</style>
</head>
<body>
<p class="red big">小红</p>
<p class="yellow">小黄</p>
<p class="pink">小粉</p>
<p class="red">我也要变红</p>
</body>
</html>
效果
注意点:
- 所有标签上都有class属性,class属性是属性值称为类名
- 类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
- 一个标签可以同时有过个类名,类名之间以空格隔开
- 类名可以重复,一个类选择器可以同时选中多个标签
3:id选择器
结构:#id属性值{
css属性名:属性值;
}
作用:通过id选择器,找到页面中带有这个id属性值的标签,设置样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#red{
color: red;
}
#green{
color: green;
}
</style>
</head>
<body>
<p id="red">红果果</p>
<p id="green">绿泡泡</p>
</body>
</html>
注意点
- 所有标签都有id属性
- id属性类似于身份证号码,在一个页面中是唯一的,不可重复的!
- 一个标签上只能有一个id属性
- 一个id选择器只能选中一个标签
补充,类和id的区别
- class相当于姓名,可以重复,以.开头
- id属性值相当于身份证号码,不可重复,一个标签只能有一个id选择器,以#开头
- 类选择器用的最多(冗余代码的提取),id选择器配合js使用,除特殊情况,不使用id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.common{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p class="common">我要变大,变红</p>
<div class="common">我也要变大,变红</div>
</body>
</html>
4:通配符选择器
结构:
*{
css属性名:属性值;
}
作用:找到页面中所有的标签,设置样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
color: indianred;
}
</style>
</head>
<body>
<p>小花</p>
<h1>我是标题1</h1>
<span>我是span标签</span>
<div>我是div选择器</div>
</body>
</html>
注意点
-
开发中使用极少,只有在特殊情况下才会用到
-
在基础小页面中可能会用于去除标签默认的margin和padding
三:字体与文本样式
1:字体大小
属性名:font-size
取值:数字+px(像素点)
注意点:
- 谷歌浏览器默认文字大小是16px
- 单位要设置,否则无效
2:字体粗细
属性名:font-weight
取值:
- 关键字:
正常:normal
加粗:bold
- 纯数字:100到900的整百数
正常:400;
加粗:700
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.boldone{
font-weight: bold;
}
.bold01{
font-weight: 700;
}
</style>
</head>
<body>
<p class="boldone">我是一个p标签</p>
<p class="bold01">我也是一个p标签</p>
</body>
</html>
注意点:
-
不是所有字体都提供了九种粗细,因此部分取值页面中无变化
-
实际开发中以:正常,加粗二种取值使用最多
3:字体样式(是否倾斜)
属性名:font-style
取值:
- 正常:normal
- 倾斜:italic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.italic{
font-style: italic;
}
</style>
</head>
<body>
<p class="italic">我是一个p标签</p>
</body>
</html>
4:常见字体系列
无衬线字体(sans-serif)
特点:文字笔画粗细均匀,并且首位无修饰
常见:网页中大多采用无衬线字体
衬线字体(serif)
特点:文字笔画粗细不匀,并且首尾有笔锋修饰
场景:报刊书籍中应用广泛
等宽字体(monospace)
特点:每个字母后文字的宽度相等
场景:一般用于程序的编写,有利于代码的阅读和编写
5:字体系列
属性名:font-family
常见取值:具体字体1,具体字体2,具体字体3,字体系列
渲染规则:
-
从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体
-
如果都不支持,会根据操作系统,显示最后系列的默认字体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-family:苹方,微软雅黑,sans-serif; } </style> </head> <body> <p>我是一个p标签</p> </body> </html>
macOs:苹方
Windows:微软雅黑
注意点:
- 如果字体名称中存在多个单词,推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 网页开发中,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正确显示
6:样式的层叠问题
问题:给一个标签设置了多个相同的样式,此时浏览器如何渲染
结果:最下面的样式会生效,就近原则,因为浏览器是从上往下解析的。
7:字体font相关属性的连写
属性名:font
取值:font:style weight size family
顺序要求 :swsf(稍微舒服)
省略要求:只能省略前二个,省略了相当于设置了默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font: italic bold 30px 隶书,楷书,sans-serif ;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
</body>
</html>
注意点:如果需要同时设置单独和连写形式
要么把单独的样式写在连写的下面
要不吧单独的样式写在连写的里面
四:字体和文本样式
1:文本缩进
属性名:text-indent
取值:
- 数字+px
- 数字+em(推荐,1em=当前标签的font-size的大小)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p
text-indent: 2em;
}
</style>
</head>
<body>
<p>啦啦啦我是卖报的小画家,滴滴滴,我是敲代码的小笨蛋</p>
</body>
</html>
2:文本水平对齐方式
属性名:text-align
取值
left:左对齐
center:局中对齐
right:右对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.box{
width: 400px;
height: 400px;
background-color: skyblue;
text-align: center;
}
</style>
<body>
<div class="box">
我是一行文本
</div>
</body>
</html>
注意点:
如果需要让文本水平局中,text-align属性给文本所在标签(文本的父元素)设置
3:文本修饰
属性名:text-decoration
取值:
undeline:下划线(常用)
line-through:删除线(不常用)
overline:上划线(几乎不用)
none:无装饰线(常用)
注意点:
开发中会使用text-decoration:none;清除下划线
4:水平局中方法总结
text-align:center能让那些元素水平局中
1:文本
2:span标签,a标签
3:input标签,img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.box{
width: 400px;
height: 400px;
text-align: center;
}
.none{
text-decoration: none;
}
</style>
<body>
<div class="box">
<img src="../resources/image/img.png" alt="">
<br>
Xiaomi 12 Pro
<br>
全新骁龙八|2k AMOLED屏幕
<br>
<a href="https://www.mi.com/mi12pro" class="none">4999起</a>
</div>
</body>
</html>
总结:
文本缩进:text-indent:数字+px/数字+em
文本水平:text-align:left/center/right
文本修饰:text-decoration:underline/none
水平局中方法总结:
如果需要div,p,h等大盒子水平局中
可以通过margin:0 auto;实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 400px;
height: 400px;
background-color:skyblue;
}
.son{
width:150px;
height:150px;
background-color:orange;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
注意点:
如果需要让div,p,h(大盒子)水平局中,直接给当前元素本身设置即可
margin:0 auto 一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度
4:行高
作用:控制行间距
属性名:line-height
取值:
- 数字加px
- 倍数(当前标签font-size的倍数)
应用:
- 让单行文本垂直局中可以设置line-height:文本父元素的高度
- 网页精准布局时,会设置line-height:1 可以取消上下间距
注意点:
如果先写行高在设置别的会被覆盖
font:style weight size/line-height family;
5:颜色表示方法
- 关键字表现法
- rgb表示法:rgb(red,green,blue),每项取值为0-255
- rgba表示法,a表示透明度,取值0-1,0是完全透明,1完全不透明
- 十六进制表示法
如果三组中每组数字都相同,每组可以省略只写一个数字
实际开发中会直接提供颜色,不需要前端自己设计
五:案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 800px;
background-color: wheat;
margin: 0 auto;
}
.box01{
text-align: center;
}
.s1{
color:#87ceeb;
}
.link{
text-decoration: none;
}
p{
text-indent:2em;
}
</style>
</head>
<body>
<div class="box">
<div class="box01">
<h1 >
如何提升自己感知快乐的能力
</h1>
<span>2022年03月08日21:24</span>
<span class="s1">新浪科技</span>
<a href="#" class="link">收藏文本</a>
</div>
<p>责任心一直是一个备受推崇和肯定的品质,不过一项研究发现,人们的尽责性与生活满意度呈显着负相关(Taher et al., 2013),也就是说,责任心越强的人,会越容易不快乐。另一项研究写道,尽责性强的人容易不快乐,可能是因为ta们更执着于想通过自己的力量来改变一些事情,因此当ta们遇到无法依靠个人力量克服的挫折(比如社会问题),会更无助和绝望(Boyce, 2010)。此外,尽责性高的人会更需要从他人给到的正面反馈中获得满足感,而尽责性较低的人正好相反,ta们不是懒惰,只是生活态度较为悠闲、随性,不太追逐世俗的“成功”,只要ta们觉得自己做得还不错,就会感到快乐。所以,我们并不是要鼓励大家做一个尽责性低的人,只是尽责性高的小伙伴可以试着像尽责性较低的人一样,多多关注和给予自己对自己的认可。
</p>
<p>生活中我们很少用“耐心”这个词来夸奖一个人,但其实耐心是一个很珍贵的品质,它指的是一个人在面对挫折、逆境或苦难时保持冷静等待的倾向或能力(Schnitker, 2012)。忙碌的我们为了节约时间,可能很久都没体会过耐心的感觉了,而这其实会将我们的情绪逐渐拉向快乐的对立面。一项研究就从对待人际关系的耐心、面对困境的耐心以及对待日常烦恼的耐心三个维度出发,研究了耐心与个人幸福感(包括孤独感、希望感和生活满意度)的关系(Schnitker, 2012)。研究显示,耐心是维持一段良好关系的关键因素,对待人际关系越有耐心的人,越不容易感到孤独。其次,耐心的人在面对挫折时更具备保持冷静应对的能力,ta们更相信自己能等到度过困难的那一天,因此有耐心的人会保有更强的希望感,这会极大地减轻我们在困境中的负面情绪。
</p>
<p>宜人性(Agreeableness)是心理学上的“五大人格”之一。宜人性高的人通常会更有亲和力、更友好、更富有同情心;相对的,宜人性较低的人会给人更理性、批判性更强的感觉。研究发现,宜人性越高的人,越容易感到快乐。这确实是因为,宜人性高的人通常来说会更受欢迎,拥有更和谐的人际关系(Simon, 2010)。但好的人际关系所带来的快乐,不仅仅是因为我们的人际环境变得更融洽了,研究者认为,好的人际关系更重要的价值是,更容易获得他人的理解,提升我们与他人沟通的效率,从而更好地交换信息。尤其是在工作中,宜人性高的人,更能获得同事的理解,与他人达成高效的合作。这将会大大提升ta们对工作的满意度。作为一个社畜,工作不闹心,生活自然是更开心啦。
</p>
<p>每个人对于自己的思想和感情的接纳程度是各不相同的。一项心理测量研究表明,“接纳”这个人格特质与幸福感有很高的相关性(Catalino et al., 2017)。研究发现,接纳特质高的人每天所感受到的负面情绪会相对更少,因为ta们会更少地进行反刍——不会沉浸在自己的消极情绪以及已发生的糟糕结果中。同时,接纳特质更高的人也会更少地批判自己的想法和感受,当负面情绪出现时,一些人会认为这种体验是不好的或不应该出现的,而接纳特质高的人则允许自己有这些负面的感觉,不会去过度地批判自己。可想而知,一个更少内耗的人,自然更容易感受到生活中点点滴滴的快乐。
</p>
</div>
</body>
</html>
效果: