css引入方式
内联引入
<body>
<div style="color:red;width:100px;heigh:100px;">苹果</div>
<div style="color:green;width:100px;heigh:100px;">苹果</div>
<div style="color:gray;width:100px;heigh:100px;">核桃</div>
<div style="color:yellow;width:100px;heigh:100px;">香蕉</div>
</body>
内部引入
<style>
div{
color:red;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div>苹果</div>
</body>
外部引入
css选择器
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
选择器主要由有四大类：
- 基本选择器
- 组合选择器
- 属性选择器
- 伪元素选择器
基本选择器：
通配符:全部都被标注！
标签div：
div{
}只有对应的div才被标注
id选择器：
class：
**css原理**
1.优先原理：后解析的内容会覆盖掉之前的内容
2.继承原则：嵌套里面的标签拥有外部标签的某些样式；子元素可以继承父元素的属性。
优先原则：-》选择器
1.同一个选择器：从上往下执行。
效果如下
3.不同类型的选择器：优先级
先解析低优先级；
div<class<id
原理同上
4.外部样式 内部样式合并之后再一起解析
先外部样式再内部。
其他原理同上。
5.内联样式：外部和内部解析完之后再解析内联。
6.加了important字段的 最后执行。
继承原则
1.文字 文本 样式 可被继承
div.txt{
color:red;
}
<body>
<div class="txt">
苹果
<p> 香蕉 </p>
</div>
</body>
其中苹果和香蕉属性相同。
2.块级元素 宽度不被设置时则会继承父级元素的宽，高由内容决定。
组合选择器
把基本选择器 通过特殊字符串在一起
分组选择器
用逗号隔开：div,p 代表两个选择器内容共同
嵌套选择器
用空格隔开：div p 嵌套在div里的p才能生效
子选择器
div>p 必须是上一级的div才能生效。
相邻选择器；同级别的
div+p
属性选择器
css背景
CSS 属性定义背景效果:
background-color属性定义了元素的背景颜色.
background-image属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示
background-repeat：
background-repeat:repeat-x;水平方向平铺
background-repeat:repeat-y;垂直方向平铺
background-repeat:no-repeat;不平铺
background-attachment：
scroll
背景图片随页面的其余部分滚动。这是默认
fixed
背景图像是固定的
使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment
background-position
css字体
font
在一个声明中设置所有的字体属性
font-family
指定文本的字体系列
font-size
指定文本的字体大小
font-style
指定文本的字体样式
font-variant
以小型大写字体或者正常字体显示文本。
font-weight
指定字体的粗细。
css链接和列表
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
css盒子模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
css布局
清除浮动在下一个div中添加
div{
clean :both;
}就可以将恢复浮动
css定位
position 属性的五个值：
static:HTML 元素的默认值，即没有定位,遵循正常的文档流对象。
relative:相对定位元素的定位是相对其正常位置。
fixed:元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
sticky:这个有点魔性，就不写了。。。
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 2058751973@qq.com
