文章目录
CSS:
Cascading Style Sheets层叠样式表
用来定义页面元素的样式（设置字体和颜色；设置位置和大小；添加动画效果）
组成
选择器Selector、属性Property、属性值Value（h1{color:white;}）
属性+属性值:一条声明Declaratuion；多条声明分号隔开
在页面中使用CSS
<!--外链-->
<link rel= "stylesheet" href= " / assets/style.css ">
<!--嵌入-->
<style>
li { margin:0;list-style: none;}
p { margin: lem 0 ;}
</ style>
<!--内联-->
<p style="margin:lem 0 ">Example Content</p>
内联不需要选择器，直接写在style里，不推荐，某些场景加UI组件等可以；
推荐使用外链；
现在组件开发Vue组件分离、关注点分离
css是如何工作的（css应用到页面）
（只有css）
加载HTML -> 解析HTML ( -> 加载CSS -> 解析CSS -> 添加样式到DOM节点 ) -> 创建DOM树 -> 展示页面
把每一个DOM节点都解析属性样式 -> 形成渲染树 -> 展示页面
选择器选择器 Selector
1.找出页面中的元素，以便给他们设置样式
2.使用多种方式选择元素：
按照标签名、类名或id；按照属性；按照 DOM树中的位置
入
通配选择器（*号匹配所有）
标签选择器（div,p,h1,…）
id选择器（#，id="";id唯一）
类选择器（.,class=""）
属性选择器（disabled…）
属性选择器
<label>用户名:</label>
<input value="zhao" disabled />
<label>密码:</label>
<input value="123456" type="password"/>
<style>
[disabled] {
background: #eee;color: #999;
}
</style>
[disabled]只要这个元素有disabled属性就可以选中
要选择特定的值：input[type=“password”]只会选input并且type="password"的
<p>
<label>密码:</label>
<input type="password" value="123456"/>
</p>
<style>
input[type="password"]{
border-color: red;color: red;
}
</style>
3.属性选择器属性满足条件时选择
<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
<style>
a[href^="#"] {
color: #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.png) no-repeat;
padding-left: 1.2em;
}
</style>
a[href^="#"]href匹配以#开头的
a[href$=".jpg"]href匹配以.jpg结尾的
伪类(pseudo-classes)
伪类：不基于标签和属性定位元素
几种伪类：状态伪类；结构性伪类
1.状态伪类：元素处于某种状态
如链接a:link默认状态；a:visited访问过；a:hover鼠标移上去；a:active鼠标按下
鼠标点输入框，聚焦到输入框:focus(outline:外边框)
a:link {
color: black;}
a:visited {
color: gray;}
a:hover {
color: orange;}
a:active {
color: red;}
:focus {
outline: 2px solid orange;}
2.结构性伪类
根据dom节点在dom树中出现的位置
li:first-child选中li中第一个孩子，设置颜色
li:last-child选中li中最后一个孩子，设置没有下边框
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>星球大战:原力觉醒</li>
<li>复仇者联盟3</li>
<li>侏罗纪世界</li>
</ol>
<style>
li{
list-style-position: inside;
border-bottom: 1px solid;
padding: 0.5em;
}
li:first-child {
color: coral}
li:last-child {
border-bottom: none;}
</style>
还有更复杂的如奇数偶数等
组合：
直接组合：条件都要满足；如input.error{}要求既要是输入框，又要是.error
<article>
<h1>拉森火山国家公园</h1>
<p>拉森火山国家公园是位于...</p>
<section>
<h2>气候</h2>
<p>因为拉森火山国家公园...</p>
<p>高于这个高度，气候非常寒冷...</p> </section>
</article>
<style>
article p {
color: black;}
article > p{
color: blue;}
h2 + p{
color: red;}
</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 ;
}
文字设置样式
颜色
1.RGB指定各种基本颜色的多少来确定，用两位16进制数表示
2.HSL色相、饱和度、亮度
Hue：色相(H)是色彩的基本属性,如红色、黄色等；取值范围是0-360。
Saturation：饱和度(S)是指色彩的鲜艳程度，越高约鲜艳；取值范围0-100%。
Lightness：亮度(L)指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。
HSL在某些场景下比较方便，如button设置按下后颜色可将L降低，其他不变
3.关键字
4.透明度alpha（不透明度）
为1时完全不透明，0为完全透明
加在后面rgba/hsla，数字表示是转为对应的16进制
字体font-family
浏览器按照字体顺序选本地有的字体；
英文字体风格写在前面，对英文起作用，英文用特定字体；
字体列表最后写上通用字体族：最后指定通用风格保证效果serif，sans-serif，Cursive，Fantasy，Monospace
<h1>卡尔斯巴德洞窟(Carlsbad Caverns)</h1>
<p>卡尔斯巴德洞窟(Carlsbad Caverns)是美国的一座国家公园，位于新墨西哥州东南部。游客可以通过天然入口徒步进入，也可以通过电梯直接到达230米的洞穴深处。</p>
<style>
h1 {
font-family: optima,Georgia,serif}
body {
font-family: Helvetica,sans-serif;}
</style>
通用字体族
衬线体：末尾有装饰；
无衬线体：线条均匀；
手写体；Fantasy；
等宽字体：代码编译器里的字体
使用Web Fonts
将字体当作资源放在服务器上，@font-face引用服务器上的字体
<h1>web fonts are awesome!</h1>
<style>
@font-face {
font-family: "Megrim";
src:
url(https://fonts.gstatic.com/ sxmegrim/v11/46kulbz5wjvLqJZVam_hVUdI1w.woff2)
format( 'woff2');
}
h1 {
font-family: Megrim,Cursive;}
</style>
中文字体文件比较大，使用一些裁切好的字体文件引入占空间小
font-size字体大小
三种方式：
关键字（small、medium、large）浏览器内置，多大定义好;
长度（px、em）;
百分数（相对于父元素字体大小）
<section>
<h2>A web font example</h2>
<p class="note">Notes: web fonts ...</p> <p>with this in mind,let's build...</p>
</section>
<style>
section {
font-size: 20px;}
section h1 {
font-size:2em;}
section .note {
font-size: 80%;
color: orange;}
</style>
h1的font-size为2em：相当于父元素二倍的大小：40px;
.note的font-size为80%:20x80%=16px
如实现按钮设置边距圆角等属性，使用em，改变时改变文字大小，相应的属性也变化
em:文字相当于父元素的大小；边距等相当于其文字大小
rem:相对于根元素（移动端适配）
1vh/1vw:屏幕高度的1%/屏幕宽度的1%
字体粗细斜体
正常/斜体：font-style:normal/italic
设置粗细font-weight:100/200/…/900(具体看字体支持，浏览器选择最近字体显示)比较安全用400（normal）/700（bold）
文字行间距line-height
表示每行基线base-line间的距离
h1 {
font-size: 30px;line-height: 45px;}
p {
font-size: 20px;line-height: 1.6;}
p元素使用没有单位的数表示line-height：20x1.6 = 16px
文字font
一个属性设置所有属性；顺序：斜体 粗细 大小/行高 字体族
h1 {
/*顺序：斜体 粗细 大小/行高 字体族 */
font: bold 14px/1.7 Helvetica, sans-serif ;}
p {
font: 14px serif;}
文字对齐方式text-align
text-align:left/center/right/justify(分散对齐；两端对齐)
justify只会对非最后一行的文字生效；只有一行文字也不会生效
间距spacing
letter-spacing:字符间距
word-spacing:单词间距
文字缩进text-indent
text-indent：默认0px;也可以为负
文本装饰text-decoration
text-decoration：none/underline(下划线)/line-through（删除线）/overline（上方的线）
空格换行white-space
normal / nowrap / pre / pre-wrap / pre-line
默认连续空格会合并成一个空格；
nowrap不换行，多个空格合并；
pre保留所有空格、换行（所有样式）；
pre-wrap一行显示不下时换行；
pre-line合并成空格，保留换行
调试
右键点击页面，选择「检查」
使用快捷键
-ctr1+Shift+I(windows)
-Cmd+Opt+I (Mac)
css动画
过渡transition：一个点到另一个点
animation连续变化
…
总结
提示：这里对文章进行总结：
例如：以上就是今天的笔记内容，本文仅仅简单介绍了css的理解上篇-了解CSS，介绍了css是什么，怎么运用css等，更多有关前端的介绍参考后续文章。
929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
