CSS-学习笔记
id和class选择器
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。类选择器以一个点"."号显示
层叠次序 1、浏览器缺省设置 2、外部样式表 3、内部样式表(位于<head>标签内部)4、内联样式(在HTML元素内部)
当使用简写属性时,顺序为body {background:background-color background-image background-repeat background-attachment background-position}
CSS文本属性:color direction(文本方向) letter-spacing(字符间距) lin-height(设置行高) text-align(对齐文本) text-decoration(向文本添加修饰) text-indent(缩进元素中文本的首行 text-shadow(设置文本阴影) text-transform(控制元素中的字母) vertical-align(设置元素的垂直对齐) white-space(设置元素中空白的处理方式) word-spacing (设置字间距)
在计算机屏幕上,sans-serif字体被认为是比serif字体容易阅读
为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em
CSS伪类:
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
CSS Positioning定位
Static-没有定位 Fixed-相对浏览器窗口是固定位置 Relative--相对正常位置 absolute--相对于最近的已定位父元素
下拉菜单: dropdown{} dropdown-content{}
.dropdown:hover .dropdown-content {
display: block;
}
HTML 部分:
我们可以使用任何的 HTM,元素来打开下拉菜单,如:<span>, 或 a <button> 元素。
使用容器元素 (如: <div>) 来创建下拉菜单的内容,并放在任何你想放的位置上。
使用 <div> 元素来包裹这些元素,并使用 CSS 来设置下拉内容的样式。
CSS 部分:
.dropdown
类使用 position:relative
, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute
) 的右下角位置。
.dropdown-content
类中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。 注意 min-width
的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽带一致,可设置 width
为 100% ( overflow:auto
设置可以在小尺寸屏幕上滚动)。
我们使用 box-shadow
属性让下拉菜单看起来像一个"卡片"。
:hover
选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
嵌套标签及下拉菜单
框模型:Margin - 清除边框区域。Margin没有背景颜色,它是完全透明 Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响 Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响 Content - 盒子的内容,显示文本和图像
属性和值得选择器 [title~=hello] {color:blue;} [lang|=en] {color:blue;}
属性选择器样式无需使用class或id的形式: input[type="text"] input[type="button"]