css创建
外部样式
* (正式项目,推荐)
* 在head头通过 link标签导入外部的css文件
* <link rel="stylesheet" href='css文件地址">
内部样式
* (平台的开发,测试)
* 在head头通过 style标签当场写css样式
* 格式:
<style>
选择器{
属性名: 属性值;
属性名: 属性值;
...
属性名: 属性值;
}
</style>
内联样式
* (不推荐)
* 直接在 开始标签里面通过 style属性当场写css
* 格式:
<开始标签 style="属性名:属性值; 属性名:属性值; ...>
导入式
* head头部通过 style标签导入css文件
* 格式
<style>
@import url("css文件地址");
</style>
注:
* @import 必须写在style里面的最前面
* @import 和 外部样式的区别
外部样式: 先加载css, 再加载html
import: 先加载html, 再加载css
HTML有四大通用属性
* class 给属性元素取个绰号
* id 给当前元素取个身份证号
* style 给当前元素赋予css样式
* title 当鼠标悬停在元素上时,显示title内容
CSS注释
* 与HTML注释不同
css注释:
/* 初始内容 */
CSS选择器
基础选择器
标签选择器 (元素选择器)
格式:
标签名{
属性名:属性值;
属性名:属性值;
...
属性名:属性值;
}
特征:
* 影响范围是:整个网页
* 由于影响太大,比较适合做 css初始化(例如: a链接, li列表)
a text-decoration:none;
li list-style:none;
类选择器 (class选择器)
格式:
.class名{
属性名:属性值;
属性名:属性值;
...
属性名:属性值;
}
特征:
* 一个标签可以有多个class名
* 多个标签可以有相同的class名
注:
* 写选择器时,前面有一个小数点
身份选择器 (id选择器)
格式:
#id名{
属性名:属性值;
属性名:属性值;
...
属性名:属性值;
}
特征:
* 一个标签只能有一个id名
* 在css中多个标签使用相同的id,css有效果,但是js无法识别多个同名id
* 推荐id不要重复(唯一性)
注意 class 和 id 选择器区分大小写
关联选择器
1. 关联选择器 (关系选择器)
* 祖辈后辈关系
* 兄弟关系
* 以 s1,s2,s3 代表任意基础选择器
s1 s2{...} 匹配s1的 所有后辈s2
s1 > s2{...} 匹配s1的 所有儿子s2
s1 + s2{...} 匹配s1 后面的 第一个兄弟s2
s1 ~ s2{...} 匹配s1 后面的 所有兄弟s2
组合选择器
1. 组合选择器
* 给不同的元素赋予相同的样式 (节省css代码)
* 格式:
s1, s2, s3,.......sN{....}
* 案例: .zheng, .mao, .la{ color: red; }
属性选择器
1. 针对拥有某些属性的元素
s1 需要匹配的标签
att 属性名
value 属性值
s1[att] 匹配s1有 att属性的所有元素
s1[att = value] 匹配s1的 att=value的所有元素
s1[att ~= value] 匹配s1中 att为其中一个分词的所有元素
value是以 空格 隔开的分词
s1[att *= value] 匹配s1中 att含有value的所有元素
* 以下选择器在class中 value是一个整体
class="xz xy sdasd" 表示以x开头 d结尾
s1[att ^= value] 匹配s1的 att以 value开头的所有元素
s1[att $= value] 匹配s1的 att以 value结尾的所有元素
*注
* att ~= value 常用于class属性
伪类选择器
hover
* s1 : hover{.....} 当鼠标悬停在s1上时,触发css效果
* 高阶hover(隔山打牛)
* s1 : hover s2{...} 后辈
* s1 : hover > s2{...} 儿子
* s1 : hover + s2{...} 第一个兄弟
* s1 : hover ~ s2{...} 所有兄弟
focus
* s1 : focus{...} 当s1获取到光标时,触发css
child
* 父级----------->顺序---------------->元素
* 先找到s1的父级 再找到父级里面的第一个元素 最后看这个元素是不是s1
(是: 则触发css效果 否: 不触发)
* s1 : first-child{...} 找s1是否是 父级的第一个元素
* s1 : last-child{...} 找s1是否是 父级的最后一个元素
* s1 : nth-child(N){...} 找s1是否是 父级的第N个元素
of-type
* 父级-------------->元素-------------------->顺序
* 先找到s1的父级 再找父级里面的所有s1元素 最后匹配s1中的第一个
* s1 : first-of-type{...} 找s1的父级 找父级的第一个出现的s1元素
* s1 : last-of-type{...} 找s1的父级 找父级的最后一个出现的s1元素
* s1 : nth-of-type(N){...} 找s1的父级 找父级的第N个出现的s1元素
N 的写法
* 数字
* 单词 odd: 奇数 even: 偶数
* 一元一次方程 n: 0 1 2 3 ....
* 2n
* 2n + 1
* 3n
* 3n + 1
* 3n + 100
伪对象选择器
before
* s1 :: before{...} 匹配s1里面的最前面
after
* s1 :: after{...} 匹配s1里面的最后面
selection
:: selection{.....} 匹配被选中的内容
-
注
* before 和 after 会配合content属性使用
使用场景: 配合浮动技术
* content内容无法被选中
选择器优先级
定义
-
多个选择器都指向同一个标签,且赋予相同的属性,此时就会有优先级
规则
-
权重相同时, 采用就近原则, css离标签越近, 优先级越高
-
权重不同时, 权重越高, 优先级越高
权重比例
-
标签选择器
1
-
class选择器
10
-
id选择器
100
-
最高权重
!important
-
写在属性值的后面, 分号前面
-
-
注意:
-
权重可以叠加
-
权重不能越级的(11 个标签不会 超过1个class)
-
最高权重也可以参与叠加
-
继承性
* 绝大多数的属性都可以被后辈继承 只有小部分是无法继承的
* 例如:
* a链接的 color
* h标签的 font-size
-
辨别是否被继承:
* 调试器(F12)
查看标签对应的CSS, 找到Inherited From 标签
在Inherited From 被删除的都是无法继承的属性
* 问题 不能继承的属性 但是又想改变这些属性?
* 解决 单独选择该标签 单独赋予css
颜色
color
-
字体颜色
-
写法
-
颜色单词
-
十六进制
-
rgb
-
r, g, b 的数值范围: 0~9 a~f
-
-
rrggbb
-
-
rgb(r, g, b)
-
r, g, b 的数值范围: 0~255
-
-
rgba(r, g, b, a)
-
a的数值范围: 0~1 可小数
-
transparent 相当于rgba(0,0,0,0)
-
-
-
hsl(h, s, l)
-
h: 色调 范围: 0~360 0/360 红色 120 绿色 240 蓝色
-
s: 饱和度 范围: 0% ~ 100% 饱和度:50%
-
l: 亮度 范围: 0% ~ 100% 亮度::50% 饱和度和亮度 同时为50%为正常
-
-
hsla(h, s, l, a)
-
a: 透明度 范围: 0 ~ 1 可小数
-
-
-
opacity
-
透明度 范围: 0 ~ 1
-
注:
-
完全透明时,
无法选中
-
用a调节的,完全透明
可以选中
-
-
长度
px
* px 像素 (随着电脑的分辨率变化而变换)
1 in(英寸)=96 px
%
* % 百分比 相对于父级大小
em
* em 倍数
* 首行缩进 text-indent: 2em;
字体
* 祥写:
fort-family 字体家族
通用字体: 浏览器自带的, 例如: serif,monospance 等
font-family: 楷体, "Lei", 微软雅黑, sans-serif, monospace;
浏览器从前至后匹配,注意字体双引号(便于识别)
font-size 字体大小
建议:
不要低于12px,有的 浏览器不支持12以下的字体 常规 14px 或 16px
font-style 字体斜体
italic 斜体
normal 正常
font-weight 字体加粗
bold 加粗
normal 正常
line-height 行高
当行高与当前元素高度一致时, 有垂直居中效果
提示: 最好只做一行, 不建议做多行(可能换行后 盒子不够大)
* 简写
font: [weight | style] size[/line-height] familiy;
* 手册常用字符解析
[] 可有可无
| 前后可颠倒顺序
* 大坑 先有了祥写,再简写(简写会重置所有祥写)
建议: 先简写, 再用祥写补充
背景
* 祥写
* background-color: 背景颜色
* background-image: 背景图片
* background-repeat: 背景重复
* background-position: 背景定位
* background-size: 背景大小
* 简写:
background: [color | image | repeat position[/size] ]
边框
* 方向: top bottom left right
* 属性: color width style
* style不写,其他样式无法展示
* 单边
border-方向-属性:
border-方向:[color] | [width] | style
* 四边
border-属性:
border: [color] | [width] | style
* 案列
使用纯css实现 三角形 利用透明(transparent)
圆角
* 祥写
border-上下-左右-radius: px 或 %
* 简写
border-radius: px 或 %
* 学会 画圆 画椭圆
* 注
* 以px为单位,最大弧度是以 小边
* 以%为单位,最大弧度是以 大边
表格边框合并
* border-collapse: collapse;
* 与cellspacing="0"的区别 (边线)
轮廓
* outline: 值的写法与border一模一样
更多的场景是使用 none,
* 取消轮廓outline:none;
列表
* 列表样式
list-style: none; 取消列表项目符号
disc; 默认
square; 实心正方形
lower-roman; 小写罗马数字
circle 空心圆
溢出
* 祥写
overflow-x:
hidden 隐藏溢出的内容
visable 显示溢出的内容, 默认
auto 通过滚动条显示溢出的内容
overflow-y:
hidden 隐藏溢得出得内容
visible 显示溢出的内容, 默认
auto 通过滚动条显示溢出内容
* 简写
overflow:
hidden 隐藏溢出的内容
visible 显示溢出的内容,默认
auto 通过滚动条显示溢出的内容
* 如何实现整个浏览器窗口任意缩小, 都不会出现水平滚动条
body{
overflow-x: hidden;
}
文本属性
text-indent
-
首行缩进
text-indent: 2em;
text-decoration
-
格式:text-decoration: 属性值;
-
属性值
-
none 取消划线
-
underline 下划线
-
overline 上划线
-
line-through 删除线
-
text-decoration: underline wavy; 下划线且为波浪线
-
-
text-shadow
-
文字阴影
-
text-shadow: 10px 20px 30px red;
-
第一个值 水平位移
-
第二个值 垂直位移
-
第三个值 模糊度,不能为负值
-
第四个值 阴影颜色
-
text-overflow
* text-overflow: ellipsis;
一行文字溢出用...代替,需配合white-space 和 overflow 一起使用
* white-space:nowrap;
* overflow: hidden;
* text-overflow: ellipsis;
* 注: 特殊情况: 整行为一个单词时, 可省略 white-space: nowrap;
text-align&vertical-align
* text-align:
left; 水平向左
center; 水平居中
right; 水平向右
* 使用于:文字,图片
* vertical-align:
top; 顶部垂直
middle; 中部垂直
bottom; 底部垂直
* 注
* 默认为对外对齐
* 对内对齐需配合 display: table-cell
当成td单元格看待,模仿td的valign属性
display
* 将当前元素转换为 其他元素
display: table-cell; 转换为 td元素
鼠标
cursor
* 属性值
pointer 小手
move 移动坐标
wait 等待圈
none 隐藏鼠标
help 问号
default 默认,箭头
字体图标
定义
既具有图片的形态,又具有文字的样式
在线地址
https://www.iconfont.cn
Unicode字体图标
* 导入 iconfont.css
<link rel="stylesheet" href="./resource/iconfont/iconfont.css">
* 选取你需要的字体图标的 Unicode代码

