CSS3
布局
/* 创建三个相等的列,它们彼此相邻浮动 */
.column {
float: left;
width: 33.33%;
}
/* 在列后清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 响应式布局 - 使三列堆叠,而不是在较小的屏幕(宽度为 600 像素或更小)上并排 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
特异性
每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别:
行内样式 - 行内(内联)样式直接附加到要设置样式的元素。实例:
<h1 style="color: #ffffff;">
。ID - ID 是页面元素的唯一标识符,例如 #navbar。
类、属性和伪类 - 此类别包括 .classes、[attributes] 和伪类,例如::hover、:focus 等。
元素和伪元素 - 此类别包括元素名称和伪元素,比如 h1、div、:before 和 :after。
<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>
<div id="a">这是一个 div</div>
</body>
</html>
CSS 组合器
鼠标箭头变为-手型
cursor: pointer;
盒子隐藏
- 将元素隐藏,但是在网页中该占的位置还是占着,使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。
visibility:hidden
- 将元素的显示设为无,即在网页中不占任何的位置,使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”。
display:none
-webkit
前缀为“-webkit-”的属性,能够在以webkit为内核的浏览器中正常使用
-webkit常用于代表chrome、safari私有属性;
针对不同的浏览器,规定其内核名称让它们可以对这些新增属性进行解析
属性 | 描述 |
---|---|
-moz- | firefox浏览器私有属性 |
-ms- | IE浏览器私有属性 |
-webkit- | chrome、safari私有属性 |
-o- | Opera私有属性 |
如果前面为空代码全局,如果前面有某个元素的css选择器代表改元素的对于内容 1、输入框
::-webkit-input-placeholder {}
2、阻止input出现黄色背景
input:-webkit-autofill {
background-color: #fff !important;
-webkit-box-shadow: inset 0 0 0 1000px white !important;
}
3、清除input[type=”number”]侧边的箭头
/* chrome */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
-webkit-appearance: none!important;
margin: 0;
}
/* Firefox */
input[type=number]{
-moz-appearance: textfield;
}
或
input::-webkit-inner-spin-button { -webkit-appearance: none; }
4、禁用选择文本
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
CSS 伪类
选择器 | 例子 | 例子描述 |
---|---|---|
:active | a:active | 选择活动的链接。 |
:checked | input:checked | 选择每个被选中的 <input> 元素。 |
:disabled | input:disabled | 选择每个被禁用的 <input> 元素。 |
:empty | p:empty | 选择没有子元素的每个<p> 元素。 |
:enabled | input:enabled | 选择每个已启用的 <input> 元素。 |
:first-child | p:first-child | 选择作为其父的首个子元素的每个 <p> 元素。 |
:first-of-type | p:first-of-type | 选择作为其父的首个 <p> 元素的每个<p> 元素。 |
:focus | input:focus | 选择获得焦点的 <input> 元素。 |
:hover | a:hover | 选择鼠标悬停其上的链接。 |
:in-range | input:in-range | 选择具有指定范围内的值的 <input> 元素。 |
:invalid | input:invalid | 选择所有具有无效值的 <input> 元素。 |
:lang(language) | p:lang(it) | 选择每个 lang 属性值以 "it" 开头的 <p> 元素。 |
:last-child | p:last-child | 选择作为其父的最后一个子元素的每个 <p> 元素。 |
:last-of-type | p:last-of-type | 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。 |
:link | a:link | 选择所有未被访问的链接。 |
:not(selector) | :not(p) | 选择每个非 <p> 元素的元素。 |
:nth-child(n) | p:nth-child(2) | 选择作为其父的第二个子元素的每个 <p> 元素。 |
:nth-last-child(n) | p:nth-last-child(2) | 选择作为父的第二个子元素的每个<p> 元素,从最后一个子元素计数。 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为父的第二个<p> 元素的每个<p> 元素,从最后一个子元素计数 |
:nth-of-type(n) | p:nth-of-type(2) | 选择作为其父的第二个<p> 元素的每个<p> 元素。 |
:only-of-type | p:only-of-type | 选择作为其父的唯一<p> 元素的每个<p> 元素。 |
:only-child | p:only-child | 选择作为其父的唯一子元素的<p> 元素。 |
:optional | input:optional | 选择不带 "required" 属性的 <input> 元素。 |
:out-of-range | input:out-of-range | 选择值在指定范围之外的 <input> 元素。 |
:read-only | input:read-only | 选择指定了 "readonly" 属性的 <input> 元素。 |
:read-write | input:read-write | 选择不带 "readonly" 属性的 <input> 元素。 |
:required | input:required | 选择指定了 "required" 属性的 <input> 元素。 |
:root | root | 选择元素的根元素。 |
:target | #news:target | 选择当前活动的 #news 元素(单击包含该锚名称的 URL)。 |
:valid | input:valid | 选择所有具有有效值的 <input> 元素。 |
:visited | a:visited | 选择所有已访问的链接。 |
::first-line 元素
::first-line 伪元素用于向文本的首行添加特殊样式
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
::first-letter 元素
::first-letter 伪元素用于向文本的首字母添加特殊样式。
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
伪元素和 CSS 类
伪元素可以与 CSS 类结合使用
<p class="intro">这是一段简介!</p>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
CSS - ::before 元素
::before 伪元素可用于在元素内容之前插入一些内容。 下面的例子在每个 <h1>
元素的内容之前插入一幅图像:
h1::before {
content: url(smiley.gif);
}
CSS - ::after 元素
::after 伪元素可用于在元素内容之后插入一些内容。 下面的例子在每个 <h1>
元素的内容之后插入一幅图像:
h1::before {
content: url(smiley.gif);
}
CSS - ::selection 元素
::selection 伪元素匹配用户选择的元素部分。
以下 CSS 属性可以应用于 ::selection:
- color
- background
- cursor
- outline
transition (渐变属性)
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
第一个属性:all就是要变换多个属性,不想麻烦 就写all就完了 第二个属性:过度动画的时间 第三个属性:
属性 | 描述 |
---|---|
linear | 匀速 |
ease | 快启动,慢停止,物理原则 |
ease-in | 先慢,后快 |
ease-out | 先快,后慢 |
ease-out | 先慢,再快,再慢停止 |
CSS 不透明度 / 透明度
opacity 属性的取值范围为 0.0-1.0。值越低,越透明:
img {
opacity: 0.5;
}
img:hover {
opacity: 0.5;
}
使用 RGBA 子元素应用不受影响
div {
background: rgba(76, 175, 80, 0.3) /* 不透明度为 30% 的绿色背景 */
}
CSS 属性选择器
[attribute]
选择器用于选取带有指定属性的元素
带有 target 属性的 <a>
元素
a[target] {
background-color: yellow;
}
[attribute="value"] 选择器用于选取带有指定属性和值的元素。
下例选取所有带有 target="_blank" 属性的 <a>
元素
a[target="_blank"] {
background-color: yellow;
}
[attribute~="value"]
选择器选取属性值包含指定词的元素
下例选取 title 属性包含 "flower" 单词的所有元素
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<h1>CSS [attribute~="value"] 选择器</h1>
<p>title 属性包含 "flower" 的所有图像会有黄色边框。</p>
<img src="/i/photo/klematis.jpg" title="klematis flower" width="150" height="113">
<img src="/i/photo/flower.gif" title="flower" width="224" height="162">
<img src="/i/photo/tree.png" title="tree" width="200" height="358">
</body>
</html>
[attribute|="value"]
选择器用于选取指定属性以指定值开头的元素。
下例选取 class 属性以 "top" 开头的所有元素:
注释:值必须是完整或单独的单词,比如 class="top" 或者后跟连字符的,比如 class="top-text"。
<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
background: yellow;
}
</style>
</head>
<body>
<h1>CSS [attribute|="value"] 选择器</h1>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
[attribute^="value"]
选择器用于选取指定属性以指定值开头的元素。
下例选取 class 属性以 "top" 开头的所有元素:
提示:值不必是完整单词!
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>
<h1>CSS [attribute^="value"] 选择器</h1>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
[attribute$="value"]
选择器用于选取指定属性以指定值结尾的元素。
下例选取 class 属性以 "test" 结尾的所有元素:
提示:值不必是完整单词!
<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: yellow;
}
</style>
</head>
<body>
<h1>CSS [attribute$="value"] 选择器</h1>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
[attribute*="value"]
选择器选取属性值包含指定词的元素。
下例选取 class 属性包含 "te" 的所有元素:
提示:值不必是完整单词!
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>
<h1>CSS [attribute*="value"] 选择器</h1>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
设置表单样式
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}