这是我参与「第五届青训营 」笔记创作活动的第2天。
1.前言
2.学习内容
- CSS是什么
Cascading Style Sheet层叠样式表
用来定义页面元素的样式
- 选择器
- 页面中使用CSS
- 外链
- 嵌入
- 内联
- 选择器相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 标签选择器：所有这个标签都生效 */
p{
color: red;
}
/* 类选择器 */
.one{
color:blue;
}
/* id选择器 一个页面只能用一次*/
#two{
color: rgb(0, 115, 255);
}
/* 通配符选择器 */
*{
color: blueviolet;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>标签选择器1</p>
<p>标签选择器2</p>
<p class="one">类选择器3</p>
<div id="two">id选择器</div>
<h3>h3</h3>
</body>
</html>
效果如下
- 其他选择器
属性选择器
- 伪类
- 状态性伪类
如a标签：
a:link 默认
a:visited 访问过
a:hover 鼠标移到链接上
a:active 鼠标按下去
:focus 鼠标点到输入框 - 结构性伪类
li:first-child 列表第一项
li:last-child 列表最后一项
- 组合
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 后代选择器，子代包括儿子孙子重孙子 */
div
p{
color: red;
}
/* 子代选择器，只包括儿子 */
div>a{
color: aqua;
}
/* 并集选择器 */
span,
h1 {
color: olivedrab;
}
/* 交集选择器 */
p.box{
color: blue;
}
.wei:hover{
/* 悬停的时候文字颜色是红色 */
color: red;
background-color: black;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
<div>
父级
<p>这是div的儿子p</p>
<a href="">这是div里的a</a>
<p>
<a href="">这是div里的p里的a</a>
</p>
</div>
<span>span</span>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p class="box">pbox</p>
<p>pbiaoq</p>
<div class="box">divbox</div>
<p class="wei">伪类选择器</p>
</body>
</html>
效果如下
- 格式化文本内容
- 颜色-RGB
- 颜色-HSL
Hue色相 Saturation饱和度 Lightness亮度 - alpha透明度（为1时不透明，调低逐渐透明）
rgba hsla - 字体
font-family设置多个字体 - 使用web fonts
- 字体大小font-size -style类型 -weight字重
- line-height行高
- 选择器的特异度
- 优先级高的会覆盖优先级低的
- 继承 某些属性会自动继承其父元素的计算值，除非显式指定一个值。
- 布局
- 相关技术-常规流，浮动，绝对定位
- 常规流-行级，块级，表格，flexbox，grid
- 盒模型
- 行级
和其他行级盒子一起放在一行或拆开成多行
盒模型中的weight，height不可用 - 块级
不和其他盒子并列摆放
