前端三层：
Html结构层，从语义角度去搭建网页结构。Css样式层，从美观角度去修饰页面样式。Javascript行为层，从交互的角度去描述页面的行为。
Css的属性值写法：k：v（html中，写法为k=“v”） 中间分号隔开
文字三属性：color，font-size，font-family
- 颜色属性color
单词表示法style="color:blue" 还有十六进制法，RGB法
- 字号font-size
通常是以px为单位的值
- 字体 font-famil
属性值必须以双引号包裹，属性值可以有多个，使用逗号隔开，浏览器不识别前面的字体会自动向后识别，中英文分开进行加载
盒子三属性：width，height，background-color 常用属性值通常以px为单位
Css样式表
- 行内式：style后面中引入css样式
<div style="width: 100px;height: 100px;background-color: blue"> </div>
- 内嵌式：在head标签内部，title下面，在style标签中
<style>
div{
color: blue;
}
</style>
- 外链式：在外部写好css文件，在html文件内head内，title下方
<link rel="stylesheet" href="css/1.css">
Link标签引入外部文件，通过href属性，属性值式地址
Rel属性值若为stylesheet，代表的式引入样式表
通过引入css到html文件中，从而实现样式的加载。
Css文件的内部不需要写任何标签，直接属性css选择器和代码，因为css文件内部是不允许属性html骨架的
- 导入式：head内，title下，必须写在style的最顶部
<style>
@import url(css/1.css);
</style>
选择器
1． 基础选择器：标签选择器，id选择器，类名选择器
1） 标签选择器：通过标签来选择
选择范围：HTML中所有的同名标签
标签选择器无视嵌套规则，实现全选同名标签，设置公共样式
2） Id选择器：通过id属性进行选择，#id属性值（自定义）
选择范围：只能选中一个标签
p1{
color: blue;
}
<p id="p1">
段落标签
</p>
具有唯一性，一个页面内不允许有同名id，单选
3） 类名属性：通过标签上的class属性进行选择
匹配对应的class属性值
选择范围：选择所有同名class
.par{
color: blue;
}
<p class="par">
段落标签
</p>
一个标签的class属性值可以有一个或多个
Id和class的命名规范：第一个字符必须是字母，后面可以是数字字母下划线
4） 通配符选择器：选择包含html标签在内的所有标签
通配符*后面添加的样式，每个标签都会加载一次，我们通常使用清除页面的样式
*{
color: blue;
}
类比数据库，若无其他说明则全选
2． 高级选择器：后代选择器，交集选择器，并集选择器
1） 后代选择器：通过标签之间的后代关系去选择决定某个范围内的元素
image.png
image.png
image.png
Css的继承性和层叠性
- 继承性
Css可以继承的属性都是关于文字的，比如color，font-size，font-family
选择器权重：id>class>标签
Css文字属性
- 颜色
属性值：颜色名、颜色值
-
字体
-
字号 px为单位 表示显示多少像素；百分比为单位参考的是继承字号的百分比；em为单位表示继承字号的几倍
-
行高 line-height
-
字体加粗 font-weight
-
字体样式 font-style
文本属性
-
缩进 text-indent
-
对齐 text-align
-
修饰：text-decoration none overline line-through underline
盒模型的五个属性：width height padding内边距 border边框 margin外边距
清空默认样式margin：0；padding：0；list-style：none etc…
盒子必须有高度。否则看不到内容的样式。高度可以有多个配置内容，比如超出部分
如果盒子没有设置高度，则被内容撑高。设置了高度，不会被隐藏，会自动超出盒子内容
image.png
网友评论