CSS层叠样式表
head头标签
<!-- 1. 设置字符集 --> <meta charset="UTF-8"> <!-- 2. 设置网页标题 --> <title>Document</title> <!-- 3. 设置自动刷新并跳转 --> <!-- <meta http-equiv="refresh" content="秒数;"> --> <!-- <meta http-equiv="refresh" content="秒数;url=网址"> --> <!-- <meta http-equiv="refresh" content="3;url=http://www.baidu.com"> --> <!-- <meta http-equiv="refresh" content="3;"> --> <!-- 4. 关键词 --> <meta name="keywords" content="关键词1, 关键词2, ..."> <!-- 5. 描述 --> <meta name="description" content="描述内容"> <!-- 6. 导入css --> <!-- <link rel="stylesheet" href="css文件地址"> --> <link rel="stylesheet" href="./test.css"> <!-- 7. 导入js --> <!-- <script src="js文件地址"></script> --> <script src="./test.js"></script> <!-- 8. 设置网页图标 --> <!-- 普通浏览器 --> <link rel="icon" href="./favicon.ico"> <!-- 兼容IE --> <link rel="shortcut icon" href="./favicon.ico">
导入css方式
css导入方式
1. 外链式 正式项目, 推荐
在head头标签中, 通过link标签导入css
2. 内联式
在开始标签中, 通过style属性来赋予css样式
3. 内嵌式
在head头标签中, 通过style标签来赋予css样式
4. 导入式
在head头标签中, 通过style标签写入
@import url('css文件地址')
注意: 导入式, 一定要写在style标签里的最前面
外链式: 先加载css, 再加载html
导入式: 先加载html, 再加载css
基础语法
1. 四大通用属性 (html)
style 给当前标签赋予css样式
name 给标签取个名字
id 给标签取唯一的名字 (身份证号)
class 给标签取个别名 (绰号) 多个, 重复
2. css选择器
选择器{ 属性名: 属性值; 属性名:属性值; ... }
每个属性之间用 分号 隔开
最后一个属性 可以不加分号
3. css 大多数不区分大小写
id 和 class 区分大小写
4. css注释
/* 注释内容 */
字体颜色
字体颜色 • color: - 颜色单词 red 红 blue 蓝 green 绿 yellow 黄 black 黑 white 白 3位十六进制的数 0-9 a-f rrggbb 6位十六进制的数 rgb(0-255, 0-255, 0-255) rgba(0-255, 0-255, 0-255, 0-1) a:透明度* hsla(0-360, %, %, 0-1) h: 色调 0:红 120:蓝 240:绿 s: 饱和度 % l: 亮度 % a: 透明度 0-1 透明度 opacity: 0-1
长度单位
绝对长度
cm
mm
in 1in = 2.54cm = 25.4mm 96px
相对长度
px
em 倍数
% (相对于父级)
### 基础选择器
##### 标签名{ 属性名: 属性值; ... }
• PS: 匹配范围比较广, 适用于初始化
• class选择器
• .class名{ ... }
• pS: 可以多个, 可以重复
• id选择器
• id名{ ... }
• PS: 唯一
• 在css中,如果id重复, css样式能重复使用
• 在今后js中, 出错
关联选择器
功能: 负责明确 祖辈 和 后辈之间的关系
• s1 s2 { ... } 匹配s1下的所有后辈元素s2
• s1 > s2 { ... } 匹配s1下的所有儿子元素s2
• s1 + s2 { ... } 匹配s1后面的一个兄弟元素s2
• s1 ~ s2 { ... } 匹配s1后面的所有兄弟元素s2
组合选择器
s1, s2, s3, ...sN{ ... } 给不同的选择器 赋予相同的样式
伪元素选择器
s1:hover{ ... } 当鼠标悬停在s1上时, 触发css
• s1:hover s2{ ... } 当鼠标选停在s1上时, s2触发css
• s1:focus{ ... } 当s1获取到光标时, 触发css
• 先父级, 再找第几个, 最后看元素
• s1:first-child{ ... } 匹配父元素下的第一个子元素s1
• s1:last-child{ ... } 匹配父元素下的最后一个子元素s1
• s1:nth-child(n){ ... } 匹配父元素下的第n个子元素s1
• 先父级, 再看元素, 最后找第几个
• s1:fisrt-of-type{...} 匹配父元素下子元素s1中的第一个
• s1:last-of-type{...} 匹配父元素下子元素s1中的最后一个
• s1:nth-of-type(n){...} 匹配父元素下子元素s1中的第n个
伪对象选择器
伪对象选择器 (不占空间, 后期有大用)
• s1::before{} 匹配s1下的最前面
• s1::after{} 匹配s1下的最后面
• ul::before{ content: '第零个马克斯改变了我的思想'; }
• ul::after{ content: '第五个马桶改变了我上厕所的姿势'; }
• 被选中时 (默认的选中网页的字体和背景颜色
• ::selection{background:pink; color:blue;}
字体
字体 font • font-size: 字体大小 • font-family: 字体家族 (如果带空格, 请加引号) • font-weight: 字体加粗 bold • font-style: 字体倾斜 italic • line-height: 行高 • (如果设置成父级/自己 高度一致时, 垂直居中的效果, 仅限一行) • 简写: [] : 可有可无 |: 或者 • font: size family; • font: [weight | style] size family; • font: [weight | style] size[/line-height] family;
背景
background
• background-color : 背景颜色
```
image : 背景图片
url(图片地址)
position: 背景定位X Y
repeat: 背景重复no-repeat
size: 背景大小
attachment : 背景固定fixed
```
• 简写:
• background: [color | image | position[/size] | repeat | attachment ]
权重优先级
权重优先级 • 标签: 1 • class: 10 • id: 100 • 权重值相同时: 离标签越近, 优先级越高 • 权重值不同时: 权重值越高, 优先级越高 • 权重值可以叠加 • 最高权重, 没有确切的权重值, 位置: 写在属性值的后面 • 继承性 • 大多数属性都是可以继承的 • 小部分属性不能继承祖辈属性 • 例如: • h 标签不能继承大小 • a 标签不能继承颜色
边框
• 边框 border
• 四边
• border-color: 默认值
```
-width: 默认值
-style:
solid 实线
none 没线
...
```
• 简写: border: style [color | width]
• 单边
• border-方向-属性
```
-left
-right
-top
-bottom
```
• 简写: border-方向: style [ color | width ]
• 圆角:
• border-radius: px | %
• border-上下-左右-radius:
• 边框合并
• border-collapse: collapse 边框合并 (适用于表格)
• 轮廓
• outline: none 常用none
width color style
盒子阴影
box-shadow: 10px 20px 30px 40px red • 10px: 水平位移 +: 右 -:左 • 20px: 垂直位移 +: 下 -:上 • 30px: 模糊度 不能为负数 • 40px: 阴影面积 可以为负数, 可省略(与本身一样大) • inset: 内阴影
列表属性
• list-style: none; • 去除列表之前的符号
溢出
overflow-x: hidden | visible | auto • overflow-y: hidden | visible | auto • overflow: hidden | visible | auto • hidden: 将溢出的内容隐藏 • vibible: 将溢出的内容显示 默认 • auto: 将溢出的内容通过滚动条显示 • min-wdith: 最小宽度 • min-height: 最小高度 • max-width: 最大宽度 • max-height: 最大宽度
文本
text-indent : 首行缩进
```
-decoration : 文本修饰
underline 下划线
overline 上划线
line-through 删除线
none
-align: 水平对齐方式
left
center
right
-shadow: 文字阴影
10px: 水平对齐
20px: 垂直对齐
30px: 模糊度 不能为负数
阴影颜色
-overflow: ellipsis 将溢出的隐藏内容用 ... 代替
需要配合
white-space
overflow
```
• vertical-align : 垂直对齐方式 (默认对外)
鼠标样式
• cursor: • pointer 手 • move 移动 • text 文本 • default 默认箭头 • none 隐藏
字体图标
@font-face{
```
font-family: 自定义家族名
src: url(字体文件地址)
}
```
• link导入
• 字体图标
• @font-face{
• font-family: 自定义家族名
• src: url(字体文件地址)
• } <title>字体图标</title>
• <link rel="stylesheet" href="./fonts-mi/iconfont.css">
• <style>
• p:hover{color:red;}
• </style>
盒子模型
标准组成: 内容 + 内边距 + 边框 外边距 IE组成: 内容(内边距,边框) 外边距
内联块元素
块级元素 block 1. 总是独占一行 2. 宽度默认与浏览器一样 3. 高度默认与内容一致 4. 宽高, 行高, 内外边距 都是可以控制 5. 容纳性: 任何元素 内联元素 (行级元素) inline 6. 总是不会独占一行 7. 宽度默认与内容一致 8. 高度默认与内容一致 9. 宽高, 行高, 内外边距 部分可以控制 (自己测试) 10. 容纳性: 只能容纳内联元素 元素转换 display: table-cell 单元格 td block 块级元素 inline 内联元素 inline-block 内联块元素 none 隐藏元素 不保留原来的位置 visibility: hidden 隐藏元素 保留原来的位置 visible 显示元素
内外边距
外边距 元素与元素之间的距离
• margin: 10px 上下左右均为10px
• margin: 10px 20px 上下10 左右20
• margin: 10px 20px 30px 上10 左右20 下30
• margin: 10px 20px 30px 40px 上10 右20 下30 左40
• 单方向:
```
margin-方向:
-top
-left
-right
-bottom
```
• 水平居中
• margin-left: auto;
• margin-right: auto;
• margin: 100px auto 30px
• 内边距
• padding: 10px 上下左右均为10px
• padding: 10px 20px 上下10 左右20
• padding: 10px 20px 30px 上10 左右20 下30
• padding: 10px 20px 30px 40px 上10 右20 下30 左40
• 单边:
• padding-方向:
定位
position: absolute; • 位置: 不保留原来的位置 • 原点: 基于第一 页的四个角落 • 所有定位: 当元素发生重叠时, 可以使用定位 • 相对定位 • position: relative; • 位置: 保留原来的位置 • 原点: 基于原来的位置 • 固定定位 • position: fixed • 位置: 不保留原来的位置 • 原点: 基于可视窗口的四个角落 • 如何让子元素 基于父元素的四个角落进行定位 • 父元素: 任何定位 (推荐: 相对定位) • 子元素: 绝对定位
浮动
• float: left | right | none;
• 注意: 不保留原来的位置
• 清浮动
• 清除浮动1
• 原理: 后面的同级元素 清除前面的同级元素
• clear: left | right | both
• 清除浮动2
• BFC区域 实现清除子元素的浮动 (不包括孙子及更大的后辈)
• BFC: 不会影响到区域外的元素
• overflow:hidden;
• 清除浮动3 推荐
• ::after{
• clear: both
• content:'';
• display: table;
• }
• 如果有发现只有after时, 不起作用了, 请补上before
• ::before{
• content:'';
• display: table;
• }
CSS初始化
例:/* 腾讯 */
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
/* 新浪 */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
/* 淘宝 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
/* 网易 */
html {overflow-y:scroll;}
body {margin:0; padding:29px; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}
平滑过渡
平滑过渡 • transition: 属性 持续时间 速率 延迟时间; • 属性: 指定多个属性, 直接用all • 持续时间: 单位 s/ms • 速率: linear 默认 匀速 • ease-in 加速 • ease-out 减速 • ease-in-out 先加速再减速 • 延迟时间: 单位 s/ms • 适合用于 有数值变化的属性
变形
transform: • none 不变形 • translate 位移 • translate(X) • translate(X,Y) • translateX() • translateY() • rotate 旋转 单位: 度 deg • rotate() • rotateX() • rotateY() • skew 扭曲 单位: 度 deg • skew() • skewX() • skewY() • 注意: 90deg的奇数倍, 会扭没了 • scale 中心缩放 • 单位: 倍数 • 1: 本身 • 倍数: 可小数, 可负数 • 比1大的: 放大 • 比1小的: 缩小
331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
