Css关系选择器
选择器 | 功能 |
---|---|
E,F | 群组选择器 |
E F | 后代选择器 |
E>F | 子元素选择器 |
E+F | 选取当前元素后一个兄弟元素 |
E~F | 选取当前元素后所有的兄弟元素 |
属性选择器
css2中定义下面4个属性选择器
选择器 | 功能 |
---|---|
E[att] | 表示包含att属性的元素 |
E[att=”val”] | 表示包含att属性并且属性值是val的元素 |
E[att~=”val”] | 表示包含att属性并且该属性的数值的其中一个是val的元素 |
css3中新增的3个属性选择器
选择器 | 功能 |
---|---|
E[att$=”val”] | 表示包含att属性并且属性值是以val为后缀(结尾)的元素 |
E[att^=”val”] | 表示包含att属性并且该属性的属性值是以val为前缀(开头)的 |
E[att*=”val”] | 表示包含att属性并且该属性的数值的其中一个是val的元素 |
伪类选择器-动态伪类
选择器 | 功能 |
---|---|
E:link | 加了超链接时的样式 |
E:visited | 访问过之后的样式 |
E:hover | 鼠标滑过的样式 |
E:active | 鼠标点击时的样式 |
E:focus | 获得焦点时的样式 |
:nth伪类选择器
选择器 | 功能 |
---|---|
E:first-child | 匹配父元素的第一个子元素 |
E:last-child | 匹配父元素的最后一个子元素 |
E:nth-child(n) | 匹配父元素的第n个子元素 |
E:nth-last-child(n) | 匹配父元素的倒数第n个子元素E |
E:nth-of-type(n) | 匹配同类型中的第n个同级兄弟元素 |
E:nth-last-of-type(n) | 匹配同类型中的倒数第n个同级兄弟元素E |
CSS3 伪元素选择器
选择器 | 功能 |
---|---|
E::first-line | 选择元素的第一行 |
E::first-letter | 选择文本块的第一个字母 |
E::before | 前面插入内容,这两个常用”content”配合使用,见过最多的就是清除浮动 |
E::after | 前面插入内容,这两个常用”content”配合使用,见过最多的就是清除浮动 |
![]()
文字属性及段落属性
文字属性
color 字体颜色
font-size 字号
font-family 字体
font-weight 字体加粗: bold 加粗\ normal
font-style 字体样式 normal | italic
Css段落属性
text-indent 文本缩进 2em/24px/150% 1.5
line-height 文本行高 20px
text-align 文本对齐 left/center/right
Css样式—背景属性及项目符号
background-color:背景颜色
background-image:背景图片
background-repeat :背景重复
background-position:背景定位
Background:背景
list-style:项目符号
list-style-type项目符号类型
list-style-image项目符号图像
list-style-position项目符号图像位置
note4
【基本选择器】
*{}
element{}
#id{}
.class{}
【关系选择器】
群组选择器 #id,.class, element{css属性}
后代选择器: 用空格表示 父元素 后代元素 (重孙子 只要是后代都改变)
子元素选择器 用>表示 父元素>子元素 (只能找到儿子|找不到孙子)
【动态伪劣选择器】(常给a标签使用|也可以给其他)
:link 链接时状态
:visited 访问之后的状态
:hover 鼠标经过时候状态
:active 鼠标点击状态(未松开)
爱恨原则:LoVeHAate;
【:nth选择器】(css3新增的选择器) 是伪劣选择器一种
:frist-child{css属性} 第一个子元素
:last-child{css属性} 最后一个子元素
:nth-child(N){ css属性} 第N个子元素 N为数字 从1开始
【css属性】
文字属性:{可以给任何一个标签使用}
color:#66ddff; red;( 十六进制|单词) 文字颜色
font-size:12px;14px;16px; 文字大小
font-family:"宋体";"" 罗马字体Tahoma,geneva,sans-serif; arial,helvetica sans- 文字字体
font-weight:100-900/bold/bolder normal 文字加粗
font-style:italic(倾斜)/normal
段落属性:
text-align: right|center|left 文本水平对齐方式
text-indent:20px 12em 文本缩进
line-height:20~24px; 150% 1.5/2 行高
text-decoration:underline|none|overline|line-through(删除) 文本描述 文本描述
line-height高级使用,只有一行文本时,有高度,实现文本垂直方向上的对齐 line-height=height;
背景属性:|复合属性|
background-color:rgba();#ff00ff; red(单词少)
background-image:url(路径)默认横纵平铺 添加的是背景图像
background-repeat:repeat|repeat-x|repeat-y|no-repate 默认对齐方式是左上角 设置背景图片的显示方式
background-position:水平位置 垂直方向的位置 背景图像的的位置
水平方向位置:left right center 50px 20%
垂直方向位置:top botton center 20px 25%
列表属性:
list-style