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>
