这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
CSS是什么？
- Cascading Style Sheets
- 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
在页面中使用CSS
- 外链（推荐）
<!--外链-->
<link rel="stylesheet"href="/assets/style.css">
- 嵌入（组件式开发常用）
<!--嵌入-->
<style>
li margin:0;list-style:none;
p margin:lem 0;}
</style>
- 内联
<!--内联-->
<p style="margin:1em 0">Example Content</p>
CSS是如何工作的？
选择器
-
找出页面中的元素，以便给他们设置样式
-
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
通配选择器：对页面中所有元素生效
* {
margin: 0;
padding: 0;
}
标签选择器
h1 {
color: red;
}
id选择器(id是唯一的）
#logo {
font-size:60px;
font-wight: 200;
}
类选择器（class可重复使用，所以是常用的办法）
.done {
color: gray;
}
属性选择器，根据元素的属性来设置样式
<input value="zhao" disabled>
<input type="password" value="123456">
<style>
[disabled] {
background: #eee;
color: #999;
}
input[type="password"] {
border-color: red;
color: red;
}
</style>
通过匹配的方式来选择属性值.
- ^=表示以某某开头
- $=表示以某某结尾
<p><a href:="#top">回到顶部</a></p>
<p><a href:="a.jpg">查看图片</a></p>
<style>
a[href^="#"] {
co1or:#f54767;
background:0 center/1em url(https://assets.codepen.io/59477/arrow- up.png)no-repeat;
padding-left:1.1em;
}
a[href$=".jpg"] {
color:deepskyblue;
background:0 center/1em url(https://assets.codepen.io/59477/image3.p ng）no-repeat;
padding-left:1.2em;
}
伪类
- 不基于标签的属性定位元素
- 几种伪类
- 状态伪类
- 结构性伪类
状态伪类
a链接的伪类和状态
- link 默认状态
- visited 访问后的状态
- hover 鼠标悬浮状态
- acive 鼠标按下去的状态
input输入框的状态
- focus 聚焦状态
a:link {
color:black;
}
a:visited {
color:gray;
}
a:hover {
color:orange;
}
a:active {
color:red;
}
:focus {
outline:2px solid orange;
}
结构性伪类
根据元素在dom树中的位置来选择
- first-child 第一个子标签
- last-child 最后一个子标签
<ol>
<Li>阿凡达</1i>
<Li>泰坦尼克号</1i>
<1i>星球大战：原力觉醒</Li>
<1i>复仇者联盟3</Li>
<11>侏罗纪世界</11>
</o1>
<style>
1i {
list-style-position:inside;
border-bottom:1px solid;
padding:0.5em;
}
li:first-child {
color:coral
}
li:last-child {
border-bottom: none;
}
<style>
组合
选择器组
当某些选择器的样式完全相同时，可以写成选择器组
body,h1,h2,h3,h4,h5,h6,ul,ol,li {
margin:0;
padding:0;
}
[type="checkbox"],[type="radio"] {
box-sizing:border-box;
padding:0;
}
颜色
- RGB 红绿黄
- HSL H：色相 ， S：饱和度 ， L：亮度
- alpha 不透明度 0-100%
字体
通用字体族
- Serif衬线体： Georgia、宋体
- Sans-Serif无衬线体： Arial、Helvetica、黑体、微软雅黑
- Cursive手写体： Caflisch Script、楷体
- Fantasy： Comic Sans MS,Papyrus,
- Monospace 等宽字体： Consolas、Courie、中文字体
font-family使用建议
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前
使用Web Fonts
文字样式
font-size 字体大小
- 关键字
- small、medium、large
- 长度
- px、em
- 百分数
- 相对父元素字体大小
Italic 斜体
font-weight 字重（100-900）
line-height 行高（基准线之间的距离）
text-align对齐方式
spacing 字距与词距
text-indent 首行缩进
text-decoration 文字修饰
white-space 对空格和换行的处理
- normal 有空格和换行，但是多的空格和换行会合并
- nowrap 强制不换行
- pre 保留原有的空格和换行
- pre-wrap 保留原有空格，换行会合并
- pre-line 保留原有换行，但是空格会合并
调试CSS
- 右键点击页面，选择“检查”
- 使用快捷键
- Ctrl+Shift+I（Windows）
- Cmd+Opt+I（Mac）
