一、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磅、pc1/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透明度
2381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
