1. CSS与html结合方式
1. 内联样式
* 在标签内使用style属性指定css代码
* 如:<div style="color:red;">hello css</div>
2. 内部样式
* 在head标签内,定义style标签,style标签的标签体内容就是css代码
* 如:
<style>
div{
color:blue;
}
</style>
<div>hello css</div>
3. 外部样式
1. 定义css资源文件。
2. 在head标签内,定义link标签,引入外部的资源文件
<link rel="stylesheet" href="css/a.css">
* 注意:
* 1,2,3种方式 css作用范围越来越大
* 采用就近原则
* 1方式不常用,后期常用2,3
* 3种格式可以写为:
<style>
@import "css/a.css";
</style>
2. 选择器
2. 选择器:筛选具有相似特征的元素 https://www.cnblogs.com/AIonTheRoad/p/11283100.html
优先级:!important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器
权 重: !important:10000
内联: 1000
id选择器:100
类、伪类、属性选择器:10
标签、伪元素选择器:1
通用选择器(*)、子选择器(>)、相邻兄弟选择器(+)、通用兄弟选择器(~)权重值为0
1. 基础选择器
1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一,不能以数字开头
* 语法:#id属性值{}
2. 元素选择器:选择具有相同标签名称的元素
* 语法: 标签名称{}
* 注意:id选择器优先级高于元素选择器
3. 类选择器:选择具有相同的class属性值的元素。
* 语法:.class属性值{}
* 注意:类选择器选择器优先级高于元素选择器
2. 扩展选择器:
1. 选择所有元素:
* 语法: *{}
2. 并集选择器:
* 选择器1,选择器2{}
p, span, .blue,#box 选择所有的p元素、span元素、class为"blue"的元素以及id为"box"的元素
2. 交集选择器:
* 选择器1选择器2 同时满足选择器1和选择器2
* .div.box
3. 子选择器:筛选选择器1元素下的选择器2元素
* 语法: 选择器1 选择器2{}
div p 选择div元素内部的所有p元素
4. 父选择器:筛选选择器2的父元素选择器1
* 语法: 选择器1 > 选择器2{}
div>p 选择div元素的第一子代的所有p元素
div>p:first-child 选择div元素的第一子代的第一个p元素
5. 属性选择器:选择元素名称,属性名=属性值的元素
* 语法: 元素名称[属性名="属性值"]{}
input[type='text']{}
6. 伪类选择器:选择一些元素具有的状态
* 语法: 元素:状态{}
* 如: <a>
* 状态:
* link:初始化的状态
* visited:被访问过的状态
* active:正在访问状态
* hover:鼠标悬浮状态
* focus
* before
p:before 在每个p元素内容之前插入内容
* after
3. 属性
1. 字体、文本
* font-size:字体大小
* color:文本颜色
* text-align:对其方式
* line-height:行高
2. 背景
* background:
3. 边框
* border:设置边框,符合属性
* border-top-style
* border-right-style
* border-bottom-style
* border-left-style
* 还可以将每一个边的边框样式细化(厚度 风格 颜色)eg:以右边框设置为例
Border-right-width:10px
Border-right-style:solid
Border-right-color:black
4. 尺寸
* width:宽度
* height:高度
4. 盒子模型:控制布局
* margin:外边距 有背景颜色(透明的transparent)
* margin-left
* margin-top
* margin-right
* margin-bottom
* padding:内边距 默认:上右下左
背景与元素背景一致,可以分别设置元素的各个边的内边距
* padding-left
* padding-top
* padding-right
* padding-bottom
注意:
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
5. float:浮动
Float: left/right/none------------------脱离了文档流
* left: 元素左浮动
* right: 元素右浮动
* none: 默认值,不浮动
注意:
如果不加clear属性,下面的div样式会失效
eg: <div style="clear:left;"></div>
取消浮动带来的影响:
1、给父级元素设置 overflow:hidden
2、给父级元素加一个高度
3、给父级元素的末尾添加一个没有浮动的元素,用来撑开背景 clear:both
6. display: 转换
在实际开发中,如果希望行内元素有块级元素,需要有display 转换
选择器: {display: 属性值}
inline: 此元素将显示为行内元素(行内元素的默认值)
block : 此元素指定为块级标签(块元素display 的默认值)
inline-block: 将对象呈递为内联元素,对象内的元素块级展示,行内块级标签
none : 隐藏元素
7. 相对定位、绝地定位、固定定位
* position:relative 相对定位
参照物:自身原来的位置
有没有脱离文档流:没有脱离
特点:
* 定位元素可以使用 top/left/right/bottom来设置元素的位置,
* 当上下都设置时,听上面的;当左右都设置时,听左边表的。
* top/left/right/bottom每一个属性的正方向都为中心方向,反之为负方向。
* 定位的元素会出现分层现象,可以使用z-index属性设置层级。值越大层级越高,默认值为0
* position:absolute 绝对定位
参照物:祖先元素中,最近的定位元素为参照物,若没有满足条件的祖先,以body为参照物。
开发时手动设置参照物设置position:relative
有没有脱离文档流:脱离了
特点:与相对定位一致
* position:fixed 固定定位
参照物:可视窗口
有没有脱离文档流:脱离了
特点:与相对定位一致
总结:脱离了文档流的设置position:absolute/fixed float:left/right