1、选择器
（1）定义：
和HTML类似，CSS也不是严格意义上的编程语言，它是一种样式表语言，也就是说，它允许有选择性地为 HTML 文档的元素添加样式。
image.png
（2）引入方式：
外链：<link rel="stylesheet" href="/path/to/style.css">
嵌入：
<style type="text/css">
li { margin: 0; list-style: none; }
p { margin: 1em 0; }
</style>
内联：<p style="margin:1em 0">Example Content</p>
（3）选择器种类：
*{...}通配选择器；p{...}标签选择器；#id{...}id选择器； .class{...}类选择器； 属性选择器；伪类选择器（基于DOM之外的信息去（比如根据用户和网页的交互）选择元素）；直接组合EF；后代E F；亲子E>F等
<!-- HTML -->
<p>
<label>用户名：</label>
<input name="username" value="tw" disabled>
</p>
<p>
<label>密码：</label>
<input type="password" required>
</p>
<!-- CSS 属性选择器 -->
<style>
/* 选中所有的禁用的输入框 */
input[disabled] {
background: #ddd;
color: #999;
cursor: not-allowed;
}
/* 选中所有输入框类型为"密码"的元素 */
input[type="password"] {
border-color: red;
color: red;
}
</style>
a:link { ... } /* 未访问过的链接 */
a:visited { ... } /* 已访问过的链接 */
a:hover { ... } /* 鼠标移到链接上的样式 */
a:active { ... } /* 鼠标在连接上按下时的样式 */
a:focus { ... } /* 获得焦点时的样式 */
<!-- 伪类的代码示例 -->
<!-- HTML -->
<nav>
<ul>
<li><a href="http://w3.org">W3C</a>
<li><a href="http://example.com">example.com</a>
<li><a href="http://www.360.com">360</a>
</ul>
</nav>
<label>搜索：<input name="q" type="search"></label>
<!-- CSS 伪类选择器 -->
<style>
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
color: orange;
}
a:active {
color: red;
}
:focus {
outline: 2px solid red;
}
</style>
2、字体
font-family；font-size；font-style；font-weight；line-height；letter-spacing；text-indent；text-decoration；white-space；word-break
3、层叠与继承
（1）简单选择器的特异度级别：（级别越高，优先级越高）
Level 0：*
Level 1：标签选择器、伪元素
Level 2：类、伪类、伪元素
Level 3：id
Level 4：内联
（2）样式的覆盖规则：
根据引入方式确定优先级：优先级由高到低依次为：“内联属性”——>“嵌入”——>“外链”
在同一级别后写的属性覆盖先写的：即就是在文件上代码行号更高的优先级更高
加有“！important”的样式，优先级最高：即无论哪一种情况，只要在样式上加了important,那么该样式的优先级最高。
（3）CSS样式的来源主要以下三方面：
页面开发者：即开发者写入程序中的CSS代码
用户设置：浏览器可以指定一个本地CSS文件，打开所有页面时自动加载
浏览器预设：每一个浏览器内部都有标签的默认样式
（4）那么具体是哪条声明起作用呢？规则如下：
找出匹配到的该属性所有声明
根据规则来源，优先级从低到高：
浏览器预设
用户设置
页面开发者
含 !important 的网页样式
含 !important 的用户设置样式
同一来源中，按照特异度排序，越特殊优先级越高
特异度一样时，按照样式书写顺序，后面的优先级高
初始值，在CSS中，每个属性都有一个初试值，background-color 的初始值为 transparent，margin-left 的初始值为 0，当然我们也可以将改变过后的值显式的重置为初识值，比如：background-color: initial
（5）对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式
4、盒模型
（1）定义：
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
image.png
- 盒模型允许在其它元素和周围元素边框之间的空间放置元素，针对不同的四边分别的说明如下：
Margin（外边距）- 清除边框外的区域，外边距是透明的
Border（边框）- 围绕在内边距和内容外的边框
Padding（内边距）- 清除内容周围的区域，内边距是透明的
Content（内容）- 盒子的内容，可用来显示文本和各类型多媒体文件 -
盒模型中的 width：
指定content box的宽度
百分数相对于父容器（包含块）的content box宽度 -
盒模型中的height：
指定content box高度
百分数相对于父容器（包含块）的content box
高度只有当包含块的高度不依赖该元素时，百分比高度才生效 -
盒模型中的padding：
指内边距
padding-top, padding-right, padding-bottom, padding-left
缩写：padding: top值, right值, bottom值, left值;（上-右-下-左） -
盒模型中的margin：
指外边距
margin-top, margin-right, margin-bottom, margin-left
缩写：margin: top值, right值, bottom值, left值;（上-右-下-左） -
box-sizing：
定义改变盒模型的计算方式
取值：border-box | content-box
border-box：设置的宽度或高度包含了元素的border、padding、content的宽度或高度
content-box：设置的宽度或高度指content的宽度或高度
初始值：content-box -
边框的三个要素：
border-width：<length> | thin | medium | thick
border-style: none | solid | dashed | dotted | double
border-color: <color>
四个方向：
border-left
border-top
border-right
border-bottom -
overflow：
指的是溢出控制
取值：visible | hidden | scroll | auto
初始值：visible -
visibility：
该属性的目的是控制元素展示情况
取值：visible | hidden | collapse
初始值：visible
eg.
<style>
div {
background-color: red;
width: 300px;
height: 500px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
5、定位和布局
（1）定位
- static 定位：HTML元素的默认值，即没有定位，元素出现在正常的流中。
- fixed 定位：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
- relative 定位：相对定位元素的定位是相对其正常位置。
- absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
- sticky 定位：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
eg.
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
（2）布局
-
定位模式
- 常规流
除根元素、浮动元素和绝对定位元素外，其它元素都在常规流之内(in-flow)
而根元素、 浮动和绝对定位的元素会脱离常规流(out of flow)
常规流中的盒子，属于块级格式化上下文或行级格式化上下文 - 浮动
- 绝对定位
- 常规流
-
浮动 - Float
浮动元素从常规流中脱离，被漂浮在容器(包含块)左边或右边
浮动盒会一直漂到其外边缘挨到容器边缘或另外的浮动盒
浮动元素不会影响其后面的流内块级盒
但是浮动元素后面的行级盒子会变短以避开浮动元素 -
清除浮动 - Clear
指定元素哪一边不能与之前的浮动框相邻
取值：left | right | both -
display属性：inline; inline-block; block
-
常用居中方法
- 水平居中
- 垂直居中
-
单列布局
-
二列&三列布局
- float+margin
- position+margin
- 圣杯布局（float+负margin）
- 双飞翼布局（float+负margin）
eg.
.sub{
width: 100px;
float: left;
}
.extra{
width: 200px;
float: right;
}
.main{
margin-left: 100px;
margin-right: 200px;
}
说明：注意书写顺序，先写侧边栏，再写主面板
6、CSS调试
（1）使用浏览器内置的页面开发者工具，如：Chrome的DevTools ，Firefox的page inspector tool
（2）CSS验证： HTML验证器（http://jigsaw.w3.org/css-validator/）、CSS验证器（http://jigsaw.w3.org/css-validator/），可以在特定的URL上验证CSS，或者通过上传本地文件，或者直接使用CSS属性进行输入验证。
7、总结
这周学习了CSS的基础知识，学会了用CSS来控制HTML的样式，在线下培训时练习了网页的编写，现在已经能够用这两周学习的知识来编写网页啦。在学习的过程中，我的沟通交流和解决问题的能力也得到了提高。虽然目前在学习进度和对学习内容的掌握程度上能够符合训练营的任务安排，但是还是不够熟练。在接下来的学习中要注意复习前面所学的知识，遇到问题及时和老师同学沟通，坚持每日总结知识点，希望下周自己能够做得更好！加油啦！
网友评论