级联样式表 CSS
CSS就是所谓的样式表或样式语言,但从某种意义上说,它不能通过自己做任何事情
background-color: 设置背景颜色
如果想要寻找漂亮的杨色,可以借助于colorhunt.co来选择设计师设计的颜色
存在于网页上的内容本质上只是框
通过谷歌的插件-农药可以让框显示 Pesticide for Chrome
更改CSS代码可能会影响这些框的属性
帮助链接:表情符号百科 https://emojipedia.org/
tab是有限的,若想要same tag have different style, you would using the class as the selector that you can n better differentiate and make more specific styling
要将相同样式应用于一组相关项目时用class selector, 而 使用 id selector 去应用于单个元素的特定样式
不能为特定元素设置多个ID,但可以为元素设置多个类
伪类选择器的存在是因为HTML元素可以有不同的状态,such as hover
互联网上最好的个人网站之一:肖恩 哈尔平 sean halpin
div 除非使用css,否则不会执行任何操作。从本质上讲,div代表内容划分元素,基本上允许将内容拆分或划分为单独的容器或框,以便了解每个容器或框的布局
100%是100%的视口,视口是正在查看网站的屏幕
CSS 盒子模型
边框不会侵犯元素的大小
即使div或盒子没有高度或宽度,它也会将拥有高度和宽度去适应内容
我们可以使用margin、padding、border、width、height去影响所有HTML元素的布局和外观
CSS显示属性 display
内联显示元素仅占用高度和宽度所需要的空间
内联元素比块级元素要灵活很多,为什么需要块级元素呢?
内联元素不能更改宽和高
若想要占据同一行但可以设置宽高,就可以使用内联块元素
基于HTML代码在屏幕上呈现内容的默认规则
内容是决定盒子宽高的第一要素
屏幕上元素顺序来自HTML代码
子元素在父元素的顶端
Position
相对定位:我们选择的元素相对于元素在HTML流的位置
它不会影响屏幕上其它任何内容的位置,就好像旧位置被保留了下来,其它一切都围绕着它流动,就好像它从未动过一样
absolute
绝对位置意味着要向父元素添加边距
绝对定位会影响HTML的流动
相对定位,我们会留下一个幽灵元素,而绝对定位实际上将元素从文档的流中取出,它不再被视为文档自然流的一部分
字体样式
font-family
sans-serif 无衬线 serif 衬线 monospace 等宽 cursive 草书 fantasy幻想
对于大多数浏览器,默认衬线字体是Times字体,默认无衬线字体是Arial (Vendana)
有一种东西是WEB安全字体 web safe fonts 意味着有一组字体系列,大多数操作系统将能够使用这些字体系列以正确表现它
https://www.cssfontstack.com/
列出了所有常用的字体以及已安装的用户的百分比,按其操作系统分割
如果对字体要求比较高,要求所有用户都要看到开发者设置的字体,那么就要使用字体嵌入了
有一个网站 fonts.google.com上有大量的字体可供选择
有一个国外的矢量图标库
https://www.flaticon.com/
有一个GIF图像的地址
https://giphy.com/
自动生成按钮代码的地址https://css3buttongenerator.com/