HTML和CSS学习1

65 阅读2分钟

这是我参与[第五届青训营]伴学笔记创作活动的第一天

关于引用的

块级引用,长引用

短引用

 

语义化是什么?

HTML中的元素,属性及属性值都拥有某些含义,这个含义就是语义

CSS

input有一个disabled属性,表示该输入框被禁用

 

伪类选择器:

a:link默认状态

a:visited访问过的状态

a:hover表示鼠标移动到上面

a:active表示鼠标点下去后

:focus给输入框输入时设置样式

Li:first-child表示li父级的第一个

Last-child

选择器组

可以将各选择器用逗号隔开body,h1,h2{}

 

颜色-HSL

Hue(h)色相是色彩的基本属性如红色,黄色等取值范围0-360

Saturation(S)饱和度指色彩的鲜艳程度,越高越鲜艳取值范围0-100%

Lightness(L)亮度指颜色的明亮程度;越高颜色越亮,取值范围0-100%

用Hsl()

 

alpha透明度,为1时不透明

Rgba(255,0,0,0.47)    hsla(0,100%,50%,0.47)

font-style:italic表示斜体

font-weight表示字重,字的粗细(100-900)700是bold粗体

line-height表示行高

 

inherit表示从父级继承属性

可以使用initial关键字显式重置为初始值

 

布局相关技术:常规流,浮动,绝对定位

 

 

盒子模型:

Height:容器有指定高度时,百分数才生效

Padding:百分数相对于容器宽度

box-sizing:border-box设置的宽度高度是包括padding,border,content 的宽度高度,一般的只设置了文字content的宽高。

当把容器宽度高度设置为0时,可以通过设置边框来产生三角形

Overflow溢出:文字溢出容器,

Visible  超出的部分也展示

hidden 超出部分不展示

Scroll 用滚动条滚动

 

通过本次的学习我学会了通过伪类选择器来进行鼠标事件的操作反应方法,让我的网页有了更好看的视觉效果,通过也知道了设置颜色的两种方法,以及如何设计透明度,并且像盒子模型,我更加熟悉了盒子模型的用法,相信在以后的工作生活中可以更加熟练的运用盒子模型。