这是我参与「第四届青训营 」笔记创作活动的的第2天
当我们学完css的时候，意味着我们已经可以独立的完成对一些页面的重写，包括京东、淘宝等官方页面。当我们不考虑页中的交互等功能时，css已经足够我们用了。css中定义了许多的样式供我们对某个元素的布置，小到一个个文字，大到整个页面，而我们在学习css的过程中，也应该用心感受到css的独特魅力。
此篇大致讲解了什么是css以及如何运用css,同时还有许多具体的内容供各位参考，当然，更多内容，需要个人去自己寻找。
css是用来定义页面元素的样式
- 设置字体和颜色
- 设置动画和大小
- 添加动画效果
使用css
- 外链-通过link引入
<link rel="stylesheet" href="/assets/style.css"> 2. 嵌入-在style中写入
<style>
li { margin: 0; list-style: none; }
p { margin: 1em 0; }
</style>
- 内联-在标签内部直接使用
<p style="margin:1em 0">Example Content</p>
继承
css中某些属性会继承其父元素的计算值，除非显示指定一个值
初始值
css中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
可以使用inltial关键字显示重置为初始值
- background-color:inltial
布局
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
浮动 flot:left
绝对定位 position
弹性盒子 dispaly:flex
border
指定容器边框样式、粗细和颜色
-
三种属性
- border-width
- border-style
- border-coclor
-
四个方向
- border-top
- border-right
- birder-botton
- border-left
可以分别规定四条框的样式
选择器
-
找出页面中的元素，以便给他们设置样式
-
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
各类选择器
- （*） 通配选择器
- div 标签选择器
- #id id选择器
- .class 类选择器
- [disabled] 属性选择器
- A B 后代选择器
- A>B 父子选择器
- A~B 兄弟选择器
- A+B 相邻选择器
伪类选择器
-
不基于标签和属性定位元素
-
伪类的种类
- 状态伪类
- 结构性伪类
以超链接a为对象-结构伪类
- a:link 未点击时
- a:hover 鼠标放在上面时
- a:active 鼠标点击时
- a:visited 鼠标点击过之后
以列表li为对象-结构性伪类
- li:first-child 第一个li
- li:last-child 最后一个li
- li:nth-child(n) 第n个li
字体属性
-
line-height 行高(行高指的是单行文字占有的实际高度，可以通过line-height来设置行高)
-
font-size 设置字体框的高度，行高会在字体框的上下平均分配
-
text-align 字体的水平对齐
-
vertical-align 字体的垂直对齐
-
text-indent 首行缩进 单位为em,相当于文字来说
-
white-space 设置网页处理空白
- normal 正常
- noweape 不换行
- pre 保留文字空白
-
text-overflow:ellipsis 超出的部分会被显示为省略号