* 选择需要用字体的标签,并为该标签赋予 class="iconfont"
<p class="iconfont"></p>
font-class字体图标
* 导入 iconfont.css
<link rel="stylesheet" href="./resource/iconfont/iconfont.css">
* 选取 你需要的字体图标的 class名
icon-gouwuchekong
* 选择 需要用字体的标签, 并为该标签赋予class="iconfont class名"
<p class="iconfont icon-gouwuchekong"></p>
彩色Symbol字体图标
* 导入 iconfont.js
head头里加入
<script src="./resource/iconfont/iconfont.js"></script>
* 设置 通用css
.abc {
width: 20em;
height: 20em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
* 选取 你需要的字体图标的 #icon-xxxxxxx
#icon-fangdajing
* 设置 svg标签, 并修改use 的属性
<svg class="abc" aria-hidden="true">
<use xlink:href="#icon-fangdajing"></use>
</svg>
盒子模型
* 非IE盒子模型组成:
weight/height+ padding+ border(才是物理空间)
使用于:高版本IE.
* IE盒子模型组成: width(就是物理空间,包含padding+border)
如果设置了padding和border,那么盒子内容会向内压缩(减掉padding和border的大小)
使用于:低版本IE,例如: IE8,IE7,IE6 以及更早的版本
* 切换IE模型和非IE模型:(新增)
box-sizing: content-box; 非IE盒子模型
box-sizing: border-box; IE盒子模型
块级元素
block
div h1~h6 p ul li
* 独占一行
* 宽度默认与父级(浏览器)一致
* 高度默认与内容有关
* 宽度, 高度, 行高, 内外边距 都可以手动控制
* 容纳性: 容纳任意元素(除特殊性质的标签. 例如: h1, p)
内联元素
inline
span, b, i, u, del, a ...
* 同在一行
* 宽度默认与内容有关
* 高度默认与内容有关
* 宽度, 高度, 行高, 外边距, 内边距, 部分可以手动控制
对于span,b,i,u,del
* 宽度 高度 没有用
* 行高 内外边距 有用
* 容纳性: 只能容纳内联元素(除特殊性质的标签. 例如: a)
元素转换
display
block 将当前元素转换为 块级元素
inline 将当前元素转换为 内联元素
inline-block 将当前元素转换为 内联-块元素
none 隐藏当前元素 (不占位)
table 将当前元素转换为 块级table元素
table-cell 将当前元素转换为 td元素
flex 将当前元素转换为 弹性盒子
inline-flex 将当前元素转换为 内联弹性盒子
visibility
hidden 隐藏当前元素(占位)
visible 显示当前元素
* 如何实现 不占位 的隐藏元素
display不设置none,都会显示元素
内外边距
外边距
-
详细: margin-方向: px
-
简写
-
margin: 10px; 上下左右均为10px
-
margin: 10px 20px; 上下10px 左右20px
-
margin: 10px 20px 30px 上10px 左右20px 下30px
-
margin: 10px 20px 30px 40px 上10px 右20px 下30px 左40px
-
-
小技巧
-
margin-left: auto;
-
margin-right: auto;
-
两者同时出现时,可在父级内部实现水平居中
-
内边距
-
详细: padding-方向: px
-
简写
-
padding: 10px; 上下左右均为10px
-
padding: 10px 20px; 上下10px 左右20px
-
padding: 10px 20px 30px 上10px 左右20px 下30px
-
padding: 10px 20px 30px 40px 上10px 右20px 下30px 左40px
-
定位
定义
-
多种元素发生重叠时, 使用定位
属性
-
position: relative 相对定位
-
position: absolute 绝对定位
-
position: fixed 固定定位
相对定位
-
位置: 保留原来的位置
-
原点: 基于本身的四个角作为原点
绝对定位
-
位置: 不保留原来的位置
-
原点 基于第一页的四个角作为原点
固定定位
-
位置: 不保留原来的位置
-
原点 : 基于可视窗口的四个角作为原点
流
-
body: 属于普通的文档流
-
position 属于定位流, 脱离普通文档流, 悬停在文档上方
-
技巧:
-
如何实现后辈元素基于祖辈元素的四个角作为原点?
-
实现方式:
-
祖辈元素: 任意定位(推荐使用相对定位, 原因: 不破坏原有的排版)
-
后辈元素: 绝对定位
-
-
-
定位优先级
z-index
-
属性值: 数字;
-
数字越大,优先级越大
盒子阴影
box-shadow
-
box-shadow: 水平位移 垂直位移 模糊度 [阴影面积] 阴影颜色 [内阴影]
-
模糊度: 不能为负数
-
阴影面积: 默认与元素一样大, 可以写负数
-
内阴影: inset
-
浮动
功能
-
将竖排 变成 横排
-
内容环绕
格式
-
float: left | right | none
特性
-
元素一旦浮动, 则不保留原来的位置, 导致后面的盒子元素向上挤, 产生重叠效果
清除浮动
目的
-
不会发生重叠效果
格式
-
clear: left | right | both
注意
-
浮动元素后面的兄弟 帮忙清除 浮动元素的浮动
清除方式
方式一(原理)
* 在浮动元素的后面, 添加空元素, 并赋予clear属性
* 由于出现空元素, 在W3C标准中, 认为这是一个无意义的标签, 所以尽可能不要使用该方法
方式二(BFC)
* 给浮动元素的父级, 添加overflow:hidden, 形成BFC区域, 清除子元素的浮动
BFC
-
是一个独立的区域, 外界不能影响BFC内部, BFC内部也不会 影响BFC外部
方式三(兼容性最好 推荐)
* 利用伪对象选择器 + 原理
父级::after{
content:"";
display: block;
clear:both;
}
* 通常写一个通用的清除浮动, 以后谁需要给子元素清除浮动, 那么就给父子添加class="clearfix"
.clearfix::after{
content:'';
display: block;
clear: both;
}
内容环绕
-
浮动元素周边是 文字, 图片等内联元素, 产生环绕的效果, 而不是重叠的效果
尺寸
-
width: 固定高度
-
height: 固定高度
-
min-width: 最小宽度
-
max-width: 最大宽度
-
min-height: 最小高度
-
max-height: 最大高度
平滑过渡
平滑过渡
transition: 过渡的属性 持续时间 [速率] [延迟时间];
过渡的属性
单一属性过渡
-
transition: 过渡的属性 持续时间 [速率] [延迟时间];
多个属性过渡
* transition: 过渡的属性 持续时间 [速率] [延迟时间], 过渡的属性 持续时间 [速率] [延迟时间], ....
过渡所有属性
-
有多少发生改变,就过渡多少属性
-
transition: all 持续时间 [速率] [延迟时间];
速率
-
ease 默认, 逐渐变慢
-
linear 匀速
-
ease-in 加速
-
ease-out 减速
-
ease-in-out 先加速, 在减速
-
cubic-bezier() 自定义速度, 建议F12 调试
延迟
-
单位: s 或毫秒
-
过渡不会立马触发, 而是等待延迟时间过了, 才会触发过渡
重点
-
过渡只能过渡 能够加减的属性. 例如: width, height, color, line-height, opacity等
-
以下属性是无法过渡的. 例如: display, visibility
变形
transform
-
transform:
-
none: 不变形 默认
-
rotate 旋转 单位 deg 角度
-
rotate(30deg); X,Y,Z各30度
-
rotateX(30deg);
-
rotateY(30deg);
-
rotateZ(30deg);
-
rotate3d(10,20,30,30deg);
-
-
skew 扭曲 单位 deg 角度 90*奇数 会扭曲成一条线
-
skew(30deg) X上扭曲(30deg) 拉左上角和右下角
-
skewX(30deg);
-
skewY(30deg);
-
skew(30deg,30deg); X,Y同时扭曲
-
-
scale 中心缩放 单位 基数
-
基数 = 1 不缩放,原型
-
基数 > 1 放大
-
基数 < 1 缩小 可负数
-
scale(-1) 上下左右颠倒
-
-
-
translate 位移 单位: px 或 % 相对于自身开始位移
-
css初始化
原因
由于各大浏览器对属性默认值不是完全相同,导致相同的css代码在不同的浏览器中显示时, 会呈现不同的效果,
为了避免这种情况, 做了css初始化, 来统一显示效果
css命名规范
-
要求1 : 选择器名称较长时, 单词间隔请用 - 减号隔开, 不要用下划线隔开
-
原因1: 有的浏览器不识别
-
原因2: 能有效的区分js
-
-
要求2: id名要求唯一性
-
原因: js无法准确获取重复的id
-
-
要求3: 选择器名称取得要有意义,不要使用中文式英语,拼音
filter
-
filter: blur(10px); 高斯模糊
-
filter: brightness(250%); 高亮
-
filter: grayscale(100%); 黑白
-
参考手册
暂且记录这些 如有补充 欢迎欢迎