css常用属性速查-急速查找

CSS 选择器

选择器例子例子描述
.class.intro选择 class="intro" 的所有元素。
.class1.class2.name1.name2选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2.name1 .name2选择作为类名 name1 元素后代的所有类名 name2 元素。
#id#firstname选择 id="firstname" 的元素。
**选择所有元素。
elementp选择所有 <p> 元素。
element.classp.intro选择 class="intro" 的所有 <p> 元素。
element,elementdiv, p选择所有 <div> 元素和所有 <p> 元素。
element elementdiv p选择 <div> 元素内的所有 <p> 元素。
element>elementdiv > p选择父元素是 <div> 的所有 <p> 元素。
element+elementdiv + p选择紧跟 <div> 元素的首个 <p> 元素。
element1~element2p ~ ul选择前面有 <p> 元素的每个 <ul> 元素。
[attribute][target]选择带有 target 属性的所有元素。
[attribute=value][target=_blank]选择带有 target="_blank" 属性的所有元素。
[attribute~=value][title~=flower]选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value][lang|=en]选择 lang 属性值以 "en" 开头的所有元素。
[attribute^=value]a[href^="https"]选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]a[href$=".pdf"]选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*=value]a[href*="w3schools"]选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素。
:activea:active选择活动链接。
::afterp::after在每个 <p> 的内容之后插入内容。
::beforep::before在每个 <p> 的内容之前插入内容。
:checkedinput:checked选择每个被选中的 <input> 元素。
:defaultinput:default选择默认的 <input> 元素。
:disabledinput:disabled选择每个被禁用的 <input> 元素。
:emptyp:empty选择没有子元素的每个 <p> 元素（包括文本节点）。
:enabledinput:enabled选择每个启用的 <input> 元素。
:first-childp:first-child选择属于父元素的第一个子元素的每个 <p> 元素。
::first-letterp::first-letter选择每个 <p> 元素的首字母。
::first-linep::first-line选择每个 <p> 元素的首行。
:first-of-typep:first-of-type选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:focusinput:focus选择获得焦点的 input 元素。
:fullscreen:fullscreen选择处于全屏模式的元素。
:hovera:hover选择鼠标指针位于其上的链接。
:in-rangeinput:in-range选择其值在指定范围内的 input 元素。
:indeterminateinput:indeterminate选择处于不确定状态的 input 元素。
:invalidinput:invalid选择具有无效值的所有 input 元素。
:lang(language)p:lang(it)选择 lang 属性等于 "it"（意大利）的每个 <p> 元素。
:last-childp:last-child选择属于其父元素最后一个子元素每个 <p> 元素。
:last-of-typep:last-of-type选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:linka:link选择所有未访问过的链接。
:not(selector):not(p)选择非 <p> 元素的每个元素。
:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。
:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。
:only-of-typep:only-of-type选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。
:optionalinput:optional选择不带 "required" 属性的 input 元素。
:out-of-rangeinput:out-of-range选择值超出指定范围的 input 元素。
::placeholderinput::placeholder选择已规定 "placeholder" 属性的 input 元素。
:read-onlyinput:read-only选择已规定 "readonly" 属性的 input 元素。
:read-writeinput:read-write选择未规定 "readonly" 属性的 input 元素。
:requiredinput:required选择已规定 "required" 属性的 input 元素。
:root:root选择文档的根元素。
::selection::selection选择用户已选取的元素部分。
:target#news:target选择当前活动的 #news 元素。
:validinput:valid选择带有有效值的所有 input 元素。
:visiteda:visited选择所有已访问的链接。

CSS 函数

