文章目录
CSS 层叠式样式表
-
css含义: Cascading Style Sheets
-
作用: 定义HTML 元素如何去显示
1996年设计出来.
1996 年 css1.0
1998年 css2.0
2001年 css3.0
目前最新版本是css3.0
W3C与2011年9月29人开始了设计css4
-
CSS特点:
-
样式和内容相分离.
-
提高页面浏览速度.(采用cs 的页面容量小)
-
外部样式表可以极大提高工作效率,易于维护和改版.
<style type="text/css"> </style>
一. css基本语法
一.基本语法
- css规则由 选择器 和 声明 两部分组成,
- 选择器 用于指定 要修改样式的元素
- 声明 用于定义 元素样式
- 声明部分可以由 属性:属性值; 的形式组成
- 可以由一条或者多条声明组成, 每条声明之间必须使用分号隔开.
- css **不区分大小写,**建议小写 ( id / class 区分大小写)
- 选择器和声明 一起使用时, 需要将声明部分 用 { } 包裹
- 只有一条声明 或 多条声明的最后一条, 可以省略分号,( 但不推荐 )
- 建议每条声明都独占一行,提高可读性,也利于排错
二.长度单位
属性 | 功能 |
---|---|
px | 像素 |
em | 倍数 |
% | 百分号 |
cm/mm | 厘米 毫米 |
pt | 点, 印刷单位 |
三.颜色单位
-
英文: red green blue orange pink 等等…
-
十六进制表示 65535种
- 0-9,a-f
- #rrggbb => #ff33cc -> #f3c
- 白色 #ffffff
- 黑色 #000000
-
RGB形式
- rgb(0,0,0) 0~255 或者 %
- rgb(255,0,0)
- rgba(255,0,0, 0.5) 0~1 小数 表示透明度
二. css导入方式
-
外链式 正规写法
在head头部标签中,通过 link 标签来导入css文件
例: < link rel=“stylesheet” href=“css.文件”>
-
内联式 测试写法
在head头标签中, 通过style标签当场写 css
<style>
css代码</style>
-
内嵌式 独留(毒瘤)写法
在开始标签中, 通过style属性 直接css
<开始标签 style="css代码">
-
导入式 过期写法
在head头标签中通过style标签来导入css
<style> @import url(css文件地址) </style>
导入式 和外链式的 区别
-
外链式: 先加载css 在加载html
-
导入式: 先加载html 在加载css
注意点: 四大通用HTML属性
属性名 | 功能 |
---|---|
name | 给标签取名 |
style | 给标签赋予css样式 |
class | 给标签取个绰号(可重复,可多个) |
id | 给标签取个身份证(唯一性) |
三.选择器
(一) .基础选择器
1.标签选择器
格式: 标签名{ … }
注意: 匹配的范围非常广,适合做初始化
2.类选择器
格式: .class名{ … }
注意:
- 一个标签可以有多个class名
- 多个标签 可以有相同的class名
3.身份选择器
格式: #id名{ … }
注意: 实际测试,多个标签可以有相同的id名
但是如果多个标签由相同的id名,在未来的js中会报错,尽量不要重复id.
注意点: class 和 id 严格区分大小写
(二) . 关联选择器
定义: 关联选择器 / 关系选择器
(s1 和 s2 代表 基础选择器)
s1 s2{…} 匹配s1里面的所有后辈s2
s1 > s2{…} 匹配s1里面的所有儿子s2
s1 + s2{…} 匹配s1后面的一个兄弟s2
s1 ~ s2{…} 匹配s1后面的所有兄弟s2
(三). 组合选择器
使用 逗号 链接 基础选择器 赋予属性
例: .xx , .xx , #xx , p { … }
(四) . 伪类选择器
1.s1:hover{ … } 当鼠标悬停在s1上时,触发css
技巧使用: 伪类选择器配合关联选择器
s1:hover s2{…}
s1:hover > s2{…}
s1:hover + s2{…}
s1:hover ~ s2{…}
2 s1:focus { … }
当s1 获取到光标时,触发css
3.按顺序查找标签
s1: first-child{…}
匹配s1父级里面的第一个儿子s1
详细分析:
第一步: 找到s1父级
第二步:找父级里面的第一个标签
第三步:看第一个标签是不是s1,如果不是就不执行
4.在标签中安顺序查找
s1:first-of-type{…}
匹配s1父级里面的第一个元素
详细分析:
第一步: 先找到s1父级
第二步: 找到父级里面的所有的s1
第三步: 找s1中的第一个
5.
s1:last-child{…} 匹配s1父级里面最后一个儿子s1
s1:last-of-type{…} 匹配s1父级里s1中的最后一个元素
s1:nth-child(n){…} 匹配s1父级里面的第n个儿子s1
s1:nth-of-type(n){…} 匹配s1父级里面s1中的第n个元素
N 的写法:
数字
单词 odd奇数 even偶数
公式: 2n,3n,3n+1,2n+1,3n+5等 一元一次方程
(五). 伪对象选择器
-
s1::before{…} 在s1里面的子元素的最前面
-
s1::after{…} 在s1里面的子元素的最后面
注意点: before和after 都会配合content属性
使用场景: 在将来的浮动技术经常用到
(六). 优先级
-
权重值相同, 谁距离标签近,谁的优先级越高
-
权重值不同,谁权重值大,谁的优先级高
-
权重值 可以叠加 (z-index: 10; 设置权重)
标签权重值: 1
class权重值:10
id 权重值 : 100
最高权重: ! important ( 注意这个是写在属性值后面的)
(七)继承性
-
大部分属性可以继承父级
-
小部分是无法继承父级的属性
例如: a标签的颜色, h标签的大小等
3.如何查看是否继承,通过浏览器f12 观察css中 Inheritedfrom
四,字体属性
属性名 | 功能 |
---|---|
font-size | 字体大小 |
font-family | 字体家族 |
font-weight :bold | 字体加粗 |
font-style :italic | 字体风格倾斜 |
font- height | 行高,一般在垂直居中时,仅限于一行文字 |
简写: font: weight style size/line-height family
简写时: size 和 family是必须写的,其他都可以省略.
五. 背景
<background>
属性名 | 功能 |
---|---|
background-color | 背景颜色 |
background-image url(图片地址) | 背景图片 |
background-repeat | 背景重复 no-repeat 取消重复 |
background-position | 背景定位 x y +向右向下, -向左向上 |
background-size | 背景大小 |
background-attachment | 背景固定 fixed |
简写: background: color image repeat position/size attachment
以上简写属性值: 可以互相颠倒,可以省略
六. 边框
<border>
边框基本属性: 1.color 2. width 3. style
边框基本属性: left —right—top—bottom
注意:
边框的style是必须写的,color和width有默认值,边框的三个属性的书写顺序可以随意颠倒.
功能 | 标签名 |
---|---|
单边: | border-方向-属性 |
单边简写 | border-方向: color width style |
四边 | border-属性 |
四边 | border: color width style |
圆角 | border-上下-左右-redius: px 或 % |
圆角简写 | border-radius: px 或 % |
边框合并 | border-collapse : collapse |
轮廓 | outline 格式与 border一模一样 常用于none 设置无轮廓 outline=none; |
注:: border-radius: 100% 将边框设置成一个圆
border-collapse: collapse 将边框合并
outline: none ; 设置轮廓属性无
七. 阴影
<boxshadow>
盒子阴影: box-shadow: 1px 2px 3px 4px #C0C0C0
box-shadow 中的属性值 | 意义 |
---|---|
1px | 水平位移 (可负数) |
2px | 垂直位移 (可负数) |
3px | 模糊度 (不能为负) |
4px | 阴影面积 (可以省略 不能为负) |
#C0C0C0 | 阴影颜色 |
八. 溢出
<overflow>
overflow: 的属性值 | 含义 |
---|---|
hidden | 隐藏溢出的内容 |
visible | 显示溢出的内容 (默认) |
auto | 通过滚动条显示溢出的内容 |
overflow-x: | hidden–visible–auto |
overflow-y: | hidden–visible–auto |
九. 文本
<text>
属性名 | 功能 |
---|---|
display: table-cell | 将当前元素转为td 单元格 |
text-indent | 首行缩进 单位:2em |
text-align | 水平对齐 left- center-right |
text-decoration | 文本划线 |
text-overflow | ellipsis将溢出的隐藏内容用…代替(仅限一行)③ |
配合white-space:nowrap;(强制在一行显示内容)① | |
overflow:hidden; ( 超出容器部分隐藏)② | |
垂直对齐方式 | 只有一行需要设置垂直居中,可以通过line-height,还可以通过vertilcal-align来操作 |
注意: vertilca-align 默认是对外对齐, 不是对内,若对内对齐需要配合 display: table-cell (将当前元素转为td单元格) | |
vertical-align: top–middle–buttom 垂直对齐–( 比如垂直对齐与之前的元素 ) |
十. 平滑过渡
<transition>
简写: transition : 属性 变换时间 变换速度 延迟时间 ;
注意点: 顺序不能颠倒, 顺序支持有数值变化的属性,例如:width,height, color…
属性名: | 功能 |
---|---|
transition-property | 改变某个属性 |
transition-duration | 需要多少时间来改变属性 单位s/ms |
transition-timing-function | 变换的速度 |
linear | 匀速 |
ease-in | 加速 |
ease-out | 减速 |
ease-in-out | 先加速 在减速 |
自定义~~~~~~ | |
transition-delay | 延迟时间 |
十一. 变形
<transform>
transform: 属性名 | 功能 |
---|---|
none | 不变形 |
rotate | 旋转 单位: deg角度 |
skew | 扭曲 单位: deg角度----90的奇数倍,都会扭成一条线 |
scale | 中心缩放 单位: num数字----1代表本身----->1 放大—<1 缩小 |
translate | 位移 单位: px |
十二 . 列表
list-style: none 取消项目符号 取消列表格式
十三. 鼠标样式
cursor
属性 cursor | 含义 |
---|---|
pointer | 手掌 |
text | 默认箭头 |
move | 移动,坐标 |
wait | 等待 |
none | 隐藏鼠标 |
十四.字体图标
阿里字体图标文件
1.导入css文件
通过link 导入图标文件
例: <link rel="stylesheet" href="./inconfont/iconfont.css">
2.给需要用字体的标签价class=iconfont即可
地址: http:www.icofont.cn/
3.自定义图标
@font-face{
font-family:‘自定义字体家族名’;
src: url(‘字体文件地址’);
}
css代码 效果没出现时: F12查看css
1.css代码并没有找到,此时你的选择器 可能没有选择
2.css代码没有找到,但是被杠掉了,此时你的css代码优先级可能比较低
盒子模型:
盒子常指向div 在不同浏览器中盒子的组成有所区别
IE浏览器: 内容覆盖内边距和边框 (外边距)
非IE浏览器: 内容+ 内边距+ 边框 (外边距)
详情查看: 可以通过 浏览器 F12
十五. 行块元素
在HTML中,本质只有两个标签: 行级元素 和 块级元素.
- 行级元素
- span,a,b,i,del,img…
- 不会独占一行
- 宽高 根据内容变化而变化
- 行高 水平内外边距 可以手动调整
- 容纳性: 只能容纳行级元素
- 块级元素
- div , p,h1~h6…
- 总是独占一行
- 宽度 默认与浏览器一致
- 高度 默认与内容一致
- 宽,高,行高,水平垂直,内外边距,都可以手动控制
- 容纳性:任何元素
十六. 内外边距 margin-padding
1. 外边距-margin
边框与外部元素之间的距离
margin: 10px 上下左右均10
margin: 10px 20px 上下10 左右20
margin: 10px 20px 30px 上10 左右20 下30
margin:10px 20px 30px 40px 上10 左20 下30 右40
单边外边距: margin - 方向
小技巧: 在父级元素里面水平居中
margin-left : auto;
margin-right : auto;
2. 内边距-padding
边框与内容之间的距离
padding: 10px 上下左右均10
padding: 10px 20px 上下10 左右20
padding: 10px 20px 30px 上10 左右20 下30
padding:10px 20px 30px 40px 上10 左20 下30 右40
单边内边距 : padding - 方向
十七. 定位 (position)
想要学好定位 ,先了解一下流 这个概念
流:
普通文档流: 当时在body书写的标签都默认属于文档流
定位流: 通过position将元素 脱离文档流…
任意一个定位,都会脱离文档流
position 定位方式 | 属性 | 位置 |
---|---|---|
absolute绝对定位 | left-right-top-bottom | 不会保留原来位置,基于第一页四个角落 |
relative相对定位 | left-right-top-bottom | 保留原来位置,基于原来位置的四个角落 |
fixed固定定位 | left-right-top-bottom | 不保留原来位置,基于当前可视窗口的四个角落 |
**定位技巧:**
父级元素使用: 相对定位
子级元素使用: 绝对定位
注意: 祖辈可以做任意定位,但是为了保护原有界面美观,不让后面的兄弟元素向上, 所以采用相对定位,保留原来位置.
十八. 定位优先级 z-index
当多个元素定位重叠时: 怎么区分?
使用: z-index: num数字
num数字越大, 优先级越高.
必须配合定位才能使用的属性.
十九. 浮动 float
-
浮动技术 主要是针对 块元素.
-
作用: 将块元素以横排方式排列
-
注意点: 不会保留原来的位置
-
浮动
float: left | right | none
-
清除浮动
cleat: left | right | both
清除浮动的技巧 1: 原理
在浮动元素的最后面,加上兄弟元素(空标签)
,并赋予clear属性,从而清除前面的浮动.
清除浮动的技巧 2: BFC
在浮动元素的父级,通过overflow:hidden,形成BFC区域,从而清除自己的浮动,BFC区域一旦形成,将不会影响到外界的元素
清除浮动的技巧 3: 推荐
在浮动元素的父级,通过以下代码清除自己的浮动
父级::after{
conternt: ’ ';
display:block; 将当前元素转为块元素
clear: both;
}
二十. 元素转换 display
display可以转换的 属性 | 功能 |
---|---|
block | 块级元素 |
inline | 行级元素 |
inline-block | 内联-块元素 |
none | 隐藏当前元素 |
table | 块级表格 |
table-cell | 块级td单元格 |
flex | 参考百度flex布局 |
visibility 可以转换的属性 | 功能 |
---|---|
hidden | 隐藏当前元素 (隐藏 , 占位) |
visible | 显示当前元素 |
二十一. css初始化
原因: 各大浏览器默认值都不相同,导致同样的代码,在不同浏览器中显示的效果会有差异.
解决方案: 自己别写css 统一各个浏览器默认值
必须初始化的一些
body{ 字体大小 背景颜色 字体家族 等等}
body,ul,ol,h1~h6{margin:0 padding:0}
li{list-style:none}
a{text-decoration:none}
a:hover{text-decoration: underline;}
二十二. 网页布局.
- div + css
- FLEX弹性盒子布局
- 响应式布局
- …
DIV + Css
先看行, 在看列
从上往下依次布局
先写大的, 在写小的