CSS 显示
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">这个段落的高和宽是 100px.</p>
<p>这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本.</p>
</body>
如何隐藏一个元素(visibility:hidden)
h1.hidden {visibility:hidden;}
<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题仍然占用空间。</p>
</body>
如何不显示元素(display: none)
h1.hidden {display:none;}
<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题不占用空间。</p>
</body>
如何显示一个元素的内联元素
<body>
<p>display 属性的值为 "inline"的结果</p>
<p>两个元素显示在同一水平线上。</p>
</body>
如何显示一个元素的块元素
<body>
<span>display 属性值为 "block" 的结果</span>
<span>这两个元素之间的换行符。</span>
</body>
如何使用表格的collapse属性
table, th, td {
border: 1px solid black;
}
tr.collapse {
visibility: collapse;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr class="collapse">
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
CSS定位
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
<body>
<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
元素的相对定位
h2.left {
position: relative;
left: -20px;
}
h2.right {
position: relative;
left: 20px;
}
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="left">这个标题相对于其正常位置向左移动</h2>
<h2 class="right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<P>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</P>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
元素的绝对定位
h2
{
position:absolute;
left:100px;
top:150px;
}
<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>
重叠的元素
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
<body>
<img src="fun.jpg" wdith="100px" height="100px">
<h1>This is a heading</h1>
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
设置元素的形状
img {
position: absolute;
clip: rect(0px,60px,200px,0px); /* 截取图片，使用这个时，必须设置position:absolute;*/
}
<body>
<img src="fun.jpg" wdith="100px" height="100px">
</body>
如何使用滚动条来显示元素内溢出的内容
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
div.ex2 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: hidden;
}
div.ex3 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
div.ex4 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: visible;
}
<body>
<h1>overflow 属性</h1>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<h2>overflow: scroll:</h2>
<div class="ex1">学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！</div>
<h2>overflow: hidden:</h2>
<div class="ex2">学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！</div>
<h2>overflow: auto:</h2>
<div class="ex3">学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！</div>
<h2>overflow: visible (默认):</h2>
<div class="ex4">学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！学的不仅是技术，更是梦想！！！</div>
</body>
如何设置浏览器自动溢出处理
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow:auto;
}
<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。</p>
<div>
当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。
</div>
</body>
更改光标
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
CSS浮动
为图像添加边框和边距并浮动到段落左侧
img
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
<body>
<p>
在下面的段落中,图像将向右浮动。黑色虚线边界添加到图像。
我们还添加了边缘的0 px的顶部和右侧 margin,15 px底部margin,和20 px左侧的margin的图像。使得文本远离图片:</p>
<p>
<img src="logocss.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
标题和图片向右侧浮动
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
<body>
<div>
<img src="logocss.gif" width="95" height="84" /><br>
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>
在上面的段落中,div元素是120像素宽,它包含了图像。
div元素会向右浮动。
Margins 被添加到div使得文本远离div。
Borders和padding被添加到div框架的图片和标题中
</p>
</body>
让段落的第一个字母浮动到左侧
span
{
float:left;
width:1.2em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
<body>
<p>
<span>这</span>是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
<p>
在上面的段落中, 第一个字嵌入在span 元素中。
这个 span 元素的宽度是当前字体大小的1.2倍。
这个 span 元素是当前字体的400%(相当大)， line-height 为80%。
文字的字体为"Algerian"。
</p>
</body>
使用floal属性创建一个图片廊
.thumbnail {
float: left;
width: 110px;
height: 100px;
margin: 5px;
}
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
开启float-clear属性
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
创建一个水平菜单
ul {
float: left;
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
}
li {
display: inline;
}
a {
float: left;
color: white;
background-color: darkorchid;
text-decoration:none;
padding: 0.2em 0.6em;
width: 6em;
border-right: 1px solid white;
}
a:hover {
background-color: red;
}
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p>
上面的示例中,我们让ul元素和元素浮动。
li元素将显示为内联元素(没有换行符的元素之前或之后)。这迫使列表为一行。
ul元素的宽度的100%,每一个超链接列表的宽度6 em(当前字体大小的6倍)。
我们添加一些颜色和边界使其更高档。
</p>
</body>
创建一个没有表格的网页
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
.header {
color: white;
background-color: blue;
text-align: center;
padding: 15px;
}
.footer {
background-color: black;
color: white;
padding: 15px;
}
ul.topmenu {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: lightslategray;
}
ul.topmenu li {
float: left;
}
ul.topmenu li a {
display: inline-block;
padding: 15px;
text-align: center;
text-decoration: none;
color: white;
}
ul.topmenu li a:hover:not(.active){
background-color: black;
}
ul.topmenu li .active {
background-color: green;
}
.sidemenu {
width: 25%;
}
.content {
width: 75%;
}
.container::after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
padding: 15px;
}
.sidemenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.sidemenu ul a {
display: block;
padding: 6px;
margin-bottom: 4px;
text-decoration: none;
background-color: #eee;
color: #666;
}
.sidemenu ul a:hover:not(.active){
color: white;
background-color: lightslategray;
}
.sidemenu ul a.active{
color: white;
background-color: lightskyblue;
}
<body>
<ul class="topmenu">
<li><a href="#" class="active">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<div class="container">
<div class="column sidemenu">
<ul>
<li><a href="#">The Flight</a></li>
<li><a href="#" class="active">The City</a></li>
<li><a href="#">The Island</a></li>
<li><a href="#">The Food</a></li>
<li><a href="#">The People</a></li>
<li><a href="#">The History</a></li>
<li><a href="#">The Oceans</a></li>
</ul>
</div>
<div class="column content">
<div class="header">
<h1>The City</h1>
</div>
<h1>Chania</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>You will learn more about responsive web pages in a later chapter.</p>
</div>
</div>
<div class="footer">
<p>底部文本</p>
</div>
</body>
CSS生成的内容
把括号内的URL用content属性插入到每个链接后面
a:after {
content:"(" attr(href) ")";
}
<body>
<a href="https://www.baidu.com">百度</a>
<p><b>注意:</b>仅当 !DOCTYPE已经定义 IE8支持 content属性</p>
</body>
章节和分节的编号是"第1节","1.1","1.2"等
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}
h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
<body>
<p><b>注意:</b> 仅当 !DOCTYPE已经定义 IE8支持 这个属性.</p>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
quotes属性指定了引号
q:lang(en)
{
quotes: "~" "~" "'" "'";
}
<body>
<p><q>This is a <q>big</q> quote.</q></p>
<p><b>注意:</b>当声明了!DOCTYPE 时， IE8 才支持这些属性。</p>
</body>
使用:焦点
input:focus
{
background-color:yellow;
}
<body>
<form action="demo-form.php" method="get">
First name: <input type="text" name="fname" /><br>
Last name: <input type="text" name="lname" /><br>
<input type="submit" value="提交" />
</form>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明时 IE8 支持 :focus.</p>
</body>
:first-child-匹配了第一个p元素
p:first-child
{
color:blue;
}
<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经声明.</p>
</body>
:first-child-匹配了p元素中的第一个i元素
p > i:first-child
{
color:blue;
}
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当 :first-child 作用于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经定义.</p>
</body>
:first-child-匹配了第一个p元素中的所有i元素
p:first-child i
{
color:blue;
}
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当:first-child 作用于 IE8 及更早版本的浏览器, DOCTYPE 必须已经定义.</p>
</body>
使用:lang
q:lang(no)
{
quotes: "~" "~";
}
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p>
</body>
CSS伪元素
把文本的第一个字母设为特殊的字母
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
<body>
<p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式：</p>
</body>
把第一行文字设置为特殊
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
<body>
<p>你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。</p>
</body>
把第一行文字的第一个字母设置为特殊
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
<body>
<p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母
设置特殊样式。</p>
</body>
使用:在一个元素之前插入一些内容
h1:before {content:url(smiley.gif);}
<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
</body>