函数描述
attr()返回所选元素的属性值。
calc()允许您执行计算来确定 CSS 属性值。
cubic-bezier()定义三次贝塞尔曲线。
hsl()使用色相-饱和度-亮度模型（HSL）定义颜色。
hsla()使用色相-饱和度-亮度-阿尔法模型（HSLA）定义颜色。
linear-gradient()将线性渐变设置为背景图像。定义至少两种颜色（从上到下）。
radial-gradient()将径向渐变设置为背景图像。定义至少两种颜色（从中心到边缘）。
repeating-linear-gradient()重复线性渐变。
repeating-radial-gradient()重复径向渐变。
rgb()使用红-绿-蓝模型（RGB）定义颜色。
rgba()使用红-绿-蓝-阿尔法模型（RGB）定义颜色。
var()插入自定义属性的值。

HTML 元素的 CSS 默认值

元素默认的 CSS 值TIY
a:link
  • color: (internal value);
  • text-decoration: underline;
  • cursor: auto;
试一试
a:visited
  • color: (internal value);
  • text-decoration: underline;
  • cursor: auto;
试一试
a:link:activecolor: (internal value);试一试
a:visited:activecolor: (internal value);试一试
abbrNone. 
address
  • display: block;
  • font-style: italic;
试一试
areadisplay: none; 
articledisplay: block; 
asidedisplay: block; 
audioNone. 
bfont-weight: bold;试一试
baseNone. 
bdiNone. 
bdounicode-bidi: bidi-override; 
blockquote
  • display: block;
  • margin-top: 1em;
  • margin-bottom: 1em;
  • margin-left: 40px;
  • margin-right: 40px;
试一试
body
  • display: block;
  • margin: 8px;
试一试
body:focusoutline: none;试一试
brNone. 
buttonNone 
canvasNone. 
caption
  • display: table-caption
  • text-align: center;
试一试
citefont-style: italic;试一试
codefont-family: monospace;试一试
coldisplay: table-column;试一试
colgroupdisplay: table-column-group试一试
datalistdisplay: none; 
dd
  • display: block;
  • margin-left: 40px;
试一试
deltext-decoration: line-through;试一试
detailsdisplay: block; 
dfnfont-style: italic;试一试
dialogNone. 
divdisplay: block;试一试
dl
  • display: block;
  • margin-top: 1em;
  • margin-bottom: 1em;
  • margin-left: 0;
  • margin-right: 0;
试一试
dtdisplay: block;试一试
emfont-style: italic;试一试
embed:focusoutline: none; 
fieldset
  • display: block;
  • margin-left: 2px;
  • margin-right: 2px;
  • padding-top: 0.35em;
  • padding-bottom: 0.625em;
  • padding-left: 0.75em;
  • padding-right: 0.75em;
  • border: 2px groove (internal value);
试一试
figcaptiondisplay: block; 
figure
  • display: block;
  • margin-top: 1em;
  • margin-bottom: 1em;
  • margin-left: 40px;
  • margin-right: 40px;
试一试
footerdisplay: block; 
form
  • display: block;
  • margin-top: 0em;
试一试
h1
  • display: block;
  • font-size: 2em;
  • margin-top: 0.67em;
  • margin-bottom: 0.67em;
  • margin-left: 0;
  • margin-right: 0;
  • font-weight: bold;
试一试
h2
  • display: block;
  • font-size: 1.5em;
  • margin-top: 0.83em;
  • margin-bottom: 0.83em;
  • margin-left: 0;
  • margin-right: 0;
  • font-weight: bold;
试一试
h3
  • display: block;
  • font-size: 1.17em;
  • margin-top: 1em;
  • margin-bottom: 1em;
  • margin-left: 0;
  • margin-right: 0;
  • font-weight: bold;
试一试
h4
  • display: block;
  • margin-top: 1.33em;
  • margin-bottom: 1.33em;
  • margin-left: 0;
  • margin-right: 0;
  • font-weight: bold;
试一试
h5
  • display: block;
  • font-size: .83em;
  • margin-top: 1.67em;
  • margin-bottom: 1.67em;
  • margin-left: 0;
  • margin-right: 0;
  • font-weight: bold;
试一试
h6
  • display: block;
  • font-size: .67em;
  • margin-top: 2.33em;
  • margin-bottom: 2.33em;
  • margin-left: 0;
  • margin-right: 0;
  • font-weight: bold;
