资讯专栏INFORMATION COLUMN

前端菜鸟笔记 Day-5 CSS 高级

Tony_Zby / 550人阅读

摘要:绝对长度单位视输出介质而定,不依赖于环境显示器分辨率操作系统等。个人静态博客气泡的前端日记

文章大纲来源:【Day 5】CSS 高级

CSS 选择器

CSS 拓展

CSS 单位

CSS 参考手册

CSS 选择器

内容引用:CSS 选择器

元素选择器
html { ... }
选择器分组
h2, p { ... }
类选择器
.important { ... }
p.warning  { ... }
.important.warning { ... }
/* 选择同时拥有这两个类名的元素 */
ID选择器
#intro { ... }
属性选择器
a[href] { ... }
a[href][title] { ... }
a[href="..."] { ... }
p[class="important warning"] { ... }
/* 完全匹配的属性内容 */
p[class~="important"] { ... }
/* 部分匹配的属性内容 */
后代选择器
h1 em { ... }
子元素选择器
h1 > strong { ... }
相邻兄弟选择器
h1 + p { ... }
伪类
CSS 伪类用于向某些选择器添加特殊的效果。

语法是selector : pseudo-class {property: value}

a:link { color: #FF0000 }        /* 未访问的链接 */
a:visited { color: #00FF00 }    /* 已访问的链接 */
a:hover { color: #FF00FF }    /* 鼠标移动到链接上 */
a:active { color: #0000FF }    /* 选定的链接 */
p:first-child { font-weight: bold; }
CSS 拓展

内容引用:CSS 高级

水平对齐

使用margin:auto水平对齐

margin-left:auto;
margin-right:auto;

使用position左或右对齐

position:absolute;
right:0px;

使用float左或右对齐

float:right;
尺寸

height:元素高度

width:元素宽度

line-height:行高

max-height:最大高度

max-width:最大宽度

min-height:最小高度

min-width:最小宽度

CSS 单位

内容引用:CSS 单位

相对长度
指定了一个长度相对于另一个长度的属性,对于不同的设备相对长度更适用。

em:相对于应用在当前元素的字体尺寸,一般浏览器字体大小默认为16px,则2em == 32px

ex:依赖于英文子母小 x 的高度

ch:数字 0 的宽度

rem:根元素(html)的 font-size

vw:viewpoint width,视窗宽度,1vw=视窗宽度的1%

vh:viewpoint height,视窗高度,1vh=视窗高度的1%

绝对长度
绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。

绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。

cm:厘米

mm:毫米

in:英寸(1in = 96px = 2.54cm)

px:像素 (1px = 1/96th of 1in)

pt:point,大约1/72英寸; (1pt = 1/72in)

pc:pica,大约6pt,1/6英寸; (1pc = 12 pt)

CSS 参考手册

使用时如果有疑问可以随时查看【CSS 参考手册】。

个人静态博客:

气泡的前端日记: https://rheabubbles.github.io

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117346.html

相关文章

  • 前端菜鸟笔记 Day-3 CSS基础

    摘要:派生选择器依据元素的位置关系来定义样式。称其为上下文选择器,称其为派生选择器。在现在布局中,选择器常常用于建立派生选择器。和一样,也可被用作派生选择器。 文章大纲来源:【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表(Cascading Style Sheets),即前端常说的CSS。 内容引用:CSS 简介 样式解决了什么问题? HTML...

    mingzhong 评论0 收藏0
  • 前端菜鸟笔记 Day-3 CSS基础

    摘要:派生选择器依据元素的位置关系来定义样式。称其为上下文选择器,称其为派生选择器。在现在布局中,选择器常常用于建立派生选择器。和一样,也可被用作派生选择器。 文章大纲来源:【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表(Cascading Style Sheets),即前端常说的CSS。 内容引用:CSS 简介 样式解决了什么问题? HTML...

    DangoSky 评论0 收藏0
  • 前端菜鸟笔记 Day-4 CSS布局

    摘要:元素框从文档流完全删除,并相对于其包含块定位。简单来说就是,元素不再占用任何文档流的空间,只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短,使行框围绕浮动框,所以创建浮动框可以使文本围绕图像。 文章大纲来源:【Day 3】HTML复习 + CSS基础 CSS框模型 宽度和高度 内边距 外边距 CSS定位 浮动 CSS框模型 内容引用:CSS 框模型概述 CSS 框模...

    go4it 评论0 收藏0
  • 前端菜鸟笔记 Day-4 CSS布局

    摘要:元素框从文档流完全删除,并相对于其包含块定位。简单来说就是,元素不再占用任何文档流的空间,只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短,使行框围绕浮动框,所以创建浮动框可以使文本围绕图像。 文章大纲来源:【Day 3】HTML复习 + CSS基础 CSS框模型 宽度和高度 内边距 外边距 CSS定位 浮动 CSS框模型 内容引用:CSS 框模型概述 CSS 框模...

    Honwhy 评论0 收藏0
  • Web前端开发学习推荐--菜鸟必看

    Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段:前端基础(HTML / CSS / JavaScript / jQuery)初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!(表单标签)html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

    JerryWangSAP 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<