一、CSS的介绍
CSS又名Cascading Style Sheets(层叠式样表)
用来定义页面元素的样式
- 设置字体的颜色
- 设置位置和大小
- 添加动画效果
eg:
h1{
color: white;
font-size: 14px;
}
表示给所有h1的代码段赋值属性color颜色和字体大小font-size。
属性+属性值=声明
其中:h1表示一个选择器
在页面中适用CSS的方法:
1.外链
<link rel="" href="/.css">
2.嵌入
<style>
h1{......}
li{........}
p{........}
</style>
3.内联
<p style="margin: lem 0">内容</p>
举一个例子:
</DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blog</title>
<style>
h1 {
color: orange;
font-size: 24px;
}
p {
color: gray;
font-size: 14px;
line-height: 1.8;
}
</style>
</head>
<body>
<h1> Web框架的架构模式探讨</h1>
<p>..........................</p>
</body>
<html>
在浏览器显示结果为:
注意!!如果在vscode里面运行html代码在浏览器打开后显示的还是源代码,可能是因为文件扩展名不是.html
CSS是如何工作的?
首先浏览器加载html文件,再解析html文件生成DOM树,如果html里面包含CSS,则加载并解析里面的CSS,并把样式添加到DOM树的节点上。最后展示页面。
二、CSS的基础选择器
什么是选择器Selector?
- 选择器是用来找出页面中的相关元素,以便给他们设置样式。
- 可以使用多种方式来选择元素
- 按照标签名、类名或id
- 按照属性
- 按照在DOM树中的位置
1.通配选择器:
*{
}
2.标签选择器
eg:
h1 {
}
3.id选择器
#id名{
}
注意!!这里的id名要是唯一的
4.类选择器(class)
.类别名{
}
5.属性选择器
eg:
<input value="zhao" disabled>
<style>
input[disabled]{
}
</style>
<p><a href="#top">回到顶部</a><p>
<p><a href="a.jpg">查看图片</a><p>
<style>
/*第一个选择器是属性以#开头的*/
a[href^="#"]{
}
/*第二个选择器是属性以jpg结尾的*/
a[href=$"jpg"] {
}
</style>
6.伪类选择器
伪类:
- 不基于标签和属性来定位元素
- 有动态伪类和结构伪类
如上所示,其中link
表示一个正常的链接;visited
表示一个访问过的链接;hover
表示鼠标放置时的链接;active
表示鼠标点击后的链接。
结构性选择器,是根据在页面中的位置来选择的,如下所示:
组合选择器:
eg:表示必须同时是Input框且属性里面class="erro"才会选中
input.erro {
}
选择器组:
eg:
body,h1,p.....{
}
三、CSS设置字体
1.字体 font-family
使用建议:
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前面
h1 {
font-family:Optima, Georgia, serif;
}
其中:serif
不是某种字体,而是通用字体符,以使浏览器一定能选到一种字体符
2.Web Fonts即浏览器中没有的字体
eg:
/*先声明某个web字体*/
@font-face {
font-family : 'web字体的名称';
src :url('/字体文件的url') format('字体文件的格式');
}
h1 {
font-family :web字体的名称、.....;
font-size: 40px;
}
3.设置字体大小:font-size
- 关键字 small、medium、large
- 长度 px(字体像素)、em
- 百分数 相对于父元素的字体大小
eg:
section {
font-size: 20px;
}
section h1 {
font-size: 2em;/*表示字体是父元素像素的2倍*/
}
section .note {
font-size: 80%;/*表示给section里面属性class=note的元素像素为section的80%*/
}
4.font-style
font-style:nomal
表示正常字体
font-style:italic
表示字体为斜体
5.font-weigth字重,即设置文字粗细
字重范围为100-900(间隔为100),不是每种字体都支持9中字重,浏览器根据自己支持的范围选择最接近的一种字重。
6.line-heigth设置行间距
h1 {
font-size: 20px;
line-heigth: 40px;
}
p {
font-size:20px;
line-heigth: 1.6;/*当只有数字时,表示行高在字体基础上乘以1.6*/
}
综上所述:上述的font设置可以同时设置,如下所示:
四、CSS设置文字样式
1.text-align 设置文字在容器中的对齐方式
left
左对齐
center
居中对齐
rigth
右对齐
justify
分散对齐,端对齐
2.spacing 调试字体间的距离
letter-spacing
:调节字母之间的距离
word-spacing
:调节单词间的距离
3.text-decoration 设置文字的修饰
none
没有任何修饰
underline
下划线
line-through
删除线
overline
上划线
4.white-space控制html里面的空格和换行
注意!!html里面默认会合并空格符和换行
normal
默认
nowrap
表示这一行中不会换行,但是会合并空格和换行符
pre
保留空格和换行,不会换行
pre-wrap
与pre类似,但是当一行放不下时,会自动换行
pre-line
合并空格,保留换行
5.text-shadow设置文字的阴影
text-shadow: color offset-x offset-y blur-radius
(阴影模糊程度);
五、盒模型设置
在浏览器中,会把每个像素格式化成一个个的盒子,每个盒子都有margin
(表示这个盒子与其他盒子的边距)、border
(表示边框)、padding
(表示盒子的内边距)、content
(表示实际内容的大小)四个属性
width:
- 表示content box的宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对于容器的content box的宽度
heigth:
- 指定content box的高度
- 取值为长度、百分数、auto
- auto的取值由内容计算得出
- 百分数是相对于容器的高度,且容器要有指定的高度时,百分数才生效
padding:
padding-left、rigth、top、bottom
- 可以利用padding属性同时设置四个方向的内边距
- 百分数是相对于容器的宽度
<div class="box1">爱吃兔子的大萝卜 ... </div>
<div class="box2">就是要吃小兔砸 ... </div>
<style>
div{
width: 200px;
text-align: justify;
margin-bottom: lem;
}
.box1 {
background: coral;
padding: 20px;
}
.box2 {
background: lightblue;
padding: 20px,40px;
}
</style>
结果显示如下图所示:
border:设置边框的样式border-style、粗细border-width和颜色border-color
none:没有边框
solid:表示实线边框
dashed:虚线边框
dotted:表示点状型边框
关于margin的相关设置:
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<style>
.a {
background: lightblue;
width:200px;
height:100px;
}
.b {
background: yellow;
width:200px;
height:100px;
margin-left: 50px;
margin-right: 50px;
}
.c {
background: green;
width: 100px;
height: 100px;
margin-top: -20px;
}
</style>
显示如下所示:
box-sizing
表示整个box的大小,当box-sizing:border-box
时,表示这个大小包含border
当内容多余容器时会溢出,此时使用overflow
overflow:visible
(默认选项,表示虽然内容溢出容器范围,但是内容都是可见的),hidden
(表示溢出的内容不可见),scroll
(表示设置滚卷条,溢出的内容可以滚动滚卷条来显示)
六、CSS中的盒子
1.DOM树
- 根据DOM树生成盒子
- layout摆放盒子
- 盒子的尺寸和类型
- 定位模式
- 节点在DOM树中的位置
- 其他信息,如:窗口大小、图片大小等
七、盒子的效果
1.border-radius
:设置框圆角,数字为圆角半径
(注意!!也不一定是正圆,可以是椭圆,eg:20px/50px,分别设置圆角水平和垂直的半径,或则使用百分比,即水平方向的半径是width的百分之多少、垂直方向的半径是hegith的百分之多少)
2.background
:背景
- background-color:颜色
- background-image:URL
- background-repeat(表示背景图片是否重复平铺):no-repeat,repeat,repeat-x,repeat-y
- background-position(背景图的位置)
- background-size(背景图的大小)
box-shadow(
盒子的阴影):水平、垂直方向的偏移、阴影模糊程度、阴影扩张的大小、阴影的颜色
注意!!阴影不会占用实际的大小
八、行高和垂直对齐
九、CSS的继承
选择器的优先级是根据特殊性决定的:id100+类10+元素*1(个数)
继承:CSS里面的元素会自动继承其父元素的计算值,除非显示指定一个值。
注意!!每个属性都有一个初始值。
十、CSS的值和单位
1.长度
绝对长度:px
像素点、in
英寸、cm
厘米、mm
毫米、pt
磅、pc
1/6英寸
相对长度:em
表示相对元素字体大小、rem
html字体(根元素)大小、vh
1%窗口高、vw
1%窗口宽、vmax
vw和vh中较大者、vmin
vw和vh中较小者
2.颜色
用rgb表示,表示方法:
#000000 (十六进制)
rgb(0,0,0)
用hsl表示:
H(Hue):色相
S(Saturation):饱和度
L(Lightness):亮度
用keyword表示:
即:yellow、blue
a:alpha透明度