试一试
headdisplay: none; 
headerdisplay: block; 
hr
  • display: block;
  • margin-top: 0.5em;
  • margin-bottom: 0.5em;
  • margin-left: auto;
  • margin-right: auto;
  • border-style: inset;
  • border-width: 1px;
试一试
html
  • display: block;
  • html:focus
  • outline: none;
 
ifont-style: italic;试一试
iframe:focusoutline: none; 
iframe[seamless]display: block; 
imgdisplay: inline-block;试一试
inputNone. 
instext-decoration: underline;试一试
kbdfont-family: monospace;试一试
labelcursor: default;试一试
legend
  • display: block;
  • padding-left: 2px;
  • padding-right: 2px;
  • border: none;
试一试
lidisplay: list-item; 
linkdisplay: none; 
mainNone. 
mapdisplay: inline; 
mark
  • background-color: yellow;
  • color: black;
试一试
menu
  • display: block;
  • list-style-type: disc;
  • margin-top: 1em;
  • margin-bottom: 1em;
  • margin-left: 0;
  • margin-right: 0;
  • padding-left: 40px;
 
menuitemNone. 
metaNone. 
meterNone. 
navdisplay: block; 
noscriptNone. 
object:focusoutline: none; 
ol
  • display: block;
  • list-style-type: decimal;
  • margin-top: 1em;
  • margin-bottom: 1em;
  • margin-left: 0;
  • margin-right: 0;
  • padding-left: 40px;
试一试
optgroupNone. 
optionNone. 
outputdisplay: inline; 
p
  • display: block;
  • margin-top: 1em;
  • margin-bottom: 1em;
  • margin-left: 0;
  • margin-right: 0;
试一试
paramdisplay: none; 
pictureNone. 
pre
  • display: block;
  • font-family: monospace;
  • white-space: pre;
  • margin: 1em 0;
试一试
progressNone. 
qdisplay: inline;试一试
q::beforecontent: open-quote;试一试
q::aftercontent: close-quote;试一试
rpNone. 
rtline-height: normal;
rubyNone. 
stext-decoration: line-through;试一试
sampfont-family: monospace; 
scriptdisplay: none; 
sectiondisplay: block;试一试
selectNone. 
smallfont-size: smaller;试一试
sourceNone. 
spanNone. 
striketext-decoration: line-through;试一试
strongfont-weight: bold;试一试
styledisplay: none; 
sub
  • vertical-align: sub;
  • font-size: smaller;
试一试
summarydisplay: block; 
sup
  • vertical-align: super;
  • font-size: smaller;
试一试
table
  • display: table;
  • border-collapse: separate;
  • border-spacing: 2px;
  • border-color: gray;
试一试
tbody
  • display: table-row-group;
  • vertical-align: middle;
  • border-color: inherit;
 
td
  • display: table-cell;
  • vertical-align: inherit;
 
templateNone. 
textareaNone. 
tfoot
  • display: table-footer-group;
  • vertical-align: middle;
  • border-color: inherit;
 
th
  • display: table-cell;
  • vertical-align: inherit;
  • font-weight: bold;
  • text-align: center;
 
thead
  • display: table-header-group;
  • vertical-align: middle;
  • border-color: inherit;
 
timeNone. 
titledisplay: none; 
tr
  • display: table-row;
  • vertical-align: inherit;
  • border-color: inherit;
 
trackNone. 
utext-decoration: underline;试一试
ul
  • display: block;
  • list-style-type: disc;
  • margin-top: 1em;
  • margin-bottom: 1 em;
  • margin-left: 0;
  • margin-right: 0;
  • padding-left: 40px;
试一试
varfont-style: italic;试一试
videoNone. 
wbrNone.

 

 

后续更新中...

 

 

 

 

posted @ 2021-05-06 13:50  JackieDYH  阅读(19)  评论(0)    收藏  举报  来源