Html5+CSS3基礎知識彙總-CSS3篇
今天總結的是CSS3的學習內容
一、CSS簡介
CSS3是CSS技術的升級版本,CSS即層疊樣式表(Cascading StyleSheet)。CSS3語言是朝著模組化發展的,把它分解成小的模組,並且加入 更多新的模組進來:
盒子模型 文字特效 邊框圓角 動畫 多列布局 使用者介面 旋轉 漸變 ...
二、CSS3的應用
2.1.超級選擇器
CSS選擇器:使用CSS對html頁面中的元素實現一對一,一對多或者多對一的控制:
選擇器
{
樣式
}
屬性選擇器
在CSS3中追加了三個選擇器:[att*=val];[att^=val];[att$=val]–>att表示為屬性,val表示為屬性的屬性值。[att*=val]:如果元素用att表示的屬性的值中包含val指定的字元,那麼該元素使用這個樣式。
[att$=val]:如果元素用att表示的屬性的屬性值的結尾字元用val指定的字元,那麼該元素使用這個樣式。
[att^=val]:如果元素用att表示的屬性的屬性值的開頭字元為用val指定的字元,那麼該元素使用這個樣式。
注意:
<head>
<meta charset="UTF-8">
<title>css3中的屬性選擇器</title>
<style>
/*1.[att*=val] 此時只有id=section1A的div會擁有該樣式*/
[id*= section1]{
background-color: blueviolet;
}
/*2.[att^=val] 此時只有id=footer的div會擁有該樣式*/
[id^= f]{
background-color: blue;
}
/*3.[att$=val] 此時只有id=sectionB的div會擁有該樣式*/
[id$= B]{
background-color: chartreuse;
}
/*注意!*/
[id$= \-1]{
background-color: crimson;
}
</style>
</head>
<body>
<h1>CSS3中的屬性選擇器</h1>
<div id="section1A">section1A</div>
<div id="sectionB">sectionB</div>
<div id="section2-1">section2-1</div>
<div id="footer">footer</div>
</body>
2.結構性偽類選擇器
(1)類選擇器
使用類選擇器把相同的元素定義成不同的樣式,偽類選擇器是已經定義好的不可以隨便起名。
p.right{
color:red;
}
p.left{
colot:blue;
}
(2)偽類選擇器—-最常見的偽類選擇器:a(使用順序為:未,已,懸,停)
a:link{
color: #ff6600;
}
a:visited{
color: blueviolet;
}
a:hover{
color: aqua;
}
/*滑鼠點選時*/
a:active{
color: darkblue;
}
(3)偽元素選擇器
針對於CSS中已經定義好的偽元素使用的選擇器(first-line;first-letter;before;after)。
選擇器:偽元素{
屬性:值;
}
選擇器.類名:偽元素{
屬性:值;
}
- first-line偽元素選擇器:向某個元素中的第一行文字使用樣式。
- first-letter偽類選擇器:向某個元素中的文字的首字母或者第一個文字使用樣式。
- before:在某個元素之前插入一些內容。
- after:在某個元素之後插入一些內容。
- 可以使用before和after偽元素在頁面中插入文字,影象,專案編號等。
- 插入文字:E:before/after
- 排除一些不需要插入內容的元素:E:none:before/after
- 插入影象
- 插入專案編號
a.在多個標題前加上編號:counter屬性對專案追加編號
- 可以使用before和after偽元素在頁面中插入文字,影象,專案編號等。
元素:before{
content:counter(計數器);
}
元素{
counter-increment:content屬性值中所指定的計數器名稱;
}
b.對編號中新增文字
c.指定編號的樣式
d.指定編號的種類:list-style-type
e.編號巢狀,重置編號
要對哪一個元素進行重置,那麼就在該元素的父元素上進行設定reset。
f.中編號中嵌入大編號
h2:before{
content:counter(大編號計數器)'-'conter(中編號計數器);
g.在字串兩邊巢狀文字元號:open-quoter&close-quoter
<head>
<meta charset="UTF-8">
<title>偽元素選擇器</title>
<style>
p:first-line{
color: blueviolet;
}
p:first-letter{
color: aqua;
}
li:before{
content: "~~~";
color: #000;
}
li:after{
content: "~~~";
color: darkred;
}
</style>
</head>
<body>
<h1>CSS中主要有四個偽類選擇器</h1>
<p>
CSS中主要有四個偽類選擇器<br />
first-line偽元素選擇器:向某個元素中的第一行文字使用樣式
</p>
<p>
first-letter偽類選擇器:向某個元素中的文字的首字母或者第一個文字使用樣式
</p>
<h4>befor&after</h4>
<ul>
<li><a href="first.html">balabala</a></li>
</ul>
</body>
(4)結構性偽類選擇器
- root選擇器:將樣式繫結到頁面的根元素中。
- not選擇器:只對某個結構元素使用樣式,但該元素下面的子結構元素不使用該樣式。
- empty選擇器:指定當元素中內容為空白時顯示的樣式。
<head>
<style>
/*empty選擇器*/
:empty{
background-color: darkviolet;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td></td>
</tr>
</table>
</body>
- target選擇器:在使用者點選了超連結並轉到target元素後,對頁面中某個target元素指定樣式。
<head>
<style>
/*target選擇器*/
:target{
background-color: blanchedalmond;
color: brown;
}
</style>
</head>
<body>
<h2>target選擇器</h2>
<a href="#A">A</a>
<a href="#B">B</a>
<div id="A">
<h2>A標題</h2>
<p>內容</p>
</div>
<div id="B">
<h2>B標題</h2>
<p>內容</p>
</div>
</body>
- first-child:單獨指定第一個子元素的樣式。
- last-child:單獨指定最後一個子元素的樣式。
- nth-child:選擇器匹配正數下來的第N個子元素,nth-child(odd)為第奇數個子元素,nth-child(even)為第偶數個子元素。
- nth-last-child(n):匹配倒數數下來第n個子元素。
- nth-of-type:正數,當指定元素為標題加內容的時候,如果使用上面的方法會導致真正的指定元素不被成功指定,因此需要使用nth-first-type方法進行指定。
- nth-last-type:倒數,同nth-first-type。
- 迴圈使用樣式:nth-child(An+B)–A 表示每次迴圈中共包括幾種樣式,B表示指定的樣式在迴圈中所處的位置。
- only-child:只對一個元素起作用。
<head>
<meta charset="UTF-8">
<title>結構性偽類選擇器</title>
<style>
/* 選擇器first-child;last-child;nth-child;nth-last-child*/
li:first-child{
background-color: darkviolet;
}
li:last-child{
background-color: chartreuse;
}
li:nth-child(3){
background-color: cadetblue;
}
li:nth-child(odd){
background-color: aquamarine;
}
li:nth-child(even){
background-color: cornflowerblue;
}
li:nth-last-child(3){
background-color: darkgrey;
}
/*迴圈*/
li:nth-child(4n+1){
background-color: aquamarine;
}
li:nth-child(4n+2){
background-color: indianred;
}
/*唯一的*/
li:only-child{
background-color: hotpink;
}
/*存在的問題*/
h2:nth-child(2){
background-color: darkgoldenrod;
}
h2:nth-child(odd){
background-color: darkgoldenrod;
}
h2:nth-child(even){
background-color: darkgoldenrod;
}
h2:nth-of-type(odd){
background-color: chartreuse;
}
h2:nth-of-type(even){
background-color: aquamarine;
}
</style>
</head>
<body>
<h1>選擇器first-child;last-child;nth-child;nth-last-child</h1>
<ul>
<li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li>
<li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li>
<li>No.9</li><li>No.10</li>
<li>No.11</li><li>No.12</li>
</ul>
<h1>唯一的</h1>
<ul>
<li>唯一,多加一個就沒有啦</li>
</ul>
<div id="A">
<h2>A標題</h2><p>內容</p>
<h2>B標題</h2><p>內容</p>
</div>
</body>
3.UI元素狀態偽類選擇器
指定的樣式只有在元素處於某種狀態下才起作用,在預設狀態下不起作用!
4.兄弟元素選擇器
用來指定位於同一父元素之中的某個元素之後的所有其他某個種類的兄弟元素所使用的樣式。一定要是之後的兄弟元素!
<子元素>~<子元素之後的同級兄弟元素>
{
樣式
}
2.2.文字陰影與自動換行
1.text-shadow
p{
text-shadow:length(陰影離開文字的橫方向距離) length(陰影離開文字的縱方向距離) length(陰影模糊半徑) color(陰影顏色)
}
- 位移距離:前兩個引數代表的陰影離開文字的橫(縱)方向距離,不可省略。
- 第三個引數代表模糊半徑,代表陰影向外模糊時候的範圍,數值越大越模糊。
- 當沒有指定顏色值時,會使用預設文字的顏色。
- 指定多個陰影,並且可以針對每個陰影用逗號分隔。
2.word-break:瀏覽器文字自動換行。
3.word-wrap: 長單詞與URL地址自動換行。
4.伺服器端字型和@font-face屬性
- 定義斜體或粗體:在定義字型的時候,可以把字型定義成斜體或者粗體,在使用伺服器伺服器端字型的時候,需要根據斜體還是粗體使用不同的漢字。
- 顯示客戶端字型:首先將font-family設定為本地的字型名,然後將src屬性設定為local(‘字型’)。
- font-variant:設定文字是否大小寫。
- font-weight:設定文字的粗細。
- font-stretch:設定文字是否橫向的拉伸變形。
2.3.盒模型
1.各種盒模型
- inline-block型別
使用inline-block型別來執行分列顯示
<head>
<style>
div.div1{
background-color: #ff6600;
width: 300px;
height: 150px;
float: left;
}
div.div2{
background-color: #21fffc;
width: 200px;
height: 100px;
float: left;
}
div.div3{
background-color: #ef23ff;
width: 500px;
height: 100px;
clear: both;
}
/*inline-block*/
div.div4{
background-color: #ff6600;
display: inline-block;
width: 300px;
}
div.div5{
background-color: #21fffc;
vertical-align: top;
display: inline-block;
width: 200px;
}
div.div6{
background-color: #ef23ff;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<h1>使用inline-block型別來執行分列顯示-1.傳統方式</h1>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<hr color="darkred">
<h1>使用inline-block型別來執行分列顯示-1.inline-block方式</h1>
<div class="div4">
div1div1div1div1div1div1div1
div1div1div1div1div1div1div1div1
div1div1div1div1div1div1div1div1
</div><div class="div5">
div2div2div2div2div2div2div2
div2div2div2div2div2div2div2div2
</div>
<div class="div6">
div3
</div>
</body>
使用inline-block型別來顯示水平選單
<head>
<style>
ul.ul1 li{
float: left;
list-style: none;
padding:5px 20px;
text-align: center;
border-right: 1px solid darkviolet;
width: 200px;
color: wheat;
background-color: mediumvioletred;
}
ul.ul2 li{
list-style: none;
display: inline-block;
padding:5px 20px;
text-align: center;
border-right: 1px solid darkviolet;
width: 200px;
color: wheat;
background-color: mediumvioletred;
}
</style>
</head>
<body>
<h1>使用inline-block型別來顯示水平選單-inline-block</h1>
<ul class="ul2">
<li>A</li><li>B</li><li>C</li><li>D</li>
</ul>
</body>
- inline-table型別
<head>
<style>
table{
display: inline-table;
vertical-align: bottom;
border: 2px solid blueviolet;
width: 400px;
height: 200px;
color: darkviolet;
}
td{
border: 2px solid violet;
}
</style>
</head>
<body>
<h1>使用inline-table型別-一個表格前後都有文字將其環繞</h1>
巴拉巴拉
<table cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
巴拉巴拉
</body>
- list-item型別
可以將多個元素作為列表顯示,同時在元素的開頭加上列表的標記。 - run-in型別和compact型別
- none型別
當元素被指定none後,該元素不會顯示
2.顯示不下的內容
- overflow屬性:指定對盒子中容納不下的內容的顯示辦法
- overflow-x屬性與overflow-y屬性
- textoverflow:在盒子的末尾顯示代表省略符號的‘…’,但是該屬性只在內容在水平位置上超出時顯示。
3.盒子陰影
box-shadow:讓盒在顯示的時候產生陰影的效果
對盒內子元素設定陰影
對一個文字或第一行設定陰影:通過first-line或者first-letter
對錶格和對單元格使用陰影
4.box-sizing寬高計算
指定針對元素的寬度和高度的計算方法
(content)border-box:屬性值表示元素的寬高度(不)包括內補白區域及邊框的寬度高度
<head>
<style>
div.a,div.b{
width: 300px;
padding: 30px;
margin: 20px auto;
border: 30px solid darkviolet;
background-color: violet;
}
div.a{
box-sizing: border-box;
}
div.b{
box-sizing: content-box;
}
</style>
</head>
<body>
<h2>box-sizing:content&border-box</h2>
<div class="ab">
<div class="a">
box-sizing:border-box代表寬度和高度包含內補白寬度高度,即雖然有padding和border,最終仍然為300px
</div>
<div class="b">
box-sizing:content-box:代表不包含寬高度內補白區域,即最後為300px+30px+30px
</div>
</div>
</body>
2.4.邊框和背景樣式
1.新增的背景屬性
background-clip:指定背景的顯示範圍
border-box:從邊框開始
padding-box:從內邊框開始
content-box:從內容開始
background-orgin:指定繪製背景影象的起點
可以指定繪製時的起始位置,預設為padding,可以為border或者content左上角開始繪製。- background-size:指定背景中影象的尺寸
auto
length
percentage:以父元素的百分比設定背景影象的寬高度。
cover:全覆蓋。
contain :與cover相反,主要將背景圖片縮小,來適合佈滿整個容器。
2.顯示多個背景屬性: 第一個影象在最上面
3.圓角邊框:border-radius
指定兩個半徑:左上右下+左下右上
當不顯示邊框的時候,瀏覽器會把四個角繪製成圓角
修改邊框種類。
繪製四個不同半徑的邊框
4.影象邊框:border-image
可以讓元素的長度或寬度處於隨時變化時,變化狀態的邊框統一使用一個影象檔案來進行繪製。
2.5.CSS3變形功能
1.利用transform實現文字或影象的旋轉,縮放,傾斜移動這四種類型的變形處理。
- 旋轉:totate(角度)
- 縮放:scale(值):0.5即為縮放到50%
- 傾斜:skew(值),值為角度
- 移動:translate(值)
- 對一個元素使用多個方法
transform:方法1 方法2 方法 3 方法4 - 改變元素基點
transform-origin:
2.6.CSS3的動功能
1.transition功能:支援從一個屬性值平滑到另外一個屬性值
允許CSS屬性值在一定的時間內平滑的過度,這種效果可以在單擊,獲得焦點,被點選或對元素任何改變中觸發,並圓滑的以動畫效果改變CSS屬性值。
(1)執行變換的屬性:transition-property:過渡即將開始
- none:沒有屬性會獲得過渡效果
- all:所以屬性會獲得過渡效果
- property:定義應用過渡效果的CSS屬性名稱列表,以逗號分隔
(2)變換延續時間:transition-duration:規定完成過渡需要花費的時間,預設值零沒有效果。
(3)在延續時間段,變換速率的變化:transition-timing-function。
(4)變換延遲時間:transition-delay:指定一個動畫開始執行的時間,也就是當改變元素屬性值後多長時間開始執行過渡效果。
<head>
<meta charset="UTF-8">
<title>CSS3中的動畫效果</title>
<style>
div.transition1{
width: 200px;
height: 200px;
background-color: blueviolet;
-webkit-transition:all 1s linear 1s;
}
</style>
</head>
<body>
<h2>transition</h2>
<div class="transition1"></div>
</body>
2.Animations功能:支援通過關鍵幀的指定來在頁面上產生更復雜的動畫現象。
- name:指定合集名稱
- duration:整個動畫執行完成所需時間
- timing-function:實現動畫方法
- iteration-count:重複播放次數
<head>
<style>
div.animation{
width: 20px;
height: 20px;
background-color: #ef23ff;
}
/*關鍵幀的封裝*/
@-webkit-keyframes myan{
0%{
background-color: violet;
width: 50px;
}
10%{
background-color: palevioletred;
width: 100px;
}
30%{
background-color: mediumvioletred;
width: 200px;
}
50%{
background-color: blueviolet;
width: 40px;
}
70%{
background-color: darkviolet;
width: 400px;
}
90%{
background-color: #7300a4;
width: 600px;
}
100%{
background-color: #4a0068;
width: 800px;
}
}
</style>
</head>
<body>
<h2>animation</h2>
<div class="animation"></div>
</body>
2.7.CSS3的分頁
1.點選及滑鼠懸停分頁樣式
2.滑鼠懸停過渡效果:transition: background-color .9s;
3.圓角樣式:border-radius
4.邊框:border:2px solid darkviolet;
2.8.佈局相關樣式
1.多欄佈局
column-count屬性:將一個元素中的內容分成多欄進行顯示,要將元素的寬度設定成多個欄目的總寬度
column-width屬性:指定欄目的寬度來生成分欄
column-gap屬性:指定欄目之間的距離
column-rule:欄目之間新增分隔線
2.盒佈局: 多欄佈局的欄目寬度必須相等,指定欄目的寬度的時候也只能統一指定,但是欄目的寬度不可能全部都一樣,所以多欄佈局比較適合在文字內容頁面顯示,比如新聞。並不適合整個網頁編排時使用。而盒佈局就相對比較隨意一些,可以定義成不同的頁面。
3.彈性盒子佈局
(1)box-flex:使得盒子佈局變成彈性佈局:可以自適應視窗
(2)box-ordinal-group:改變元素的顯示順序
(3)box-orient:改變元素排列方向
- horizontal:在水平行中從左向右排列子元素
- vertical:從上向下垂直排列子元素
<style>
div.all{
display: -webkit-box;
/*-webkit-box-orient: vertical;視窗垂直現實與水平顯示*/
}
.left{
width: 300px;
background-color: #ef23ff;
-webkit-box-ordinal-group:3;
}
.right{
width: 300px;
background-color: #ef23ff;
-webkit-box-ordinal-group: 2;
}
相關推薦
Html5+CSS3基礎知識彙總-CSS3篇
今天總結的是CSS3的學習內容
一、CSS簡介
CSS3是CSS技術的升級版本,CSS即層疊樣式表(Cascading StyleSheet)。CSS3語言是朝著模組化發展的,把它分解成小的模組,並且加入 更多新的模組進來:
HTML5及CSS3基礎知識(持續更新)
一、HTML5基礎
1、HTML概述
HTML: Hyper Text Markup Language 超文字標記語言
超文字: 比普通文字功能更加強大,可以新增各種樣式
標記語言: 通過一組標籤.來對內容進行描述. <關鍵字> , 是由瀏覽器來解釋執行
[html5/Css3] 極客學院CSS3基礎視訊教程 CSS3從入門到精通 極客前端視訊教程
——————-課程目錄——————-
├<1 CSS入門基礎知識>
│ ├1. CSS樣式-背景.mp4
│ ├2. CSS樣式-文字.mp4
│ ├3. CSS樣式-字型.mp4
│ ├4. CSS樣式-連結.mp4
│ ├5. CSS樣式-列表
h5和css3基礎知識總結
這個星期在前端這一塊,發現自己學的並不是很好,知其然不知其所以然,所以在網上查閱了一些基礎知識記錄在自己的部落格上。
表單:
表單元素(標籤)
<datalist> 資料列表(input下的下拉選單)
與input 配合使用
<input type=
css3基礎知識第五章實戰訓練
只需要css就可以達到的效果:導航欄,圖片選中透明效果,背景透明效果,自定義文字選中顏色
導航欄
水平選單
只需在縱向選單的基礎上去掉ul的寬度;li加浮動;然後改一些細節
<!DOCTYPE
HTML5基礎知識彙總
HTML是Hypertext Markup Language的縮寫,中文翻譯為:超文字標記語言
HTML文件結構和基本語法
HTML5基本語法
副檔名.html/.htm
內容型別(Cont
java基礎知識彙總
一:java概述(快速瀏覽):
1991 年Sun公司的James Gosling等人開始開發名稱為 Oak 的語言,希望用於控制嵌入在有線電視交換盒、PDA等的微處理器;
1994年將Oak語言更名為Java;
Java的三種技術架構:
JAVAEE:Java P
java重要基礎知識彙總
Table of Contents
抽象類與介面的區別
問題:什麼時候用介面什麼時候用抽象類?
java為什麼不支援多繼承
單根繼承的優點1:相容性
單根繼承的優點2: 便利性
單根繼承的優點3: 垃圾回收
continue關鍵字和break關鍵字
continu
R語言中tidyverse基礎知識彙總
tidyverse
group_by 分組統計
gather()和spread()
簡單地說,gather()是列轉行,而spread()是行轉列。 請看下面的示例:
> df
id class grade
1 1 a 81
2 2 b 82
3 3
面試題四期-中高階測試工程師基礎知識必備+selenium篇
想漲薪的同鞋,都想搞錢,你做好搞錢的準備了嗎?直接進入正題吧
引言:自動化永遠是避不開的,反正你入職的崗位要不要用自動化,你必須得會一點,加分項。這一塊包括,自動化一些理念和自動化的工具使用。
1.selenium中如何判斷元素是否存
java基礎知識——第1篇
1:常用的DOS命令A:碟符切換碟符: 然後回車B:列出當前目錄下的檔案以及資料夾dir 然後回車C:建立目錄(資料夾) 瞭解md 目錄名稱D:刪除目錄 瞭解rd 目錄名稱E:進入指定目錄a:單級目錄cd 目錄名稱b:多級目錄cd 多級目錄名稱,目錄間用\隔開的F:回退指定目錄a:單
java基礎知識--第六篇
一:繼承(extends)
1.如何表達這個關係呢?
通過extends關鍵字可以實現類與類的繼承
格式:
class 子類名 extends 父類名 {}
父類:基類,超類
子類:派生類
&nbs
Java基礎知識--第五篇
一
二維陣列:一維陣列的陣列。
動態初始化方式一(指定有多少個長度相同的一維陣列):
資料型別[][] 變數名 = new 資料型別[m][n];
m表示這個二維陣列有多少個一維陣列
n表示每一個一維陣列的元素個數
動態初始化方式二(指定二維陣列中有多少個一維
Java基礎知識--第四篇
一、Java的三大特性:封裝、繼承、多型
二、 封裝:是指隱藏物件的屬性和實現細節,僅對外提供公共訪問方式。
優點
A:提高了程式碼的複用性、提高安全性。
將不需要對外提供的內容都隱藏起來。
做法:
java基礎知識——第三篇
java中方法的介紹
函式:Java就是方法。
方法:就是完成特定功能的程式碼塊
格式:
修飾符 返回值型別 方法名(引數型別 引數名1,引數型別 引數名2…) {
實習小白java面試基礎知識彙總-day1
實習小白java面試基礎知識彙總-day1
1.簡單敘述java的跨平臺原理
2.分析JVM,JRE,JDK
3.java基本資料型別
4..面向物件的特徵有哪些方面
5.四個許可權修飾符的區別
6.包裝型別,裝箱和拆箱
10分鐘HTML5入門基礎知識(一)
毫無疑問,對於開發人員而言,
HTML5
已是一個熱點話題。如果你需要快速瞭解HTML5的功能的基本原理,閱讀本文是你最好的選擇。
本文來自The Code Project的付費搜尋位置,由Solution Center提供。這裡的文章致力於向大家提供我們認為對開發人員來說有用和有價值
angular6 開發實踐基礎知識彙總
1 事件處理
1.1 滑鼠移入事件觸發
(mouseenter)=" "
eg:&nbs
網路基礎知識彙總(持續更新)
網路基礎知識彙總
1.網路模型
2.二三層轉發
3.IP路由
4.VLAN
1.網路模型
常見的網路層次劃分有OSI七層協議、TCP/IP四層協議以及TCP/IP五層協議,它們之間的對應關係如下圖所示: 由於工作偏向於底層網路,
C語言易錯基礎知識彙總
以下整理自湖南大學考研真題。
2010年
1、C語言源程式檔案經過C編譯程式編譯連線之後生產一個字尾為“.exe”的檔案
2、以下選項中不正確的整型常量是()
A、12L B、-10 C、1,900 D、123U
3、表示式_____不