今天开始学习CSS了,简直就是传说中的CSS,CSS是个很神奇的东西,可以把一个网页由平淡无奇变得一鸣惊人,接下来我就分享一下今天学习的CSS知识
1.调整字体大小的4种方法
(1)用像素精准的规定字体的大小
font-size:14px;(2)用百分数表示字体应是另一个字体的相对大小
font-size:150%;一般这个参照对象是body的字体的大小,字体具有继承性,要修改也是在body的基础上
(3)用"em"指定比例因数,定义字体的大小
font-size:1.2em;这个参照也是body,和百分数的用法差不多,当要把字体缩小时,用 .5em就行了,前面不用加0
(4)用关键字的方法
font-size:small;一般body都是用关键字进行定义,因为每个浏览器都有自己的关键词标准,其他部分字体的大小就在body的基础上进行修改
2.定义颜色的3种方法
(1)用百分数表示三原色添加的比例
background-color:rgb(80%,40%,0%);rgb是red,green,blue的缩写,即上面的比例顺序是红色,绿色,蓝色
(2)用0~255间的数字表示添加比例
background-color:rgb(204,102,0);这种形式其实是将(1)中的百分比分别乘上250,得到的数就是对应的颜色值
(3)用十六进制表示颜色
这种方法是最常见的,因为这个方法很简单,真正有名字的颜色只有17种,而用十六进制表示可以表示160万种颜色
background-color:#cc6600;这里的#cc6600指的就是一种颜色,cc表示红色的占比,66表示绿色占比,00表示蓝色占比
计算的方法是cc=16*12+12=204
66=6*16+6=102
00=0*16+0
十六进制中的16个数对应的数字如下:
十六进制对应表 0123456789ABCDEF0123456789101112131415十六进制相对于十进制能表示更多的数
3.CSS盒模式
这是我从百度上找的图,其中padding:补白
content:内容区
border:边框
margin:边界
这个图看着可能有点儿不太理解,具体是这样的,补白和边界的区别是补白在边框里面,和内容区是一起的,而边界在边框的外面,除了内容区,其他部分都是可选的。可以将内容区,补白和边框看作是一个元素,因为在CSS中,将每个元素看成是一个盒子,结构都一样,而边界就是每个元素接壤的地方,不属于任何元素。
(1)设置补白的样式
padding: 25px;在左侧添加补白
padding: 80px;第二次添加补白会把第一次已经添加的覆盖掉
(2)加入背景图
background-img: url(图片的路径);这里的路径可以是相对路径也可以是绝对路径
设置背景图像的位置
background-position:top left;也可以用像素和百分比等进行设置
(3)设置边界的样式
margin: 30px; margin-right: 80px;(4)边框的样式
/*样式*/ border-style:groove; /*宽度*/ border-width: thin/medium/thick; /*颜色*/ border-color: red;样式有很多种,如
groove:像凹进页面里
solid:一条实线
double:两条线
outset:像页面凸出来一样
dotted:一系列的点
dashed:虚线
inset:嵌入到页面中
ridge:凸出的边界
宽度除了以上三种,还可以用像素直接表示
颜色和背景颜色一样,也有三种表示方法
4.使用多样式表
一个html可以链接多个css文件,这样是为了满足不同群体的需求,一般都是从上往下排列,最下面的优先权最高
<link>中的media属性可以定义应用样式表的设备类型
<link type="text/css" rel="stylesheet" href="lounge.css" media="screen" />这里的screen(屏幕)可以换成print(打印机)或handheld(小屏幕和有限信息速度的小设备)好了,今天的总结就到这儿了,有点儿多。
