css例項整理-練習大全
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body {
/*1. 設定頁面的背景顏色 */
/* background-color: #55ffff; */
/*2. 設定一個影像作為頁面的背景 */
/* background-image: url(../img/03IO001-full.png); */
/*3.在水平方向重複背景影像 */
/* background-image: url(../img/03DE012-full.png);
background-repeat: repeat-x; */
/*4.定位背景影像 */
/* background-image: url(../img/pic1.jpg);
background-position: right top;
margin-right: 200px;
background-repeat: no-repeat; */
/*5.一個固定的背景圖片（這些圖片不會隨頁面其餘部分滾動） */
/* background-image: url(../img/03IO001-full.png);
background-repeat: no-repeat;
background-attachment: fixed; */
/*6.宣告背景屬性 */
/* background:#55ffff url(../img/03FR002-full.png) no-repeat right top; */
}
.ptext {
/* 1.設定不同格式的文字顏色 */
/* color: red;
color: #FF0000;
color: rgb(1,0,0,0); */
/* 2.文字對齊 */
/* text-align: center*/
/* justify 兩端對齊 left 左對齊 right 右對齊; */
}
.atype {
/* 3.移除連結下劃線 */
/* text-decoration: none; */
/* 4.裝飾文字 text-decoration*/
/* text-decoration: overline; 上劃線 */
/* line-through 刪除線 underline 下劃線 */
/* 5.控制字母大小寫 */
/* text-transform: capitalize; 每個單詞以大寫字母開頭 */
/* uppercase 全部大寫 lowercase 全部小寫 */
/* 6.縮排文字 */
/* text-indent: 50px; */
/* 7.指定字元之間的空間 */
/* letter-spacing: 2px; */
/* 8.指定行與行之間的空間 */
/* line-height: 200%; */
/* 9.設定元素的文字方向 */
/* direction: rtl; 右邊 */
/* 10.單詞之間的空格 */
/* word-spacing: 30px; */
/* 11.元素內禁用文字換行 */
/* white-space: nowrap; */
/* 12.內部文字影像的垂直對齊 */
/* vertical-align: text-bottom ;text-top; */
}
.ptext2 {
/* 1.設定文字的字型 */
/* font-family: "times new roman",times,serif;
預設第一個字型，瀏覽器不支援依次選用後面的*/
/* 2.設定字型大小 */
/* font-size: 100%; 250% */
/* 3.用px設定字型的大小 */
/* font-size: 90px; */
/* 4.用em設定字型的大小 */
/* font-size: 5.625rem; */
/* 5.設定字型樣式 */
/* font-style: normal;
italoc 斜體 oblique 斜體*/
/* 6.設定字型的異體 */
/* font-variant: normal; small-caps 使用小的大寫字母代替小寫字母*/
/* 7.設定字型的粗細 */
/* font-weight: 900; normal 正常 lighter 細體 bold 粗體 */
/* 8.在一個宣告中寫所有字型屬性 */
/* font:15px arial,sans-serif;
font:italic bold 12px/30px georgia,serif; */
}
/* a:link {color:#000000;} 未訪問連結
a:visited {color:#00FF00;} 已訪問連結
a:hover {color:#FF00FF; text-decoration:underline;} 滑鼠移動到連結上
a:active {color:#0000FF;} 滑鼠點選時 */
ul {
/* list-style-type: circle; 空心圓
disc 實心圓
square 實心正方形
*/
/* list-style-image: url(../img/03DE012-full.png);
*/
/* list-style:square url("sqpurple.gif"); 宣告所有*/
}
ol {
/* list-style-type: armenian
cjk-ideographic decimal decimal-leading-zero;
*/
}
table {
/* border-collapse: collapse; 合併表格的雙邊框 */
}
caption {
caption-side: bottom;
}
/* 設定表格標題位置*/
.border {
width: 200px;
height: 200px;
/* border-style: none;
dotted 點虛線邊框 dashed -虛線邊框
solid 實線邊框 double 雙邊框 groove 凹槽邊框
ridge 壟狀邊框 inset 嵌入邊框 outset 外凸邊框
hidden 隱藏邊框
*/
/* border: #000000 solid 1px; 宣告所有屬性*/
/* outline: #00FF00 dotted thick; 外輪廓 在border外邊*/
/* outline-style: solid;
outline-color: #000000;
outline-width: 1px; */
}
.margin {
/* margin: 10px 20px 30px 40px ; 上右下左 */
/* margin: 10px 20px; 上下 左右 */
/* margin-top: 2cm;
margin-top: 25%; */
}
.padding {
/* padding-top: 10px;
padding-top: 2cm;
padding-top: 25%; */
}
.heightandwidth {
/* height: 20px;
width: 2cm;
max-width: 25%;
max-height: 25px;
min-height: 2cm;
min-width: 90px; */
}
.hidden {
/* visibility: hidden; 隱藏元素 仍然佔用空間*/
/* display: none; 不顯示元素 不佔用空間 */
/* display: inline; 在一行中 */
/* display: block; 塊級元素 會自動換行 */
}
tr{
/* visibility: collapse; 在table 的tr行中宣告 不顯示行*/
}
.xposition{
/* position: fixed; 固定定位 頁面滑動也不會改變位置
position: absolute; 絕對定位 可以定位在父元素的固定位置
position: relative; 相對定位 相對於本該出處於的位置偏移
*/
/* z-index: -1; 相對於普通元素 它會顯示在後面 */
/* clip:rect(0px,60px,200px,0px); 設定元素的形狀為矩形 */
}
.overflow{
/* overflow: hidden; 超出的文字不顯示
overflow: scroll; 設定滾動條,可以滾動檢視超出的文字
overflow: visible; 多餘的文字會超出 預設
overflow: auto; 自動選擇 */
}
.cursor{
/* 更改滑鼠放置時的游標 */
/* cursor: auto; 自動選擇
cursor: crosshair; 十字架
cursor: default; 預設
cursor: e-resize; 左右拉伸的箭頭 ⬅→
cursor: help 問號
cursor: move; 十字箭頭 移動
cursor: n-resize; 上下拉伸的箭頭
cursor: ne-resize; 左下右上拉伸的箭頭
cursor: nw-resize; 左上右下拉伸的箭頭
cursor: pointer; 小手 表示可點選
cursor: progress; 滑鼠右上出現轉圈
cursor: s-resize; 上下拉伸的箭頭
cursor: se-resize; 左上右下拉伸箭頭
cursor: sw-resize; 右上左下拉伸
cursor: text; 文字編輯
cursor: w-resize; 左右拉伸
cursor: wait; 等待 轉圈*/
}
.float{
float: right;
/*好的例項 https://www.runoob.com/try/try.php?filename=trycss_float6 */
}
.align{
/* margin: auto; 水平居中 */
/* float: right; 右對齊 */
/* position: absolute;
right: 0; 右對齊 */
}
a:after {
content: " (" attr(href) ")";
/* 將a標籤的連結插入到文字後面 */
}
/* 設定標題的數字計數
1.
1.1
1.2
2.
2.1
2.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) " ";
} */
/* quotes 屬性指定了引號
q:lang(en)
{
quotes: "~" "~" "'" "'";
} */
input[type="text"]:focus{
/* 焦點 */
background-color: #00FF00;
}
/* p:first-child{} 匹配第一個p元素 */
/* p>i:first-child{} 匹配p元素中第一個i元素 */
/* p:first-child i{} 匹配第一個p元素中所有i元素 */
/* p:first-letter{ color: #00FF00;} p元素中第一個字母*/
/* p:first-line{} p元素的第一行*/
/* h1:before {content:url(smiley.gif);} 在標題前面插入圖片 */
/* h1:after {content:url(smiley.gif);} 在標題後面插入圖片 */
.ximg{
/* 設定透明度 1.0不透明*/
opacity:0.4;
filter:alpha(opacity=40); /* 適用 IE8 及其更早版本 */
/*好的例項 https://www.runoob.com/try/try.php?filename=trycss_transparency */
}
img.home {
width: 46px;
height: 44px;
background: url(/images/img_navsprites.gif) 0 0;
/* 影像拼合
把小影像都放在一個圖片中，引用時定位位置使用小影像
詳細介紹 https://www.runoob.com/css/css-image-sprites.html
*/
}
/*
屬性選擇器
[title] 選擇具有title屬性的元素
[title=runoob] 選擇title屬性是runoob的元素
[title~=hello] 選擇title中包含hello的元素
[lang|=en] 選擇lang型別名稱含有 'en' 的元素
*/
</style>
<body>
<p class="ptext"> 文字文字文字文字文字文字文字文字文字</p>
<a class="atype">baidu</a>
<p class="ptext2">you have a cute cat.</p>
<a class="atype2">百度</a>
<table border="1">
<caption>Table 1.1 Customers</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</table>
<div class="border"></div>
</body>
</html>
相關文章
- json例項練習 json物件JSON物件
- CSS學習摘要-定位例項CSS
- 前端例項練習 – 模態相簿前端
- 一個pyspark 開發練習例項Spark
- C#開發例項大全C#
- 遞迴函式例項大全遞迴函式
- Java-發紅包例項-繼承練習Java繼承
- [邊學邊練]用簡單例項學習React單例React
- css梯形程式碼例項CSS
- css麵包屑例項CSS
- Python例項大全（基於Python3.7.4）Python
- 例項總結Oracle知識點大全Oracle
- MySQL碎片整理小節--例項演示MySql
- css選擇器，帶例項CSS
- CSS 選擇器 - 帶例項CSS
- 純css tab選項卡程式碼例項CSS
- 通過10個例項小練習，快速熟練 Vue3.0 核心新特性Vue
- 運動員與教練例項
- CSS例項詳解：Flex佈局CSSFlex
- CSS 例項之開啟大門CSS
- CSS空心箭頭程式碼例項CSS
- CSS橢圓效果程式碼例項CSS
- CSS條紋背景程式碼例項CSS
- CSS 例項之翻轉圖片CSS
- CSS 隔行變色程式碼例項CSS
- CSS 例項系列 - 02 - 2023 兔年祝福CSS
- JavaSE基礎學習知識整理大全Java
- Makefile例項學習
- 整理了這23個開源項，初學者可以拿來練習！
- CSS3 animation 練習CSSS3
- python例項建立銷燬的函式整理Python函式
- CSS-Flex 佈局教程：例項篇CSSFlex
- CSS 例項之文字的凸起與凹陷CSS
- CSS3卡通形象程式碼例項CSSS3
- css3水滴效果程式碼例項CSSS3
- css背景虛化效果程式碼例項CSS
- css繪製圓形程式碼例項CSS
- CSS 例項系列 - 01 - Tab 滑動門CSS