CSS – 层叠样式表（Cascading style sheets）
- 用于美化html页面
引入方式
外部样式
在head标签中导入css文件：
<!--rel说明文件类型，href指文件路径-->
<link rel="stylesheet" href="style.css">
内部样式
在html文件中的head标签中添加：
<style>
选择器{
属性名:属性值;
}
</style>
行内样式
直接在html标签的style属性中写：
<标签名 style="属性名：属性值;">
基础选择器
用于找到待修饰的标签或元素
元素选择器
元素的名称{
属性名：属性值;
}
div{
height:100px;
}
ID选择器
以#开头
#id的名称{
属性名：属性值;
}
.id1{
height:100px;
}
类选择器
以.开头
.id的名称{
属性名：属性值;
}
.class1{
height:100px;
}
优先级
- 行内样式>ID选择器>类选择器>元素选择器
- 就近原则
浮动
- float属性：脱离正常的文档流，在正常的文档流中不占空间。
–想象飞机飞行不受地面路线影响
left / right实现流式布局：当宽度不够时自动换行。
- clear属性：清楚浮动
both 两边都不允许浮动
left / right
<body>
<div style="float:right;height: 200px;width:200px; background:red;"></div>
<!-- 对后续清除浮动效果 -->
<div style="clear:right;"></div>
<div style="height: 200px;width:200px;width:200px; background:green;"></div>
<div style="height: 200px;width:200px; background:blue;"></div>
</body>
得到效果：
不清除浮动：
行高
- inline-height 即文字区域的高度。
如上图，文字在文字区域内垂直居中，但在text元素（图中左黑块表示）中并不居中。
通过增大文字区域的高度（两横线之间的距离），使得其高度和text元素相同，从而达到居中的效果。
拓展：其他选择器
选择器分组:
选择器1，选择器2，……{
属性名：属性值;
}
h1,h2,h3,h4,#id1,.class1{
color:red;
}
属性选择器
元素名[属性名|属性名=属性值]{
属性名：属性值;
}
/*包含href和id属性的a元素*/
a[href][id]{
color:red;
}
/*href属性为"aaa"的a元素*/
a[href="aaa"]{
color:red;
}
后代选择器
/*祖先选择器里的的后代选择器*/
祖先选择器 后代选择器{
属性名：属性值;
}
<!--a元素下面所有class值为"class1"的元素-->
div .class1{
color:red;
}
子元素选择器
/*父选择器里的的子选择器*/
父选择器 > 儿子选择器{
属性名：属性值;
}
<!--直属最近关系-->
div > .class1{
color:red;
}
伪类选择器
/*基本只用在a标签上*/
a:link{color:red}; /*未访问的链接*/
a:visited{color:yellow} /*已访问的链接*/
a:hover{color:green} /*鼠标移到链接上*/
a:active{color:blue} /*选定的鼠标*/
表单选择器
/*表单里的元素*/
：表单元素选择器{
属性名：属性值;
}
：input{
height:40px;
}
盒子模型
万物皆盒子！
- 四层(有内至外)：
| 层次 | 说明 | 比拟 |
|---|---|---|
| content | 内容 | 手机本身 |
| padding | 内边距（内容外边界和盒子内边界的距离 ） | 保护手机的填充泡沫 |
| border | 边框（盒子边界的宽度，即盒子内边界和外边界之间的距离） | 装手机的盒子厚度 |
| margin | 外边距（和其他盒子的距离） | 手机盒子和其他物体的距离 |
补充
padding：上 右 下 左 （<4时，上下，左右）
绝对定位
相当于父元素。
div{
position:absolute;
top:100px;
left:100px;
}
心得：我习惯于系统化的学习，之前只是为了实现效果去临时抓css实现代码，容易出bug，很没耐心。通过这番整理后，把之前写的小程序界面重新改改，感觉顺利很多。
扫一扫
1377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
