基本语法：
- 内联式：也叫内行式,在html标签上 style内直接书写。没有脱离html，只能给一个标签使用。
<p style="font-size: 20px;">内联式</p>
- 内嵌式：在head标签内有一个style标签，属性和选择器放在其中。实现了结构样式分离，但没有完全分离，节省了代码量，头重脚轻，不利于阅读。
<head>
<style>选择器和属性</style>
</head>
- 外联式：head内部用link标签引入,完全实现了html和css完全分离，可以公用减少代码量，一个css文件可以多次引用。
rel：表示引入css。href：文件路径。type："text/css" 按纯文本形式的css代码加载，h5中可以省略type。
<head>
<link rel="stylesheet" href="./css/css基础语法.css">
</head>
- 导入式：在内嵌式style内部，或外联式样式表内部，导入其它css文件。利用@import url(路径) 进行引入。
和外联式基本相同，导入式先加载html代码。
选择器：
- 由一条和多条声明构成。
内嵌式为例：所有css代码都必须写在head标签内部的style内。css给标签设置样式前 ，必须使用选择器选中标签。
选择器：{属性名：属性值} 的键值对写法。每条属性用分号隔开。
p {
font-size: 20px;
}
格式：
- 展开格式，可读性强，便于调试。
- 紧凑格式，便于上传，减少体积。
- css中英文可以用大写也可以用小写，一般用小写。
文字的三属性：
- 颜色：color：颜色名/颜色值。
- 字体：font-family:"字体名称"。如果不设置，不同浏览器有自己默认的字体。
可以设置多个属性值，用逗号隔开。按顺序查找。找不到则查找下一个。
字体的设置必须是电脑支持的。中文字体一般可以设置英文。
- 字号：font-size。可以使用相对长度单位和绝对长度单位。
如果不设置，不同浏览器有自己默认的加载字号。
不同浏览器也有自己最小加载显示的字号，如果设置低于最小字号，都以最小字号加载。
网页中最小的设置字号必须是12px，小于12px会出现兼容问题。现在普遍使用14px+ ，尽量使用偶数字号。
#p {
/* 文字的三属性：颜色，字体，字号*/
color: blueviolet;
font-family: '宋体','正楷';
font-size: 20px;
}
盒子实体化的三属性：
- width:宽度。单位可以是绝对单位和相对单位。一般使用px。
- height:高度。
- background-color:背景颜色。属性值可以是颜色名，rgb值，十六进制数。
css选择器：类上样式，id上行为。
- 基础选择器：
1.标签选择器：通过标签名选择,选中所有的同名标签。设置所有同名标签的公共样式。
2.id选择器（#）：通过id选择标签，只能选中一个标签。id名必须以字母开头。id不能重名。
3.类选择器（.）：通过class选择标签。类名必须以字母开头。可以给同一个标签添加多个calss属性值，用空开。公共样式可以用原子类。
4.通配符选择器(*)：可以实现全选，简化书写 。通配符选择效率低，会导致浏览器做一些无用工作。
- 高级选择器：
5.后代选择器：通过标签之间嵌套去选择元素，也叫包含选择器。通过空格 进行后代选择。后代关系不仅仅只能子关系。
6.交集选择器：交集选择器连续书写。如果有标签选择器则标签选择器开头。
7.并集选择器：不同选择器选中的元素都要设置相同的样式，并集选择器可以进行简化，将多个选择器中间用逗号分隔，最后一个不用加逗号。可以替代通配符选择器，提高效率。
/* 选择器 */
/* 通配符选择器 */
* {
}
/* 标签选择器 */
p {
}
/* id选择器 */
#p {
}
/* 类选择器 */
.div {
}
/* 后代选择器 */
ul li {
}
/* 交集选择器 */
li#li{
}
/* 并集选择器 */
#td1,#td2 {
}
继承性：
- 一个标签可以从祖先级继承样式。能继承的是所有文字相关样式属性，其它属性不能被继承。可以将重复的文字样式赋值给比较大的祖先级，精简代码。
成叠性：
- 同一个标签被多个选择器选中，最终只会有一个属性加载成功，会成叠掉其他属性。
- 选中目标，比较权重。
1.基础选择器：选择器范围越大 权重越小。*<标签选择器<类选择器<id选择器。
2.高级选择器：依次比较组成高级选择器的id个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，前面相等就往后比较。
3.权重相同，则按css的加载顺序，后写的会成叠掉先写的。
- 选中目标的祖先级。
1.就近原则，文字样式可以继承。
2.距离相同的祖先级，则继续判断权重。
- !important 会将css样式的权重提升至最大，就近原则中不需要比较权重 !important就会失效，!important不能提升选择器的权重。行内式：行内式权重最高，仅仅低于!important。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或 联络我们.。
- 找不到素材资源介绍文章里的示例图片？
- 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。
- 模板不会安装或需要功能定制以及二次开发？
- 请QQ联系我们
发表评论
还没有评论，快来抢沙发吧！