正因为生来什么都没有,因此我们能拥有一切。(o゚▽゚)o

  • 微信公众号
  • HTML5&CSS一些小知识

    jingyile·2018-06-29·113 次阅读

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

    关于引入Google字体

    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

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

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

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

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

     

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

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

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

    <label><input type="radio" name="indoor-outdoor"> indoor</label>

    <label><input type="radio" name="indoor-outdoor"> outdoor</label>

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

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

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

    <label><input type="checkbox" name="personality"> Loving</label>

    <label><input type="checkbox" name="personality"> Loving</label>

    <label><input type="checkbox" name="personality"> Loving</label>

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

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

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

    <input type="radio" name="test-name" 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 具有与十六进制代码完全相同数量的可能值


    正因为生来什么都没有,因此我们能拥有一切。(o゚▽゚)o

    
    
    查看评论

    Post a new comment

    Post a new comment
    欢迎回来 , [ 修改 ]




    加载中……