没有合适的资源?快使用搜索试试~ 我知道了~
css常用属性速查表1
需积分: 0 0 下载量 85 浏览量
2022-08-04
15:25:16
上传
评论
收藏 654KB PDF 举报
温馨提示
试读
19页
1. 样式冲突,遵循的原则是就近原则 2. 样式不冲突,不会层叠 2. 数位没有进位: 0,0,0,5+0,0,0,5 = 0,0,0,10而不是0,0,1,0
资源详情
资源评论
资源推荐
css常用属性速查表
#一、css简介
html提供了布料,接着就该裁剪上色了。
CSS 指层叠样式表 (
C
ascading
S
tyle
S
heets)
样式定义如何显示HTML 元素
样式通常存储在 样式表 中
把样式添加到 HTML 中,是为了 解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在
CSS
文件 中
多个样式定义可 层叠 为一
#二、定义css样式的方式
#1、行内样式(内联样式)
应用内嵌样式到各个网页元素。
1
#2、内页样式(嵌入样式)
在网页上创建嵌入的样式表。
#3、外部样式
将网页链接到外部样式表。
<p style="background: red"> I love java!</p>1
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
p{
background: green;
}
</style>
</head>
<body>
<p> I love java!</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
选择器 示例 示例说明 CSS
.class (记住) .intro
选择所有class="intro"的元素,
class选择器
1
#id ( 记住) #firstname
选择所有id="firstname"的元
素,id选择器
1
* (记住) * 选择所有元素 2
element( 记住) p
选择所有 <p> 元素,元素选择
器
1
[element,element]( 记住) div,p
选择所有 <div> 元素和 <p> 元
素
1
element element( 记住) div p
选择 <div> 元素内的所有 <p>
元素
1
element>element( 记住) div>p
选择所有父级是 <div> 元素的
<p> 元素
2
element+element( 记住) div+p
选择所有紧接着 <div> 元素之
后的 <p> 元素
2
[
attribute
]( 记住) [target] 选择所有带有target属性元素 2
[
attribute
=
value
]( 记住) [target=-blank]
选择所有使用target="-blank"的
元素
2
[
attribute
~=
value
] [title~=flower]
选择标题属性包含单
词"flower"的所有元素
2
[
attribute
|=
language
] [lang|=en]
选择 lang 属性以 en 为开头的所
有元素
2
:link( 了解) a:link 选择所有未访问链接 1
:visited( 了解) a:visited 选择所有访问过的链接 1
:active( 了解) a:active 选择活动链接 1
:hover( 了解) a:hover 选择鼠标在链接上面时 1
:focus( 了解) input:focus 选择具有焦点的输入元素 2
:first-letter p:first-letter
选择每一个 <p> 元素的第一个
字母
1
:first-line p:first-line
选择每一个 <p> 元素的第一行
1
:first-child p:first-child
指定只有当 <p> 元素是其父级
的第一个子级的样式。
2
:before( 了解) p:before
在每个 <p> 元素之前插入内容
2
:after( 了解) p:after
在每个 <p> 元素之后插入内容
2
element1~element2 p~ul 选择p元素之后的每一个ul元素 3
选择器 示例 示例说明 CSS
[attribute^=value] a[src^="https"]
选择每一个src属性的值
以"https"开头的元素
3
[
attribute
=".pdf"]
选择每一个src属性
的值以".pdf"结尾的
元素
3
[
attribute**=
value*] a[src*="itnan"]
选择每一个src属性的值包含子
字符串"itnan"的元素
3
:first-of-type p:first-of-type
选择每个p元素是其父级的第一
个p元素
3
:last-of-type p:last-of-type
选择每个p元素是其父级的最后
一个p元素
3
:only-of-type p:only-of-type
选择每个p元素是其父级的唯一
p元素
3
:only-child p:only-child
选择每个p元素是其父级的唯一
子元素
3
:nth-child(
n
) ( 记住) p:nth-child(2)
选择每个p元素是其父级的第二
个子元素
3
:nth-last-child(
n
) p:nth-last-child(2)
选择每个p元素的是其父级的第
二个子元素,从最后一个子项计
数
3
:nth-of-type(
n
) p:nth-of-type(2)
选择每个p元素是其父级的第二
个p元素
3
:nth-last-of-type(
n
) p:nth-last-of-type(2)
选择每个p元素的是其父级的第
二个p元素,从最后一个子项计
数
3
:last-child p:last-child
选择每个p元素是其父级的最后
一个子级。
3
:enabled input:enabled 选择每一个已启用的输入元素 3
:disabled input:disabled 选择每一个禁用的输入元素 3
:checked input:checked 选择每个选中的输入元素 3
:not(
selector
) :not(p) 选择每个并非p元素的元素 3
:read-only :read-only
用于匹配设置 "readonly"(只
读) 属性的元素
3
:required :required
用于匹配设置了 "required" 属性
的元素
3
:valid :valid 用于匹配输入值为合法的元素 3
:invalid :invalid 用于匹配输入值为非法的元素 3
剩余18页未读,继续阅读
7323
- 粉丝: 22
- 资源: 328
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0