2018.3.15自学笔记

xiaoxiao2021-02-28  55

今天开始学习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(小屏幕和有限信息速度的小设备)

好了,今天的总结就到这儿了,有点儿多。

转载请注明原文地址: https://www.6miu.com/read-2629528.html

最新回复(0)