这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
一、本堂课重点内容
什么是CSS?
Cascading Style Sheets
它是用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
在页面中如何使用CSS
<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">
<!-- 嵌入 -->
<style>
li {margin: 0;list-style: circle;}
p {font-size: larger;}
</style>
<!-- 内联 不推荐 -->
<p style="margin:lem 0;">Exanmple Content</p>
内联有可能会在style中写比较多的属性，这样整个标签看上去会比较乱，建议提取出来，统一进行定义
font-family、font-size，font-weight 100-900
line-height
二、详细知识点介绍：
选择器 Selector
通配选择器
<style>
* {
color: red;
font-size: 20px;
}
</style>
标签选择器
<style>
li {margin: 0;list-style: circle;}
p {font-size: larger;}
</style>
id选择器
<blockquote cite="url" id="text">
<p>
引用一段话。。。。
</p>
</blockquote>
<style>
#text {
font-size: 25px;
font-weight: 200;
}
</style>
类选择器
<ul>
<li class="done">Learn HTML</li>
<li class="done">Learn CSS</li>
<li >Learn JavaScript</li>
</ul>
<style>
.done {
color:gray;
text-decoration: line-through;
}
</style>
属性选择器
<label>用户名</label>
<input value="chen" disabled />
<label>密码</label>
<input value="123456" type="password" />
<style>
[disabled] {
background: #eee;
color: #999;
}
</style>
伪类选择器
<a href="http://www.baidu.com">
百度
</a>
<label>用户名:
<input type="text">
</label>
<style>
a:link {
color: black; //默认
}
a:visited {
color: gray;// 点击过
}
a:hover {
color: orange;//鼠标放上去
}
a:active {
color: red;// 点击时
}
:focus {
outline: 2px solid pink;//输入框聚焦
}
颜色
rgb
000000 rgb(0,0,0)
hsl 色相、饱和度、亮度
hsl(10,50%,40%)
透明度 alpha 0 - 1
三、实践练习例子：
类选择器
属性选择器效果
四、课后个人总结：
本章知识点是CSS基础部分，比较好理解，讲解过程非常的细致，讲到了很多在之前学习的CSS中自己我没掌握的知识，扩展了自己的的知识，我认为其中比较难理解的就是对于伪类选择器使用上的一些区别吧
大家在学习CSS时，一定要注意的是，尽量避免使用内联引用，本次学习收获很多。😊
