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

栏目: CSS · 发布时间: 5年前

内容简介:文章大纲来源:内容引用:CSS 伪类用于向某些选择器添加特殊的效果。

文章大纲来源: 【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
ex
ch
rem
vw
vh

绝对长度

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

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

cm
mm
in
px
pt
pc

CSS 参考手册

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

】]( http://www.w3school.com.cn/cs...

个人静态博客:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

鼠标宣言

鼠标宣言

约翰·里德尔 / 倪萍、梅清豪 / 上海人民 / 2005-08-01 / 25.00

本书针对信息时代营销者不知该如何满足消费者的营销困境,提出了崭新的解决方案——以新技术为基础的群体筛选和推荐系统。随着信息管理软件和internet的高速发展,群体筛选技术下的推荐系统通过大量有关消费者偏好和购物记录的信息,以及对产品特征的准确把握,能够为消费者进行精确的推荐,提高了消费者的购物效率和准确度以及营销者的营销效率和竞争力。本书通过通俗而到位的讲解,向读者全面介绍了有关群体筛选技术的理......一起来看看 《鼠标宣言》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具