1.什么是css?
cascading style sheet(层叠样式表)的缩写
css不能脱离html而单独存在
2.语法
1.属性的设置
1.用法:
属性名和属性值之间使用冒号分割
多对属性之间使用分号分割
最后一对属性可以不加分号
2.表示方法:
<1>.style
<div style="width:100px;height:100px;background-color:red"></div>
<2>.其他
代码块
选择器{
width:100px;
height:100px;
background-color:red;
}
2.注释
1.写法
/*注释内容*/
2.作用
提升代码的可读性,便于代码的维护和管理。
3.注意
注释不能嵌套使用
<!--outer
<!--inner-->
-->
/*
outer
/*inner*/
*/
3.速记写法(简写形式)
top
bottom
left
right
padding-top:10px
padding-left:10px
padding-right:10px
padding-bottom:10px
速记写法:
padding:10px;//上下左右均为10px
padding:10px 20px;//上下10px 左右20px
padding:10px 20px 30px;//上10px 左右20px 下30px
padding:10px 20px 30px 40px;//上 右 下 左分别为10px 20px
30px 40px
注: margin和padding速记写法表示方式相同
margin:0 auto;//设置给具有宽度的块级元素时,元素可以在父元素中自动居中
例:
border-top-width:
border-top-style:
border-top-color:
……
12行可以简写为:border:1px solid red
3.css可以怎样作用到html上?
1.行内样式
写在标签内部的style属性上
2.内嵌式/内部样式表
在head内部使用style标签设置
3.外部样式表(建议使用)
在当前html文件外部,创建一个css文件
.css为文件后缀名
然后使用以下两种方法中的一个把css作用在html上
<1>link标签(建议使用)
优先加载html
<2>@import属性
优先加载css
优先级:
行内样式>内嵌式=外部引入
结论:
就近原则:哪一个样式距离html元素更近,哪个样式的优先级更高
4.选择器
标签选择器:
通过标签名称选择一类元素
div{}
span{}
p{}
id选择器:
通过id属性选择一个元素
#one的意思是id=one
类选择器:
class:通过class属性选择一类元素
.one的意思是class='one'
普遍选择器:
*选择所有
后代选择器:
空格:选择所有后代元素
>:选择直接子元素
兄弟选择器:
+:选择当前元素之后的一个兄弟元素
~:选择当前元素之后的所有兄弟元素
组合选择器:
div #one .one
div#one
div.one
div.one p 最终选择的是p
多选择器:
div,p,span,#one,.one{
}
属性选择器:
根据元素的属性选择一类元素
[id]:具有id属性的
[id='one']:具有id属性,属性值为one的
[class~='one']:具有class属性,并且属性值之一为one的元素
[class^='o']:具有class属性,并且属性值以o开头
[class$='o']:具有class属性,并且属性值以o结尾
[class*='o']:具有class属性,并且属性值中包含o字符的
伪类选择器:
div class="one"
.one(真的类的写法)
:伪类名称(伪类的写法)
:first-child
:last-child
:nth-child(num/odd/even)
:first-of-type:(某一个类型的第一个)
:last-of-type:
a:
:link:未点击状态
:hover:悬停状态
:active:鼠标按下状态
:visited:点击之后的状态
顺序应该为:link->visited->hover->active
伪元素选择器:
::伪元素名称(伪元素选择器的写法)
::first-letter
::first-line
::before
content:''/url()
::after
::selection
5.选择器优先级
!important;//不计入优先级的计算,优先级最高,建议少用。
特性值的计算:
特性值越高,优先级越高;
特性值相同,谁更靠近html,谁的优先级越高
写在style属性内部:1000
id选择器:100
类/伪类/属性 10
标签/伪元素: 1
6.继承
1.有些默认继承父元素,有些不继承
2.属性
1>inherit 继承父元素的样式
2>initial 不继承,应用浏览器的默认样式
7.尺寸+颜色+单位
尺寸:
1>绝对单位 px
2>相对单位 %
1em~1个M的宽度(16px)
颜色:
1>关键字
red
blue
2>rgb(r,g,b)
r:red
g:green
b:blue
0-255
3>rgba(r,g,b,a)
a:apcaity:透明度0-1:
0:完全透明
1:完全不透明
4>16进制颜色值
#
#ff0000
#fff:白色
#ccc:灰色
....
8.文本样式
color:
c:/winodws/Fonts
c:/users/Fonts
font-family:""
web-font:网络字体
1.下载字体文件
2.声明字体 安装
3.引用
<div class="one">
.one{
width:100px;
}
.myone{
width:100px;
}
<div class="myone">
字体图标:
1.font-awesome
1.下载框架压缩包
2.在html中引入外部css文件
3.在行内元素上,设置class='fa fa-xxx'
2.icon-font
1.下载压缩包
2.在html中引入外部css文件
3.在行内元素上,设置class='iconfont xxxx'
text-align:
text-transform:
text-decoration:none
text-shadow:x y blur color
letter-spacing:
word-spacing:
width:
min-width
max-width
height
overflow:设置超出元素部分的展示形式
hidden:超出部分隐藏
scroll:超出部分以滚动条形式展示
元素的隐藏和显示:
display:
none:元素的隐藏 不但隐藏元素本身,还会隐藏元素所占据的空间
block:元素的显示
visibility:
hidden:元素的隐藏 只隐藏元素,不隐藏元素所占用的空间
visible:元素的显示
表格样式:
border-collapse: collapse;//表格边框合并
caption-side: bottom//表格标题位置
列表样式:
list-style:
line-height:
9.盒子
1.盒子的组成
盒子=内容+内边距+边框+外边距
盒子的高度=内容+内边距+边框
盒子所占空间高度=内容+内边距+边框+外边距
2.盒子分类
(1)标准盒子/w3c盒子 默认都是标准盒子
特点:设置的宽高属性-》设置给元素内容的
box-sizing:content-box;
(2)边框盒子/怪异盒子
特点:宽高属性-》盒子:内容+内边距+边框
背景样式设置:background
边框样式设置: border:1px solid red
10.布局
默认文档流:
所有元素根据本身特性在浏览器页面中进行的排序 从上到下 从左到右
布局规则:
先进行行级布局,再进行列级布局
1.display
inline:将块级元素转换为行内元素
block:将行内元素转换为块级元素
inline-block:将元素转换为兼具行内和块级特性的元素(既可以在一行中显示,又可以设置宽高)
2.浮动
特点:不会遮盖文本和行内元素
float:
none
left
right
对元素的影响:
对块级元素设置浮动,块级元素可以在一行中显示,宽度由元素内容撑起
对行内元素设置浮动,可以直接设置宽高属性
浮动何时停止?
1.遇到父元素边框
2.遇到其他浮动元素
浮动元素不遮挡文字和行内元素
1.如果浮动属性设置给块级元素 块级元素可以在一行中显示
2.如果浮动属性设置给行内元素 行内元素可以设置宽高
清除浮动:
clear:
left
right
both
1.给浮动元素和非浮动元素之间添加一个块级元素clear
2.给所有浮动元素的父元素设置
::after{
display:block;
content:'';
clear:left/right/both
}
3.定位布局
position:
static:静态布局(默认文档流)
absolute:绝对定位
特点:
1.脱离默认文档流
2.默认根据body左上角进行定位
3.不保留定位前空间
4.如果父元素具有定位属性时,根据父元素左上角进行定位
relative:相对定位
特点:
1.不脱离默认文档流
2.默认根据元素本身位置进行定位
3.保留定位前空间
fixed:固定定位
固定定位的特点和绝对定位相似
使用了固定定位的元素,不会跟着滚动条的滚动而滚动
sticky:粘滞定位
当没有到达定位地点时,采用relative定位
当到达定位地点时,采用fixed定位
配合属性:
top
left
right
bottom
z-index:改变元素的堆叠顺序(设置给两个使用了absolute定位的元素)
属性值number,number值越大,越靠上
4.伸缩盒(弹性盒)
父元素:
display:
flex;//设置当前盒子为弹性盒子
1.所有子元素自动成为成员项item
2.子元素宽高尺寸超过父元素时,默认被压缩
3.所有子元素的float属性失效
flex-direction: row;设置子元素的显示位置
flex-wrap: wrap//子元素宽度超出父元素是否换行
align-items:
子元素:
flex:number;//当前子元素占据父元素剩余空间的份数