font字体相关样式
font-size 设置字体大小
<style>
p {
font-size: 18px;
}
</style>
注意点：一定要带单位，而单位是px
font-family 设置字体
<style>
p {
font-family: '微软雅黑'，'黑体';
}
</style>
注意：值可以跟多个，如果是中文或者是有特殊符号的需要被引号包裹起来，而浏览器选择的顺序是从左至右依次寻找，如果找到了，那么浏览器就用改字体，如果一直没有找到就会用默认的字体
font-weight 设置粗细
<style>
p {
font-weight: param;
}
</style>
param（值）：
- 设置 100 - 900 之间的数值，400代表是默认，700代表是加粗；必须设置的100-900的整数值 例如不能写 101；不能带单位
- bold 加粗|normal 默认
font-style 设置倾斜
<style>
p {
font-style: italic|normal;
}
</style>
italic：设置倾斜
normal：默认的
font 简写方式
<style>
p {
font：是否倾斜 是否加粗 文字大小 字体;
}
</style>
注意：
- 前两个可以省略，后两个必须要写的
- 一定要严格按照这个顺序去写
文本装饰相关的样式
color 文字颜色
<style>
p {
color: 设置方式;
}
</style>
设置方式：
- 英文单词，例如 red yellow green
- 16进制 一定要注意 以 # 号开头
- rgb(255,255,255);
- rgba(255,255,255, 0~1); 最后的a代表是透明度的意思，0~1的取值 0代表是完全透明，1代表是完全不透明
text-align 设置内容对齐方式
<style>
p {
text-align: left|center|right
}
</style>
left：左对齐
center：居中显示
right：右对齐
text-dicoration 设置文本装饰
<style>
p {
text-dicoration: none|underline;
}
</style>
none：去除下划线；我们一般用于去除a标签默认的下划线
underline：设置下划线
text-indent 设置首行缩进
<style>
p {
text-indent: 2em;
}
</style>
1em就等于一个汉字的距离
line-height 设置行高
<style>
p {
line-height: 17px;
}
</style>
复合选择器
后代选择器
<style>
h1 p {
color: red;
}
</style>
注意：多个选择器之间用空格隔开
特点：选择从所有的子孙后代，会把h1标签里面包含的所有的p标签
并集选择器
<style>
h1，
p {
color: red;
}
</style>
注意：多个选择器中间用逗号隔开
特点：集体声明，用于有相同样式的多个元素，减少冗余代码；只要是h1标签和p标签内容都是红色
链接伪类选择器
<style>
a:link{
}
a:visited{
}
a:hover{
}
a:active{
}
</style>
a:link -- 为访问链接时 触发的样式 ★
a:visited -- 链接访问过后触发的样式 ★
a:hover -- 鼠标移入到链接身上时，触发的样式 ★★★
a:active -- 鼠标长按在链接上时，触发的样式 ★
注意：
- 一般我们只会用 hover
- 如果全写，一定要注意 顺序 lvha
- a标签在浏览器中是有默认的样式的，如果我们向修改a的一些样式，需要通过选择器把a标签选择出来，然后修改
子元素选择器 子代选择器 ★★
<style>
h1>p {
color: red;
}
</style>
注意：选择器中间用 > 号连接
特点：只能选择出 亲儿子； 选出 h1标签里面 下一级是p标签的，颜色变为红色
交集选择器 ★
<style>
h1.p {
color: red;
}
</style>
注意：选择器之间没有任何的符号
特点： 并且的意思，选择出来的元素，必须是h1标签，并且类名叫做 p的
显示模式
为什么有显示模式？
因为html里面有很多的标签，而且每一个标签都会有不同的一些效果，所以对这些标签进行了一个分类
块级元素 --- block
- 独自占一行
- 默认的宽度是父容器的宽度
- 可以去设置宽高
- 可以包含任何内容或者元素
- 文字类型的块级元素(p、h标签、dt) 不能去包含块级元素
- 常见的块级元素有哪些
- div、p、h类标签、ul、li、ol
行内元素 --- inline
- 一行显示多个
- 默认的宽高是内容的宽高
- 无法设置宽高
- 里面可以包含行内元素和文本内容
- 常见的行内元素有哪些
- span、a标签、文本格式化标签
行内块元素 ---inline-block
- 一行显示多个
- 默认的宽高是内容的宽高
- 可以设置宽高
- 常见的行内块元素
- img图片标签、input表单
display --- 设置元素的显示模式
元素是可以相互去转换显示模式的，就是通过了 display
设置成块级元素
display: block;
设置成行内元素
display: inline;
设置成行内块元素
display: inline-block;
设置成隐藏元素
display: none;
怎么让单行文本垂直居中
只需要设置 行高等于高度就行了
<style>
p{
height:30px;
line-height: 30px;
}
</style>
关系
- 行高大于高度的话，那么文本偏下
- 行高小于高度的话，那么文本偏上
背景相关的属性
背景颜色 background-color
<style>
p{
background-color:values;
}
</style>
values
- 写英文单词 red
- 写16进制 以#号开头
- rgb(255,255,255);
背景图片 background-image
<style>
p{
background-image: url(图片的地址);
}
</style>
内容是压在背景上面
背景平铺 background-repeat
<style>
p{
background-repeat: values;
}
</style>
values:
- no-repeat 不平铺
- repeat 平铺
- repeat-x 水平方向平铺
- repeat-y 垂直方向平铺
背景定位 background-position
<style>
p{
background-position: values;
}
</style>
values:
- 写方位名词
- 水平方向：left 左对齐 center 居中 right 右对齐
- 垂直方向：top 顶对齐 center 居中 bottom 底部对齐
- 注意：是没有顺序的，如果我们只写一个方位名词，另外一个就是默认居中
- 精准单位
- 第一个值 是X轴的偏移量 水平方向
- 第二个值 是Y轴的偏移量 垂直方向
背景附着(固定) backgroud-attachment
<style>
p{
background-attachment:scroll|fixed;
}
</style>
scroll 背景图片会跟着我们的滚动条来进行滚动
fixed 背景图片不会跟着我们的滚动条来进行滚动
背景的简写
<style>
p{
background: 颜色 图片地址 是否平铺 是否固定 背景定位;
}
</style>
注意：没有严格的顺序的，每一个都可以被省略掉
CSS的三大特性
1.层叠性
样式冲突的情况下，采取就近原则，下面的属性会覆盖掉上面的属性
样式不冲突的情况下，那么就是属性的叠加
2.继承性
子元素可以去继承父元素的部分样式
text-开头的属性
font-开头的属性
line-开头的属性
color
3.优先级
CSS优先级的算法公式
选择器 权重
通配符选择器或者是继承的属性 0, 0, 0, 0
标签选择器 0, 0, 0, 1
类选择器、伪类 0, 0, 1, 0
id选择器 0, 1, 0, 0
style 行内样式 1, 0, 0, 0
!important 重要的 这个是要跟在属性后面的 无穷大
CSS的权重是可以被叠加的----复合选择器里面
#id .cls:hover{//权重是 0，1，2，0
}
不能进位
分析优先级的一些问题的时候：
找到目标元素，看这个目标元素是否被选择器选中，如果选中了，那么比对优先级，如果没有选中，那么就可能使用了继承的样式
盒子模型
组成
- 内容
- 边框
- 内边距
- 外边距
边框 border
组成
- border-width 边框的粗细 可以省略 默认是3px
- border-style 边框的样式 不能省略
- solid 实线
- dashed 虚线
- dotted 点线
- border-color 边框的颜色 可以省略 默认是黑色
<style>
p{
border:1px solid red;
}
</style>
还可以单独去进行设置
设置左边框： border-left: 1px solid red;
设置右边框： border-right: 1px solid pink;
设置上边框： border-top: 1px solid green;
设置下边框： border-bottom: 1px solid purple;
浮动
浮动是用来干嘛的？
用来布局的，能够让多个盒子水平排列，为什么不用行内块呢？ 因为多个行内块的元素中间有间隙，而这个间隙很难去去除
语法
div {
float: left | right
}
left: 左浮动
right: 右浮动
特点
- 浮：设置了浮动的元素漂浮在标准流的上面
- 漏：漂浮起来了，脱标了，不占据标准流的位置，那么后面的标准流的兄弟元素就占据了它之前在标准流的位置
- 特：设置了浮动的元素 改变了元素的特性，类似于 行内块；如果说浮动元素的宽度大于了父元素的宽度，会自动换行
清除浮动
为什么要清除浮动？
在我们很多时候，父盒子不方便去设置高度，然后我们子元素浮动了，导致了父元素的高度为0，从而影响了整个的页面布局
清除浮动的本质
解决浮动的子元素造成父元素高度为0的问题
清除浮动的必然条件
1.父盒子没有设置高度
2.子元素浮动了
清除浮动的方法
额外标签法
会在浮动的最后一个子元素的后面添加一个新的空标签，然后给这个标签设置 clear：both的属性
<div>
<div>我是设置了浮动的元素</div>
<div style="clear: both"></div>
</div>
给父亲设置 overflow的属性
.parent {
overflow: hidden;
}
利用单伪元素
.clearfix:after {
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
}
注意：声明的 .clearfix 这是一个类选择器，仅仅声明没有调用时不会起作用的，我们需要把这个类名设置给浮动元素的 父亲
利用双伪元素
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
注意：声明的 .clearfix 这是一个类选择器，仅仅声明没有调用时不会起作用的，我们需要把这个类名设置给浮动元素的 父亲
浮动元素与父元素的关系
我们一般在布局的时候，会给浮动的元素都会套一个父盒子，这个父盒子就是为了占位的
浮动元素默认不会压住父元素的边框和内边距
浮动元素与兄弟元素的关系
浮动元素只会影响后面的兄弟元素，不会影响前面的 |
|
收藏
淘帖
踩
