HTML5&CSS一些小知识



欢迎传送下个人网站本篇文章

下午无聊,做了一遍W3school中的html5&css实战题目,在这里归纳一些用到的小知识点。

关于引入Google字体

一个好看的字体:font-family: Lobster;

在所有浏览器中都有几种可用的默认字体。这些包括 Monospace 、Serif 和 Sans-Serif。

关于后两种字体的区别,看到一篇文章,附上链接:Serif和Sans-serif字体的区别

当某种字体不可用时,你可以让浏览器将其 “降级” 为另一种字体。

 

单选按钮是 input 输入框的一种类型。

每个单选按钮都应该嵌套在自己的 label(标签) 元素中。

所有关联的单选按钮应具有相同的 name 属性。

复选按钮是 input 的输入框的一种类型。

每一个复选按钮都应嵌套在其自己的 label元素中。

所有关联的复选按钮输入应该具有相同的 name属性。

所有复选按钮的name属性必须为personality

使用 checked 属性,你可以设置一个单选框和复选框默认被选中。

只需在 input 元素中添加属性checked 。例如:

checked>

关于id属性的一个很酷的事情是,像类选择器一样,你可以使用CSS来设计样式。

以下是一个示例,说明如何使用 cat-photo-element 的id属性来获取元素 ,并设置背景颜色为绿色。在你的style 元素中:

#cat-photo-element {
background-color: green;
}

有三个重要的属性控制每个HTML元素的布局:padding(内边距)、margin(外边距)、border(边框)。

元素的 padding 控制元素与其边框 border 之间的距离。

元素的 margin (外边距)控制元素 border (边框)和周围元素实际所占空间的距离。

如果将一个元素的 margin 设置为负值,则元素将会变大。

有时你将需要自定义一个元素,使它的每一个边具有不同的 padding。

CSS 允许使用 padding-top、padding-right、padding-bottom 和 padding-left属性来控制元素四个方向的 padding。

有时你将需要自定义一个元素,使它的每一个边具有不同的 margin。

CSS 允许使用 margin-top、margin-right、margin-bottom 和 margin-left 属性来控制元素四个方向的margin。

除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外,你还可以集中起来指定它们,如下所示:

padding: 10px 20px 10px 20px;(注意只有在最后写封号)

这四个值以顺时针方式排列:顶部、右侧、底部、左侧,简称:上右下左。

常用!!!

margin一样四个值以顺时针方式排列。

 

浏览器是从上到下读取CSS。这意味着,如果发生冲突,浏览器将使用最后的任何CSS声明。

id属性始终是具有更高的优先级。

id 声明都会覆盖 class 声明,不管它在你的 style 元素 CSS 的哪个位置进行声明。

还有其他方法可以覆盖CSS 即内联样式

还有最后一个方法来覆盖CSS。这是所有的最强大的方法。。

在许多情况下,使用CSS库。这些可能会意外覆盖自己的CSS。所以当绝对需要确定一个元素具有特定的CSS时,可以使用 !important

比如我们来给 pink-text 元素的 color 声明加上关键字 !important,以使 100% 确保你的 h1 元素是粉色的。

颜色篇

数字 0 是十六进制代码中最低的数字,表示完全没有颜色。。

数字 F 是十六进制代码中最高的数字,表示最大可能的亮度。

#000000  黑色

#FFFFFF  白色

 

hex code(十六进制代码) 遵循 red-green-blue(红-绿-蓝),或者叫 rgb 格式。hex code 中的前两位表示颜色中红色的数量,第三四位代表绿色的数量,第五六位代表蓝色的数量。

所以要得到绝对的纯红色,你只需要在第一和第二位使用 F (最大可能的数值),且在第三、第四、第五和第六位使用 0 (最小可能数值)。

许多人对1600 万种颜色感到不可思议,并且 hex code(十六进制代码) 很难记住。幸运的是,你可以缩短它。

例如,红色的十六进制码 #FF0000 可以缩短为 #F00。这个缩写形式给出一个数字为红色,一个数字为绿色,一个数字为蓝色。

这将把所有可能的颜色总数减少到大约4000种,但是浏览器会把 #FF0000 和 #F00 解释为完全相同的颜色。

在 CSS 中表示颜色的另一个方法是使用 RGB 值。

代表黑色的 RGB 值如下所示:

rgb(0, 0, 0)

代表白色的 RGB 值如下所示:

rgb(255, 255, 255)

使用 RGB,是使用RGB指定每个颜色的亮度,数字介于0到255之间,而不是像使用十六进制代码那样使用六个十六进制数字。

如果你做个算术,一个颜色的两位数字等于16 乘以 16,这给我们256个总值,因此,从零开始计数的 RGB 具有与十六进制代码完全相同数量的可能值

你可能感兴趣的:(HTML5&CSS一些小知识)