一、什么是css?
css(cascading style sheet)层叠样式表,是一个用于修饰文档(可以是标记语言HTML,也可以是XML)的语言,可以将文档以更优雅的形式呈现给用户。(css不能脱离html而单独存在)
二、语法
1、属性的设置
属性名和属性值之间用冒号分隔
多对属性之间用分号分割
最后一对属性可以不加分号
(1、)style
<div style="width:100px;height:100px;backgroundcolor:red"></div>
(2、)其他
代码块
选择器{
width:100px;
height:100px;
backgroundcolor:red
}
2、注释
(1、)写法
/* 注释内容* /
(2、)作用:增加代码的可读性,有利于代码的维护和管理。
(3、)注意
注释不能嵌套使用
3、速记写法
简写形式
padding-top:10px//上边距10px
padding-bottom:10px//下边距10px
padding-right:10px//右边距10px
padding-left:10px//左编剧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-top
margin-left
margin-right
margin-bottom
注:margin简写形式同padding
margin:0 auto//设置给具有宽度的块级元素时,元素可以在父元素中自动居中
border属性简写:
border:1px solid red;//表示上下左右四个边框的样式都为:宽1px,实线,红色
也可以分别设置,如:
border-top-width:1px;//上边框宽1px
border-top-style:solid;//上边框为实线
border-top-color:red;//上边框颜色为红色
三、css如何作用到html上?
1、行内样式
写在标签内部的style属性上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 100px;height:100px;background-color: lightcoral;">
</div>
</body>
</html>
2、内嵌式/内部样式表
在head内部使用style标签设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3、外部样式表(建议使用)
当前html文件外部,创建一个后缀名为.css文件。
3.1>link标签
建议使用link标签
优先加载html
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div></div>
</body>
</html>
css代码:(改代码为style.css文件)
div{
width: 100px;
height: 100px;
background-color: aliceblue;
}
3.2>@import属性
< style >
@import url('style.css');
< /style >
注: 优先加载css
优先级:
行内样式>内嵌式=外部引入
结论:
就近原则:哪一个样式离html近,谁的优先级就高。
四、选择器
标签选择器:
通过标签名称选择一类元素
div{}
span{}
id选择器:
通过id属性选择一个元素
类选择器:
class:通过class属性选择一类元素
.one相当于class='one'。
普遍选择器:
* 选择所有
在style属性里面设置:
*{
margin:0px;
padding:0px;
}
可解决外边距合并的问题
后代选择器:
空格:选择所有的后代元素
>:选择直接子元素
兄弟选择器:
+:选择当前元素之后的一个兄弟元素
~:选择当前元素之后的所有兄弟元素
组合选择器:
div #one .class
div#one
div.one
多选择器:
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(作为父元素的最后一个孩子)
:only-child:(只有一个孩子)
:nth-child(num/odd/even)
:first-of-type
:first-of-type
a:
:link :未点击状态
:hover:悬停状态
:active:鼠标按下状态
:visited:点击之后的状态
link->visited->hover->active
伪元素选择器:
::伪元素名称
::first-letter
::first-line
::before
content:''/url()
::after
::selection
五、选择器优先级
!import://不计入优先级的计算,优先级最高
建议少用
特殊值的计算:
特性值越高,优先级越高;
特性值相同,谁靠近html,谁的优先级越高
写在style属性内部:
1000
id选择器:
100
类/伪类/属性:
10
标签/伪元素:
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{/* number=1 */
width: 200px;
height: 200px;
background-color: blue;
}
#one{/* number=100 */
background-color: red
}
.one{/* number=10 */
background-color: pink
}
[id='one']{/* number=10 */
background-color: orange
}
div.one{/* number=1+10=11 */
background-color: purple
}
div#one{/* number=1+100=101 */
background-color: green
}
body div.one{/* number=1+1+10=12 */
background-color: yellow
}
</style>
</head>
<body>
<div class="one" id="one"></div>
</body>
</html>
六、继承
1、有些默认继承父元素
有些不继承
2、属性
1)inheit继承父元素的样式
2)initial 不继承,应用浏览器的默认样式
七、尺寸+颜色+单位
尺寸: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:灰色
…
八、文本样式
✔ color:为字体指定颜色
✔ font-size:为字体指定大小
✔ font-style:用于打开和关闭斜体文本(子元素默认继承)
normal:[默认],正常字体,关闭斜体
italic:斜体
oblique:模拟斜体
✔ font-weight:为字体设置粗细程度
normal:[默认],正常,400
bold:加粗字体,700
lighter:设置当前元素字体比父元素更细
bolder:设置当前元素字体比父元素更粗
100-900:数值类型,越大越粗
✔ text-align:文字排列方式(子元素默认继承)
left:左对齐
center:居中
right:右对齐
✔ text-decoration:设置或取消文本修饰
none 取消所有文本修饰
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
✔ text-transform:设置或取消字体改变
none:防止任何改变
uppercase:将文本转化为大写
lowercase:将文本转化为小写
capitalize:将所有单词第一个字母转化为大写
full-width:转化为类似于一个等宽字体
✔ text-shadow:设置或取消文本阴影
语法:
text-shadow: h-shadow v-shadow blur color;
取值:
none 取消所有阴影
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色。参阅 CSS 颜色值
✔ overflow:溢出处理
hidden:超出部分隐藏
auto:超出产生滚动条
scroll:滚动条
✔ font-family:为字体指定特殊字体,浏览器只会使用可以访问到的字体
web-font:网络字体
1、下载字体文件
2、声明字体
安装
3、引用
字体图标:
1、font-awesome
1、下载框架压缩包
2、在html中引入外部css文件
3、在行内元素上,设置class='fa fa-xxx'
2、icon-font
1、下载压缩包
2、在html中引入外部css文件
3、在行内元素上,设置class=‘iconfont’
✔ letter-spacing:设置字符之间的间距
✔ word-spacing:设置单词之间的间距
✔ width:
min-width:最小宽度
max-width:最大宽度
✔height:
min-height:最小高度
max-height:最大高度
✔ 设置元素的隐藏和显示
display:
none:元素的隐藏
不但隐藏元素本身,还会隐藏元素所占据的空间
block:元素的显示
visibility:
hidden:元素的隐藏
只隐藏元素,不隐藏元素所占用的空间
visible:元素的显示
✔ 表格样式:
border-collapse:collpase;//表格边框合并(该属性设置给table)
caption-side:bottom//表格标题位置(该属性设置给table)
✔ 列表样式:
list-style-type:设置列表选项标志类型
none:取消标志
disc:实心圆
circle:空心圆
square:实心正方形
decimal:
lower-roman:
upper-roman:
decimal-leading-zero:
list-style-position:设置标题选项出现的位置
outside:列表选项标志出现在主块框的外部
inside:列表选项标志出现在主块框的内部
list-style-imge:url('./xxx.png')
line-height:垂直居中
text-align:水平居中
八、盒子
1、盒子的组合
盒子=内容+内边距+边框+外边距
盒子的高度=内容+内边距+边框
盒子所占空间高度=内容+内边距+边框+外边距
2、盒子分类
1、标准盒子/w3c盒子
默认都是标准盒子
特点:
设置的宽高属性-》设置给元素内容的
box-sizing:content-box;
2、边框盒子/怪异盒子
box-sizing:border-box
特点:
宽高属性-》盒子:内容+内边距+边框