# CSS
## 1.css介绍
css通过统一的语法对页面html元素做样式修饰
## 2.css语法结构
选择器{
样式:样式值;
样式:样式值;
}
## 3.css引入方式
如何在html页面中写css代码
“`html
1.页面中直接使用style标签 编写css 调试样式代码时使用
“`
“`css
2.通过link标签 引入css文件 上线时使用
可使用三种路径 相对路径 相对根路径 绝对路径
“`
“`html
3.在元素上 通过style属性直接编辑样式 尽量不用 后期维护更新比较麻烦
我的标题
“`
注意:
1,2 后加载的覆盖先加载的
3 覆盖1,2加载方式
## 4.css常用选择器
常用选择器
“`html
1.标签选择器(通过html标签选择元素) 选取范围较大 只要是页面中指定的标签都会选中
2.class选择器(通过class值选元素) 选取范围精准 可以任意给元素指定class值 class值中有一个能匹配上即被选中
class选择器 配合class多值的特性 让选取元素非常灵活
3.id选择器(通过id值选元素) 选取范围精准 class可以替代id
id一般在写js是定义
基本选择器的优先级
id>class>标签 权值高的覆盖权值低的
“`
“`css
1.标签选择器
p{
color: blue;
}
2.class选择器
.myp{
color: green;
}
3.id选择器
#aimp{
color: lightcoral;
}
“`
选择器组合方式 (了解即可)
“`css
4并集选择器 同时选多种类型元素 选择器,选择器
5交集选择器 同时满足多种条件的元素 选择器选择器 先元素 再其他
6后代选择器 选取元素内部的元素 选择器 选择器 选取范围较大
7子代选择器 选取元素内部的子元素 选择器>选择器 选取较精准
8属性选择器 [属性名] [属性名=属性值]
9通用选择器 * 做全局默认设置
“`
“`html
4并集选择器
h1,.myp{
color: lightblue;
}
5.交集选择器
p.mystyle{
color: blue;
}
6.后代选择器
div p{
color: red;
}
7.子代选择器
.testdiv>div>p{
color: red;
}
8.属性选择器
[type=’button’]{
color: red;
}
/* .div1 [type=’button’]{
color: red;
}
.div2 [type=’button’]{
color: green;
} */
9.全局选择器
*{
color: lightpink;
}
“`
## 5.css常用样式
#### 文字 背景常用设置
“`html
常用样式属性
1 color 文字颜色 颜色英文
rgb值 红 绿 蓝 0-255
#RGB 16进制
#3CF 相当于 #33CCFF
2 font-size 文字大小 单位 像素 绝对单位
em rem 相对单位 默认字体倍率
分辨率 1080p 1920*1080
2k
4k
3 font-weight 字体粗细 数大的粗
4 font-family 字体类型 默认黑体
5 text-align: center; 调整文字左右位置
6 line-height: 100px; 行高 行高与块高一致 文字正好在中心点
7.background-image: url(./imgs/niu.jpg); 背景图片
jpg png gif
8.background-size: 50%; 调整大小比例
9.background-repeat: no-repeat; 背景重复方式
10. background-color: blueviolet; 背景颜色 背景图片与颜色一起使用时 图片会盖在颜色上边
11. list-style:url(./imgs/niu2.png); 列表的标记 可以使用图片
12. border: 1px solid black; 统一设置
四条边分开设置
left right top bottom
13. border-radius 像素 百分比
四个角可以单独设置
border-bottom-left-radius: 30%;
“`
“`html
- 尔滨装卸行李温柔得像放鸡蛋
- 郑钦文称不与选手交朋友 李娜回应
- 快递小哥在仓库遇到小猪包裹
- 王俊凯发文卡点为王源庆生
“`
#### 盒子模型
“`html
盒子模型
页面元素在排布时 使用的逻辑概念 盒子互相嵌套和排布
content 内容大小 可以自动适应
也可以设置宽高
width height
border 边框 特殊显示效果
padding 内部填充 边框到内容之间填充 (元素整体会变大)
margin 外边距 元素之间的间隔距离
margin: 100px auto; 元素居中 特殊用法
“`
“`html
12332111
12332111
11111
“`
#### div+css布局
div+css布局 实际上就是在页面中画格子 大格子中套小格子
 从上到下排列 宽高有效
行内(inline) 从左到右排列 宽高无效
行内块() 从走到右排列 宽高有效 图片 表单元素(输入框 选择框 按钮…..)
透明度:
opacity: 0; 透明度 0透明-1不透 中间半透
rgba(41, 211, 168, 0.151)
透明度
#### 伪类选择器
伪类选择器 (选取元素的交互状态)
“`html
:active 鼠标点击
:hover 鼠标悬停 (鼠标放在了某个元素上)
“`
手型光标
cursor: pointer; 手型光标
“`html
aaaa
“`
#### 定位属性
“`html
定位属性 position
默认文档流 块从上到下 行内元素从左到右
relative相对定位 元素不脱离文档流 元素以原始位置偏移
absolute绝对定位 元素脱离文档流 以页面位置进行偏移
fixed 固定定位 元素脱离文档流 以页面位置进行偏移 并固定在此处
static 默认文档流
top 向下偏移 可以取负值 反方向
left 向右偏移
z-index 图层顺序 必须用在有定位改变的元素上 static时无效
“`
“`html
“`