您现在的位置是：课程
CSS入门视频教程
2023-07-03 15:23课程 人已围观
加入官方qq群：168194553免费答疑
一、CSS
1、概述
级联样式表/层叠样式表（cascading style sheet）
美化网页，定义网页外观
2、语法
选择器{
样式属性名1:样式属性值;
样式属性名2:样式属性值;
样式属性名3:样式属性值;
...
}
3、选择器
a)元素/标签选择器 A
通过标签名来选择
b)类选择 .class
通过标签的class属性值来选择
<div class="a b c">
.a{
}
.a.b{
}
c)儿子选择器 A>B
选择A下面的B
d）后台选择器A B
选择A下面的所有B
e）id选择器 #id
通过标签的id属性值来选择
f）通用选择器 *
*{
margin：0
padding：0；
}
g）兄弟选择器 A+B
选择所有A后面的B
h)伪元素选择器 ::
::after
::before
i）伪类选择器 :
:hover
:active
:link
:visited
:focus
:nth-child(n)
j)属性选择器 []
a[href]
a[href="xxx"]
css选择器优先级
行内样式 1000
id选择器 100
类选择器或伪类选择器或属性选择器 10
元素选择器或伪元素选择器 1
忽略通用选择器
UL OL+LI =3
H1 + *[REL=up] =11
UL OL LI.red =13
LI.red.level =21
#x34y =100
#s12:not(FOO) =101
div{
background:red !important;
}
4、单位
长度：
px 像素
em 元素当前字体大小
颜色：
颜色名称
red green blue white black gray yellow
RGB
#fff #f00
RRGGBB
#FFFFFf #FF0000
rgb(255,255,255)
rgba(255,255,255,0.5)
HSL(120,65%,75%)
HSLA(色调，饱和度，亮度，α)
transparent 透明
5、网页应用样式
a）内部样式
在<head>标签中使用<style>,把css写在其中
b）外部样式
把样式表写到.css文件，然后<link rel="stylesheet" href="xx.css">
c)行内样式
<div style="width:100px;height:100px" style="width:100px;height:100px">
6、层叠的含义
优先级从底到高
1）浏览器默认样式
2）用户设置的样式
3）外部样式
4）内部样式
5）行内样式
二、样式属性分类
1、边框
border:宽度 类型 颜色
border-width:
border-style: 类型:solid/dotted/none
border-color:
border-top:
border-top-style:
border-top-width:
border-top-color:
border-bottom:
border-left:
border-right:
2、背景
background
background-color:颜色
background-image:url(图片路径)
background-repeat:
background-position:
background-size：
3、盒子模型（box-model）
box-sizing:
content-box(默认值)
width/height=内容的高宽
所占区域=width+padding+border+margin
border-box
width/height=内容的高宽+内边距+边框
所占区域=width+margin
margin 外边距
padding 内边距
padding:
1px;(上1右1下1左1)
1px 2px;(上1右2下1左2)
1px 2px 3px;(上1右2下3左2)
1px 2px 3px 4px;(上1右2下3左4)
padding-top
padding-bottom
padding-left
padding-right
max-width
min-width
max-height
min-height
4、文本字体
font:
font-style:italic/normal
font-weight:bold/normal
font-size/line-height:12px/行高
font-family:字体
color:字体颜色
text-align:left/right/center/justify
text-decoration:underline/line-through/overline/none
text-indent:2em
white-space：规定如何处理元素中的空白pre/nowrap
text-overflow：ellipsis/clip/自定义
5、表格和列表
border-collapse:sperated/collapse
border-spacing:12px
table-layout:fixed/auto
list-style:none
list-style-position:inside/outside
list-style-image:
list-style-type:none/...
6、定位
position:
static(静态定位默认值)
块级元素从上到下依次摆放，行级元素从左到右依次摆放
relative(相对定位)
相对于其静态定位的位置，通过left/right/top/bottom进行偏移
fixed（固定定位）
相对于浏览器左上角为原点，通过left/right/top/bottom进行偏移
absolute（绝对定位）
相对于找到的第一个非静态定位的父元素，通过left/right/top/bottom进行偏移
如果未找到，则相对于浏览器浏览器左上角
float:left/right/none
如果碰到父容器的边界或其他浮动元素，就停止
clear：left/right/both/none 清理浮动
overflow:hidden/visible/scroll/auto
7、块级元素和行级元素
块级元素：（所有的分组分区标签，列表标签）
宽度充满父元素内容空间，高度为自适应
行级元素：（所有文本格式化标签）
高宽都是自适应，无法通过width/height来设置高宽
无法设置上下外边距
8、布局属性
display:
block
inline
inline-block 本身按照行级元素渲染，但内容按照块级元素
table/inline-table
table-cell
none
list-item
visibility:visible/hidden
9、居中
水平居中
行级元素：text-align：center
块级元素：margin-left:auto;margin-right:auto;设置width
垂直居中
行级元素
单行文本
line-height：确定值
多行文本（块级元素）
背景图片：
backround-position:center center
块级元素:
父容器：display：table
子容器：display：table-cell
10、其他样式
cursor:pointer/move/default/wait/text/help
outline:1px solid black;
opacity(不透明度):0-1
clip:rect(0px 50px 200px 0px)
一、CSS
1、概述
级联样式表/层叠样式表（cascading style sheet）
美化网页，定义网页外观
2、语法
选择器{
样式属性名1:样式属性值;
样式属性名2:样式属性值;
样式属性名3:样式属性值;
...
}
3、选择器
a)元素/标签选择器 A
通过标签名来选择
b)类选择 .class
通过标签的class属性值来选择
<div class="a b c">
.a{
}
.a.b{
}
c)儿子选择器 A>B
选择A下面的B
d）后台选择器A B
选择A下面的所有B
e）id选择器 #id
通过标签的id属性值来选择
f）通用选择器 *
*{
margin：0
padding：0；
}
g）兄弟选择器 A+B
选择所有A后面的B
h)伪元素选择器 ::
::after
::before
i）伪类选择器 :
:hover
:active
:link
:visited
:focus
:nth-child(n)
j)属性选择器 []
a[href]
a[href="xxx"]
css选择器优先级
行内样式 1000
id选择器 100
类选择器或伪类选择器或属性选择器 10
元素选择器或伪元素选择器 1
忽略通用选择器
UL OL+LI =3
H1 + *[REL=up] =11
UL OL LI.red =13
LI.red.level =21
#x34y =100
#s12:not(FOO) =101
div{
background:red !important;
}
4、单位
长度：
px 像素
em 元素当前字体大小
颜色：
颜色名称
red green blue white black gray yellow
RGB
#fff #f00
RRGGBB
#FFFFFf #FF0000
rgb(255,255,255)
rgba(255,255,255,0.5)
HSL(120,65%,75%)
HSLA(色调，饱和度，亮度，α)
transparent 透明
5、网页应用样式
a）内部样式
在<head>标签中使用<style>,把css写在其中
b）外部样式
把样式表写到.css文件，然后<link rel="stylesheet" href="xx.css">
c)行内样式
<div style="width:100px;height:100px" style="width:100px;height:100px">
6、层叠的含义
优先级从底到高
1）浏览器默认样式
2）用户设置的样式
3）外部样式
4）内部样式
5）行内样式
二、样式属性分类
1、边框
border:宽度 类型 颜色
border-width:
border-style: 类型:solid/dotted/none
border-color:
border-top:
border-top-style:
border-top-width:
border-top-color:
border-bottom:
border-left:
border-right:
2、背景
background
background-color:颜色
background-image:url(图片路径)
background-repeat:
background-position:
background-size：
3、盒子模型（box-model）
box-sizing:
content-box(默认值)
width/height=内容的高宽
所占区域=width+padding+border+margin
border-box
width/height=内容的高宽+内边距+边框
所占区域=width+margin
margin 外边距
padding 内边距
padding:
1px;(上1右1下1左1)
1px 2px;(上1右2下1左2)
1px 2px 3px;(上1右2下3左2)
1px 2px 3px 4px;(上1右2下3左4)
padding-top
padding-bottom
padding-left
padding-right
max-width
min-width
max-height
min-height
4、文本字体
font:
font-style:italic/normal
font-weight:bold/normal
font-size/line-height:12px/行高
font-family:字体
color:字体颜色
text-align:left/right/center/justify
text-decoration:underline/line-through/overline/none
text-indent:2em
white-space：规定如何处理元素中的空白pre/nowrap
text-overflow：ellipsis/clip/自定义
5、表格和列表
border-collapse:sperated/collapse
border-spacing:12px
table-layout:fixed/auto
list-style:none
list-style-position:inside/outside
list-style-image:
list-style-type:none/...
6、定位
position:
static(静态定位默认值)
块级元素从上到下依次摆放，行级元素从左到右依次摆放
relative(相对定位)
相对于其静态定位的位置，通过left/right/top/bottom进行偏移
fixed（固定定位）
相对于浏览器左上角为原点，通过left/right/top/bottom进行偏移
absolute（绝对定位）
相对于找到的第一个非静态定位的父元素，通过left/right/top/bottom进行偏移
如果未找到，则相对于浏览器浏览器左上角
float:left/right/none
如果碰到父容器的边界或其他浮动元素，就停止
clear：left/right/both/none 清理浮动
overflow:hidden/visible/scroll/auto
7、块级元素和行级元素
块级元素：（所有的分组分区标签，列表标签）
宽度充满父元素内容空间，高度为自适应
行级元素：（所有文本格式化标签）
高宽都是自适应，无法通过width/height来设置高宽
无法设置上下外边距
8、布局属性
display:
block
inline
inline-block 本身按照行级元素渲染，但内容按照块级元素
table/inline-table
table-cell
none
list-item
visibility:visible/hidden
9、居中
水平居中
行级元素：text-align：center
块级元素：margin-left:auto;margin-right:auto;设置width
垂直居中
行级元素
单行文本
line-height：确定值
多行文本（块级元素）
背景图片：
backround-position:center center
块级元素:
父容器：display：table
子容器：display：table-cell
10、其他样式
cursor:pointer/move/default/wait/text/help
outline:1px solid black;
opacity(不透明度):0-1
clip:rect(0px 50px 200px 0px)
上一篇：10个案例了解H5之地理定位
下一篇：前端NEXT十天训练营 直播课
