笔记4-7-11
1.Css基础知识
1.1基本概念
css指层叠样式表(Cascading Style Sheets )
为什么需要css
HTML描述了需要呈现的内容,二而css则定义了这些内容的呈现形式,比如字体,颜色等。使用css能够将页面内容和呈现形式有效分离,有利于分工合作,也有利于快速更换不同的呈现形式。
使用样式表可以有三种方式:
(1).内联样式
<p style="color: green;font-size: 90px">外部演示文件</p>
<p style="color: green;font-size: 90px"> 外部演示文件 </p>
将样式表定义在style属性中
内容与表现形式高度耦合,维护困难,不利于分工合作
(2).内部样式
<style>
k{
color: green;
font-size: 90px;
}
</style>
<k>外部演示文件2</k>
一般写在对应的html文件中,降低了耦合性,但是维护也比较困难
(3).外部样式
<p style="color: green;font-size: 90px">外部演示文件</p>
css中也可以使用注释,形式为/*、。。。。*/
然后在需要使用的这些样式的html文件引入改样式表文件
<link rel="stylesheet" type="text/css" href="css/EX-01.css"/>
外部样式表使得内容和表现形式彻底分离,有利于分工合作集维护。可以在多个html中使用。
*内联样式的权利>内部样式的权利>外部样式的权利,这与正常的逻辑一样
1.2 颜色
所有的颜色都有可以有红色,蓝色,绿色三色调配而成,所以称为三原色
Css中有多种颜色表示形式:
(1)十六进制形式:
css中用8表示颜色,那么可以表示28种颜色,即256中颜色,所以总共可以表示256*256*256中颜色
<p style="color: purple">十六进制</p>
(1)RBG形式
<p style="color: RGB(255,0,0)">RGB进制</p>
(2)RGBA形式
在RGB颜色的基础之上增加了透明度分量(alpha),该分量的取值在0到1之间,0代表没有颜色
<p style="color: RGBA(255,0,0,1)">RGBA进制</p>
(3)HSL颜色
颜色可以由另外的分量来表示,即色调,饱和度和明度。
<p style="color: HSL(100,60%,80%)">HSL进制</p>
(4)HSLA颜色
颜色可以由另外的分量来表示,即色调,饱和度和明度,也可以使用a太调整透明度,与RGBA一样。
<p style="color: HSLA(100,60%,80%,0.2)">HSLA进制</p>
(5)预定义颜色
Css提供了一些预定义的颜色,你可以直接调用颜色名字来。
<p style="color: pink">预定义颜色表现形式</p>
1.3尺寸单位
cm:厘米
cm:毫米
in:英寸,inch
px:像素,pixel
%:百分比
em vw vh(自学)
绝对单位:px,in,cm,mm
相对单位:%,em,vh,vw
1.Em,使用格式:
首先需要在css中定义以下代码
html {
font-size: 100%;
}
body {
font-size: 1em;
}
#wrap {
font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/
width: 14.2857em;/*1 ÷ 14 × 200 = 14.2857em值*/
height: 7.1429em;/*1 ÷ 14 × 100 = 7.1429em值*/
border: 0.357em solid red;/*1 ÷ 14 × 5 = 0.357em值*/
margin: 1.071em;/*1 ÷ 14 × 15 = 1.071em值*/
padding: 0.714em;/*1 ÷ 14 × 10 = 0.714em值*/
line-height: 1.2857em;/*1 ÷ 14 × 18 = 1.2857em值*/
}
然后在js中先书写链接,是其连接到css中,使用是在标签的里面添加id,使id=”**”,该星号代表了css中#后面的名字
<div id="wrap">
<p>郑志福</p>
<p>熊凯文</p>
</div>
2.Vw
指的是viewpoint width,视窗宽度,1vw等于视窗宽度的1%,与vh很相似
<style>
p{
font-size: 3vw;
}
</style>
反正感觉没啥,就是变大了;视初始的为1,3vw就是把视窗宽度原来的放大到3倍
3.Vh
指的是viewpoint height,视窗高度,1vh等于视窗高度的1%,与vw很相似
<style>
p{
font-size: 3vh;
}
</style>
这个就不太清楚了,有变大,但是没有那么大,应该是把视窗高度原来的放大到3倍
我放大到10倍左右,粗略的计算了下,再根据字义,应该是这样了
2.基础属性
属性名:属性值
Background:red;
p{
font-size: 10vh;
}
2.1字体相关属性
Font-family:字体名称
Font-size:字体大小
Font-style:字体的样式
Font-variable:字体变量
Font-weight:字体粗细
<
style>
div{
font-family: 楷体;
font-size: 32px;
font-style: italic;
font-variant: all-small-caps;
font-weight: 100;
}
</style>
可以简写:
Font-style Font-variable Font-weight Font-size Font-family
<Style>
Div{
font: all-small-caps 100 48px 楷体;
}
</style>
前三个可以不写,后面必须写,减少了代码,简洁
2.2文本相关属性
文本相关属性主要包括颜色、对齐方式、修饰效果
1.Color:设置文本颜色
2.Text-decoration:
1) None 无
2) Underline 下划线
3) Overline 上划线
4) Line-through 删除线
3.Text-shadow:增加阴影,可以往任何方向投射,正正,阴影在右下
Text-shadow:5px 5px #0000ff;
4.Direction:方向,分别是从左往右(ltr)、从右往左(rtl)
5.Text-align:对齐方式
Left:左对齐;right:右对齐;center:居中对齐;justify:两端对齐
6.Vertical-align:文本垂直对齐方式
Top:靠上;middle:中间:button:靠下
7.Text-indent:文本缩进
8.Letter-spacing:字母间距,就是单词里面的字之间的间距
9.Word-spacing:字间距,字与字的间距,单词也属于字
10.Line-height:设置行高,实际上是调整行间距