导图社区 css入门
一张思维导图带你学习css入门的知识点，包括css简述、css核心基础、css文本样式属性、css高级特性等方面。
社区模板帮助中心，点此进入>>
英语词性
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
法理
刑法总则
【华政插班生】文学常识-先秦
【华政插班生】文学常识-秦汉
文学常识：魏晋南北朝
【华政插班生】文学常识-隋唐五代
民法分论
CSS入门
CSS简述
CSS概述：
CSS 指层叠样式表 (Cascading Style Sheets)，通常单独存放在.css文件中，W3C（万维网联盟）推出的CSS标准旨在使HTML文档结构和样式分离。目前所有的主流浏览器均支持层叠样式表。
CSS发展历史
CSS1.0
1996年12月W3C推出了CSS规范的第一个版本
CSS2.0
1998年5月，CSS2正式推出 也是开始了样式结构表
CSS2.1
2004年2月推出
CSS3
1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。
CSS支持浏览器
参考 W3school 给的资料https://www.w3school.com.cn/cssref/css_browsersupport.asp
有一个更好的网站 名为 caniuse 可以查 html和css各种参数的支持的情况 你看到这个就是是收获了宝藏了
CSS核心基础
CSS样式规则
CSS样式规则语法样式是CSS的基本单位，每个样式规则都是由选择器和声明块两个基本部分组成的。. 声明块定义相应的样式，它包含在一对花括号内，有一条或多条声明组成，而每一条声明则由一个属性和一个值组成，中间用冒号隔开。.
引入CSS样式表
<!--CSS外部引入方法1-->
<!-- <link rel="stylesheet" type="text/css" href="CSS/01.css"> -->
<!--@impor 是导入的-->
<!--CSS内部引入方法1-->
直接加在标签内的 style （容易使人头痛）
<style></style> 放于头部
CSS文本样式属性
font-size
文体大小 单位为px，浏览器默认16px，设置字号12px
font-family
字体
font-weight
加粗 bolder（更粗）bold（加粗）normal（常规
font-style
italic（斜体）oblique（斜体）normal（常规）
text-allign
(文本水平对齐) justify{两端对齐} lint-height(行高)
letter-spacing
【中文】字间距
word-spacing
【英文】词间距
&emsp
一个字体
text-indent
首行缩进只对第一行有作用 可以取负值
有个参数是 2em 是会对应字体的空出来两个字符
text-decoration
文本修饰 none 没有 underline 下划线 overline上划线 line-through删除线
text-transform
大小写 capitalize 首字母大写 lowercase 转小写 uppercase 转大写
text-shadow
阴影 shadow 第一个10px 水平方向位移 第二个10px 垂直方向位移 第三个1px 模糊程度 数字越大模糊越大
overflow
/* overflow:visible;显示溢出 */ /* overflow: hidden; 溢出隐藏，文本裁切； */ /* overflow: scroll; 会一直出现滚动条 */ /* overflow: auto; 会识别出现滚动条 */ /* overflow: inherit;继承父元素的效果 */ /* overflow-y: auto; 规定那个轴有没有滚动条 */
CSS高级特性
层叠性
相同选择器给设置相同的样式，此时一个样式就会 覆盖（层叠） 另一个冲突的样式。层叠性主要解决样式冲突 的问题
层叠性原则：
样式冲突，遵循的原则是 就近原则 ，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠
后来居上 原则
继承性
子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
恰当地使用继承可以简化代码，降低 CSS 样式的复杂性
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
行高继承性
如果子元素没有设置行高，则会继承父元素的行高为 1.5
行高可以跟单位也可以不跟单位
此时子元素的行高是：当前子元素的文字大小 * 1.5
body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
优先级
当同一个元素指定多个选择器，就会有优先级的产生。
选择器相同，则执行层叠性
选择器不同，则根据 选择器权重 执行
优先级注意点:
多用选择器 看懂选择器
CaiDL0816
一手操办，志同道合可加微信
21大数据一班
蔡东霖
