涵盖内容
1.熟悉css基本语法,以及css工作原理
2.熟练使用css selector 常规选择器class,id,元素,后代,通用,了解选择器的优先级
3.熟悉浮动,定位,盒模型,背景,字体,颜色等常用属性,能运用css进行页面布局和展现效果图
- css的工作原理
- css的出现使得内容和样式分离进而让页面变得更简洁,更容易维护。
-
mozilla开发者文档里是这样描述的:
- 浏览器在展现文档的时候,需要把文档内容和相应的样式信息结合起来展现。
-
浏览器先将HTML 和 CSS 转换成 DOM (文档对象模型)结构。 这时 DOM 就代表了电脑内存中的相应文档,因为它已经融合了文档内容和相应的样式表
- 浏览器把 DOM 的内容展示出来
-
/*这是个注释*/
-
插入样式表的方法有三种:
- 外部样式表(External style sheet)
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
- 内部样式表(Internal style sheet)
<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
- 内联样式(Inline style)
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
- 外部样式表(External style sheet)
- 多重样式优先级
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
-
line-height
行高 -
text-align 对齐元素中的文本
-
font-family:"Times New Roman"
-
font-size font-style
-
用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em
-
链接样式
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
- 一个属性多个值
table, th, td { border: 1px solid black; }
- 盒子模型(Box Model)
-
边框-单独设置各边
p{ border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }
- CSS 轮廓(outline)
-
分组选择器
h1,h2,p { color:green; }
- 嵌套选择器
p.marked{ text-decoration:underline; }
max-hright
-
display:none;
和visibility:hidden;
-
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间
-
更改内联元素和块元素
display:inline; display:block;
- Position(定位)
- static
- HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
- 静态定位的元素不会受到 top, bottom, left, right影响。
- fixed
- 元素的位置相对于浏览器窗口是固定位置。
-
即使窗口是滚动的它也不会移动
p.pos_fixed { position:fixed; top:30px; right:5px; }
- relative 定位
- 相对定位元素的定位是相对其正常位置。
-
移动相对定位元素,但它原本所占的空间不会改变。
h2.pos_left { position:relative; left:-20px; }
- absolute 定位
- 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于
<html>
: - absolute 定位使元素的位置与文档流无关,因此不占据空间。
- absolute 定位的元素和其他元素重叠。
- 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于
- static
- 重叠的元素
- z-index属性指定了一个元素的堆叠顺序
-
一个元素可以有正数或负数的堆叠顺序
-
overflow 属性用于控制内容溢出元素框时显示的方式。
值 描述 visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 - 元素居中对齐
- 元素水平居中
margin: auto;
-
文本水平居中
text-align: center;
-
垂直居中 - 使用 line-height
- 垂直居中 - 使用 position 和 transform
transform: translate(-50%, -50%);
- 元素水平居中
-
组合选择符
- 后代选择器
-
后代选择器用于选取某元素的后代元素。
-
以下实例选取所有
<p>
元素插入到<div>
元素中:div p { background-color:yellow; }
- 子元素选择器
- 与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
-
选择了
<div>
元素中所有直接子元素<p>
:div>p { background-color:yellow; }
- 相邻兄弟选择器
- 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
-
紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
-
以下实例选取了所有位于
<div>
元素后的第一个<p>
元素:div+p { background-color:yellow; }
- 后续兄弟选择器
- 后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
-
以下实例选取了所有
<div>
元素之后的所有相邻兄弟元素<p>
:div~p { background-color:yellow; }
-
div~*:匹配全部
现在开始学习3剑客了?