css必备基础知识
1.css样式引入
Paste_Image.png
- 行间样式，各个样式之间用
;隔开
2.css选择器
基于关系的选择器
Paste_Image.png
例子
Paste_Image.png
- .father #children :代表第二个 li
- .father li:first-child:代表第一个li
-
#children + li:代表第三个li -
#children ~ li:同时代表第三个第四个元素 - .father > li：选中第一个第二个第三个第四个li
- .father li:选中第一个第二个第三个第四个以及孩子的孩子li
3.伪类选择器
- 首先针对的是那些存在（或者是被定义过的）元素和标签才会有自己的伪类
- 是指某一个元素在某一种状态下才具有的样式
.titleSection:hover{display:none;}：这就是说类名是titleSection的元素鼠标悬浮在它上面的时候就会消失
- 动态伪类:
- 1.
:link:当鼠标点击之前的状态 - 2.
:visited:当鼠标点击之后的状态 - 3.
:hover当鼠标悬浮在元素上的状态 - 4.
:active当鼠标点击的那一瞬间的状态，做间抬起来就没有了 - 5.
:focus主要用于input聚焦时的状态 - 6.其中必须按照LoVe/HAte从前往后设置
- UI元素状态伪类
- 1.
:enable:input可以填写时候的状态 - 2.
:disable:input不可以填写时候的状态（前两个针对type=‘text’） - 3.
:checked:针对type是checkbox而且被选中的状态（还有:unchecked）
伪元素
- 是指不存的元素，而我们可以通过一种方式找到他们
::before：是指某个元素之前的那部分::after:是指某个元素之后的那部分::firest-letter：一段文字中的第一个字母::first-line: 一段文字中的第一行::section:被选中的部分
点击了解更多关于伪类伪元素信息
不使用<table>布局原因
- 1.当页面很大的时候，加载起来比较慢：如果使用
<table>会导致table定义的这部分页面在整个table加载完全之前不会出现，就会导致一片空白，但是使用<div>加载页面就不会出现这问题- 2.嵌套太深，即使是你加一个元素也至少得经过
<table><tr><td><你加的元素>- 3.灵活性差，当你给某一列添加一个宽度，所有列都会成为统一宽度
作业练习
一下就是我遇到的一些小问题，在此进行总结
1.padding的使用
- 当你给某一个元素设置了padding，首先，这个元素会压缩其内部子元素为了达到你要求的padding
- 如果子元素不能够在被压缩，他就会通过扩充自己的方式达到你要求的padding值
2.css的书写过程
- 1.先观察整个页面有没有可以复用的样式，如果有给这些标签添加相同的class
- 2.从最大的元素body开始添加样式
- 3.先不注重细节，第一步只是勾勒好每一部分的框架
- 4.大体框架形成，从上向下改样式
3.元素居中的方式
- 1.可以直接给body添加属性text-align:center
这样就可以保证页面中的所有文字都可以居中，但是，当他们的宽度没有定下来的时候，所有元素只有字体居中，但是元素是平铺整个页面的<li>元素非常奇特，他们的标签号是一定是在整个元素的最左边
Paste_Image.png
4.font属性相关
- 1.font-weight:设置字体粗细
2.font-family:设置字体类型,可以设置多个字体类型，当页面不支持第一个的时候我们可以使用第二个，依次向下
Paste_Image.png- 3.font-size：字体大小，通常使用rem/em/px作单位rem/em是动态单位，px固定单位
- 1rem:相当于根
html元素设定的字体大小 - 1em:相当于当前元素的父元素的字体大小
5.可继承和不可继承元素
- 1.
<line-height>是不可继承元素，也就是说他的父元素设定了这个属性，但是它本身不受这个字高影响2.大部分属性都是不可继承的
属性
6.颜色的处理
- 1.需要颜色的时候你可以使用mac自带取色器直接取色获取rgb，在需要颜色的地方使用rgb(xx,xx,xx)
Paste_Image.png
7.<p>和<div>
- 1.前者有使用环境，通常抱住一段文字，一般其中子元素撑不开
<p>，所以想要作为容器的标签一定是<div>
8.line-height和vertical-align:text-bottom;配合使用
作用效果：line-height不能继承当你给
<lable>设置了一个行高比他旁边的input小，此时你应该希望你的label在input垂直居中的地方，你就需要使用上面的搭配
没有line-height的vertical-align（垂直位置）并没有什么卵用
9.块级行内元素互转
- 1.块转行:
display:inline- 2.行转块:
display:block 或者 inline-block
10.使用font-awesome添加小图标
- 1.在官网下载font-awesone包
- 2.从包中复制
fonts和css文件夹然后添加到你项目根目录- 3.使用
<link>标签<link rel="stylesheet" href="./css/font-awesome.min.css">- 4.此时你就可以使用任意的font-awesome标签，通常所有的
font-awesome都是用<i><span>包裹起来，因此<i class="fa 标签类名字"></i>来添加font-awesome图标
