《精通CSS 第三版》
-
缩写词解释.css
/*缩写词下面加一条下划线，悬停状态的鼠标指针改为问号*/
abbr[title] {
border-bottom : 1px dotted #999;
}
abbr[title]:hover {
cursor:help;
}
-
段落首字下沉.css
<h1>Title</h1>
<section class='chapter'>
<p>content</p>
</section>
.chapter::before {
content:'”'; /*插入逗号*/
font-size:15em;
}
.chapter p::first-letter { /*首字母*/
float:left;
font-size:3em;
font-family:Georgia , Times , "Times New Roman" , serif;
}
.chapter p::first-line {
font-family:Georgia , Times , "Times New Roman" , serif;
text-transform:uppercase; /*全部大写*/
}
-
邮箱地址无效的时候输入框变红.css
/* 如果输入框中包含有效的电子邮件地址 */
input[type="email"]:valid{
border-color:green;
}
/* 如果输入框中的内容不是有效的电子邮件地址 */
input[type="email"]:invalid {
border-color:red;
}
-
媒体对象布局模式.css
.media-block {
background-color:gray;
border:solid 1px black;
}
.media-fig {
float:left;
width:30%; /* 给文本留出70%的宽度 */
}
.media-body {
float:right;
width:65%; /* 左边再留出一点空隙来*/
}
<div class="media-block">
<img class="media-fig" src="/img/pic.jpg" alt="The pic" />
<div class="media-body">
<h3>Title</h3>
<p>content</p>
</div>
</div>
-
媒体对象布局模式优化.css
.media-block {
background-color:gray;
border:solid 1px black;
}
.media-fig {
float:left;
margin-right: 5%;
}
.media-body , .media-block {
overflow:auto;/**触发块级格式化上下文/
}
<div class="media-block">
<img class="media-fig" src="/img/pic.jpg" alt="The pic" />
<div class="media-body">
<h3>Title</h3>
<p>content</p>
</div>
</div>
-
多栏的文本基线对齐.css
/* h2 是72px高，h3 是48px 高 ，文本是默认 16px 高。h2和h3是征文行高的整数倍。*/
h2 {
font-size: 1.75em; /* 28px */
line-height:1.25; /* 28*1.25=35px */
margin-top: 1.036em; /* 29px */
margin-bottom : .2859em; /* 8px */
}
h3 {
font-size: 1.314em; /* 21px */
line-height:1.29; /* 21*1.29=27px */
margin-top: .619em; /* 13px */
margin-bottom : .38em; /* 8px */
}
-
压印、浮雕标题.css
.impressed {
background-color : #6990e1;
color : #31446B;
text-shadow : 0 -1px 1px #b3d6f9 , 0 1px 0 #243350;
}
.embossed {
background-color : #3c5486;
color : #92B1EF;
text-shadow : 0 -1px 0 #243350 , 0 1px 0 #def2fe;
}
-
仿手写广告牌字体.css
h1 {
font-family : Nunito ,"Arial Rounded MT Bold","Helvetica Rounded" , Arial,san-serif;
color : #d0bb78 ;
text-transform : uppercase;
font-weight:700;
text-shadow:
-1px 1px 0 #743132,
-2px 2px 0 #743132,
-3px 3px 0 #743132,
/* 以 1px 为单位累加 */
-22px 22px 0 #743132,
-23px 23px 0 #743132;
}
-
评论气泡小三角形.css
.comment{
position: absolute;
width: 4em;
margin-left: -2.5em;
margin-top: -0.5em;
background-color: #dcf0ff;
}
.comment:after { /*用为元素添加的小三角*/
position: absolute;
content: '';
display: block;
width: 0;
height: 0;
border: .5em solid #dcf0ff;
border-bottom-color: transparent; /*边框部分透明*/
border-right-color: transparent;
position: absolute;
right: -1em;
top: .5em;
}
- 三角说明.css
display: block;
border: 14px solid rgba(42,50,61,0.66);
border-top-color: transparent; /*边框部分透明*/
border-left-color: transparent; /*边框部分透明*/
border-right-color: transparent;
-
在空间中行内块的垂直居中.css
.author-image ,
.author-info {
vertical-align: middle;
}
-
在容器里面行内块元素的垂直居中.css
.author-meta:before {
content :'';
display:inline-block;
vertical-align: middle;
height:100%;
}
-
布局中左一，右三.css
.navbar ul {
display:flex
}
.navbar li:first-child {
margin-rgiht:auto;/* 用第一项吃掉剩余所有空间把其他项推到右边 */
}