0.基础
-
title属性
当鼠标放在元素上时显示提示 -
盒子模型
内容content
包裹一层padding
然后是border
外办再包裹一层margin
-
配置背景图片
background : red url() no-repeat center right 10%;
2.组合选择器
1. id 选择器
#para
选择id=para
2. class 选择器
.center
选择class=center
p.center
选择 <p class=center>
3. 后代选择器(以空格分隔)
div p
选取所有 <p> 元素插入到 <div> 元素
4. 子元素选择器(以大于号分隔)
div>p
选择了<div>元素中所有直接子元素 <p>
5. 相邻兄弟选择器(以加号分隔)
div+p
选取了所有位于 <div> 元素后的第一个 <p> 元素,紧挨着
6 后续兄弟选择器(以破折号分隔)
div~p
选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
7. 属性选择器
7.1. [title]
所有包含标题title的所有元素
7.2. [title=abc]
属性和值选择器
7.3 attribute 属性以 value 开头
[attribute^=value] 属性的前几个字母是 value 就可以
7.4. attribute 属性中包含 value
[attribute|=value] 属性中必须是完整且唯一的单词,或者以 - 分隔
[attribute~=value] 属性中包含独立的单词为 value
[attribute*=value]`属性中做字符串拆分,只要能拆出来 value 这个词就行
7.6 attribute 属性以 value 结尾
-
[attribute$=value]
属性的后几个字母是 value 就可以
7.7 class 多个属性
- 两个属性中间有空格就是后代
- 没有空格就是子代
- 正则表达式
// id=sections 后代div 的id以s开头的所有元素背景设置为红色;
#sections div[id^='s'] {
color: red;
}
4. 高级
1. 文本
名称 | 注释 |
---|---|
strong | 强调 |
small | xiaohao |
i | 斜体 |
b | 粗体 |
cite | 斜体引用 |
q | 加引号,有bug |
blockquote | 块引用 |
sup | 2 上标 |
del | <del>删除</del> |
ins | <ins> love </ins> 插入,下划线 |
code | <code>hello </code> |
pre | 不删除任何空格 |
2. 继承
并不是所有样式都可以继承
字体会被继承
所有背景相关都不会被继承
每一个属性都有是否可以继承的默认值
3. position
元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。离他最近的开启了定位(position 不等于static)的祖先元素进行定位。如果都没有定位元素,则相对于浏览器窗口。绝对定位开启后会使元素提升一个层级。 |
fixed | 相对于浏览器窗口进行定位元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。不随着滚动条滚动。可以盯着一个地方看到。 |
relative | 相对于其正常位置进行定位。"left:20" 会向元素的 LEFT 位置添加 20 像素。使元素提升一个层级 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。难道宽度和高度也可以自己获得吗? |
4. display
名称 | 理解 |
---|---|
block | 行级块元素,相当于自动换行 |
inline | 行内元素 |
flex | 水平平均排列 |
5. background
名称 | 理解 |
---|---|
background-color | 颜色 |
background-image | 图片 |
background-repeat | 重复 |
background-position | 位置 |
background | 可以一次全写,没有顺序和数量要求 |
6. 表格
名称 | 理解 |
---|---|
colspan | 横向合并单元格,在td里设置 |
rowspan | 向合并单元格 |
border-spacing | 边框直接的距离 |
border-collapse | 边框合并,合并之后设置边框距离就失效了。 |
thead | 表头,然后砸中间设置tr |
tbody | 主题 |
tfoot | 脚 |
7. input
名称 | 理解 |
---|---|
name | 提交给服务器的时候的变量变量 |
type | text,data,....buttom |
value | 默认值 |
checked | checked 默认选择 |
radio | 单选 |
checkbox | 多选 |
select | 下拉列表 |
option | 单选, |
optgroup | 分组,label分组标签 |
textaera | 文本域 |
label | for 指定表单input的id |
fieldset | 给不同的输入分组 |
legend | 表单注释 |
8. iframeset
不能和body同时出现在页面中。
名称 | 理解 |
---|---|
frameset | cols, rows |
frame | src |
3.其他选择器
3.1 伪类
名称 | 理解 |
---|---|
:link | 没访问过的 |
:visited | 访问过 |
:hover | 鼠标移入 |
:active | 已经选中 |
:focus | 获取焦点 input |
::selection | 选中的元素,两个冒号为p中选中的文字设置样式 |
::-moz-selection | 火狐专用选中文字 |
- 注意: a标签的伪类顺序lvha
3.2 伪元素 选择器
名称 | 注释 |
---|---|
:first-child | 这是是父类的第一个子元素 |
:first-letter | 第一个子单词 |
:first-line | 第一行 |
:before | 在指定元素开始标签之后的时候添加内容,使用content 指定插入内容 |
:after | 指定元素结束标签之前添加内容 |
:nth-child(even) | 偶数个子元素 |
:first-of-type | 该类的的一个 |
:nth-of-type | 该类的的一个 |
:not(选择器) | 不要选择个选择器 |
-
选择器优先级
选择器优先级
当包含多个选择器时,要先将选择器优先级加起来,然后在比较。
多个相同的选择器相加不会超过他的数量级。
优先级相同的用后边的。
当给样式添加!important
超过内联样式,尽量避免使用,js也不能修改。
网友评论