前端三层:
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) 后代选择器:通过标签之间的后代关系去选择决定某个范围内的元素



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…
盒子必须有高度。否则看不到内容的样式。高度可以有多个配置内容,比如超出部分
如果盒子没有设置高度,则被内容撑高。设置了高度,不会被隐藏,会自动超出盒子内容

网友评论