郭進電腦使用筆記: HTML5+CSS(二)

參考資料：佳魁陸淩牛王者歸來HTML5與CSS3權威指南

CSS3屬性選擇器
----------------------------------------------------------

HTML

~~~~~~~~~

<!DOCTYPE html>

<head>

, initial-scale=1.0">

<title>Document</title>

<style>

/* ^開頭字元有 */

[id^=session] {

background-color: #ccc;

}

/* * 有包含 */

[id*=session1] {

background-color: #fae;

}

/* $ 結尾字元 */

[id$=\-1] {

background-color: #f00;

}

</style>

</head>

<body>

</div>

</body>

</html>

----------------------------------------------------------

~~~~~~~~~

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

a[href$=\/]:after,

a[href$=htm]:after,

a[href$=html]:after {

content: "WEB網頁";

color: #f00;

}

a[href$=jpg]:after {

content: "JPEG影像檔";

color: #0f0;

}

</style>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</body>

</html>

類別選取器

<p class="left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, tenetur!</p>

可以隨便命名。

但虛擬類別選取器是CSS中已經定義好的選取器，不能隨便命名。CSS最常使用的虛擬類別選取器是使用在a元素上的選擇器：

a:link{}

a:visited{}

a:hover{}

a:active{}

虛擬元素選取器

針對CSS中已定義好的虛擬元素使用選擇器。

選擇器: 虛擬元素{屬性:值}

也可搭類別使用

選擇器類別: 虛擬元素{屬性:值}

CSS中主要有四個虛擬元素選擇器：

first-line 用於某元素中的第一行文字使用樣式

first-letter 用於某元素中文字的字首使用樣式

before 用於某元素之前插入一些內容

after 用於某元素之後插入一些內容

----------------------------------------------------------

~~~~~~~~~

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

p:first-line {

background-color: rgb(169, 228, 33);

;

}

p:first-letter {

color: #f00;

}

li:before {

content: "**";

}

li:after {

content: "(僅用於測試...)";

font-size: 12px;

color: #f00;

}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>Voluptatem dolorum soluta quia in! Modi molestiae

earum dolorem. Nulla temporibus dolor nostrum eum fugit illo nemo natus perspiciatis possimus, provident

dignissimos?</p>

<ul>

</ul>

</body>

</html>

結構性虛擬類別選擇器

root、not、empty、target

root 頁面根項目。即整個頁面<html>

not 排除某結構下面的子結構元素

empty元素內容空白時使用的樣式

target

----------------------------------------------------------

~~~~~~~~~

<!DOCTYPE html>

<head>

, initial-scale=1.0">

<title>Document</title>

<style>

:root {

background-color: #cc0;

}

body *:not(h1) {

background-color: #fcc;

}

:empty {

background-color: #ccc;

}

</style>

</head>

<body>

<h1>root選擇器</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate nam perspiciatis quas dicta iste earum unde

tempora. Quos consequuntur et maiores. Consequatur, est sit! Rerum eum perspiciatis tenetur. Magni, ipsa.</p>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

target

點擊頁面中超連結，且跳躍到target元素後起作用

----------------------------------------------------------

HTML

~~~~~~~~~

<!DOCTYPE html>

<head>

, initial-scale=1.0">

<title>Document</title>

<style>

:target {

background-color: #adff2f;

}

</style>

</head>

<body>

<a href="#text1">範例文字1</a> |

<a href="#text2">範例文字2</a> |

<a href="#text3">範例文字3</a> |

<a href="#text4">範例文字4</a> |

</p>

<h2>範例文字1

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi dolor perferendis voluptate error facere

iusto eveniet tempore, perspiciatis, cupiditate totam nostrum porro. Laboriosam sint, harum enim facilis

deleniti omnis minus!</p>

</h2>

</div>

<h2>範例文字2

<p>Voluptates quis libero dicta tempora! Velit ab laboriosam eum pariatur non, cupiditate quis iusto

nesciunt et recusandae. Iusto, sunt. Accusantium architecto aut error et dolor. In cumque temporibus

praesentium ratione.</p>

</h2>

</div>

<h2>範例文字3

<p>Quibusdam veritatis eum deleniti doloribus! Quas sed quasi id provident perspiciatis, consequatur

aspernatur! Ea, aliquam? Consequatur, aliquam. Sapiente ea quaerat rem ullam illum voluptatum.

Dignissimos distinctio explicabo adipisci natus cupiditate?</p>

</h2>

</div>

<h2>範例文字4

<p>Odio culpa inventore nostrum, sunt aspernatur architecto quaerat necessitatibus nemo sint cumque velit

doloribus vitae est similique esse ex! Ipsa iste hic sint incidunt dicta sed dolorum aspernatur

consequuntur laborum.</p>

</h2>

</div>

<h2>範例文字5

<p>Sed fuga voluptates inventore! Necessitatibus unde labore maiores? Nesciunt quisquam, distinctio magnam

ex accusantium neque. Commodi fuga sit iure labore hic, perspiciatis ex minima dolorem, deleniti aliquid

quia rem dignissimos.</p>

</h2>

</div>

</body>

</html>

文字陰影

text-shadow: length1 length2 length3 color

length1 陰影離開文字橫向距離

length2 陰影離開文字縱向距離

length3 陰影的模糊半徑

color 陰影的顏色

----------------------------------------------------------

HTML

~~~~~~~~~

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

font-size: 50px;

font-weight: bold;

color: #fff;

text-shadow: 2px 2px 5px #ff0000;

}

</style>

</head>

<body>

<div>

較大為您回憶

</div>

</body>

</html>

方塊陰影+圓角邊框

box-shadow: length1 length2 length3 color

length1 陰影離開方塊橫向距離

length2 陰影離開方塊縱向距離

length3 陰影的模糊半徑

color 陰影的顏色

border-radius: length

length 圓角半徑

----------------------------------------------------------

HTML

~~~~~~~~~

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width: 300px;

font-size: 50px;

font-weight: bold;

text-align: center;

border: 1px solid #dcdcdc;

border-radius: 10px;

box-shadow: 2px 2px 5px #808080;

}

</style>

</head>

<body>

<div>

方塊陰影

</div>

</body>

</html>

box-sizing
----------------------------------------------------------

HTML

~~~~~~~~~

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width: 300px;

padding: 30px;

border: solid 5px #fa0;

background-color: #ff0;

margin: 10px;

}

#d0 {

/* 預設

box-sizing: content-box; */

}

#d1 {

box-sizing: content-box;

/* 元素總寬度=內容+padding*2+border*2+margin*2

元素總寬度=300+30*2+5*2+10*2 */

}

#d2 {

/* 內容=元素可見總寬度-padding*2-border*2

元素總寬度=300-30*2-5*2 */

box-sizing: border-box;

}

</style>

</head>

<body>

習慣當時雲林義務起來一把德國逐步到底，適當進行同學沒有什麼這個為此常見歌曲，範圍內一份是怎麼閲讀說著處理住房教師總部外貿名單打算，一流充滿一項一台治理，刷新正是谷歌面前仍然你不圍繞，演唱醫生某種這個問題，註冊看看，最佳臉上沒有任何，身上反。

</div>

</div>

</div>

</body>

</html>

----------------------------------------------------------

HTML

~~~~~~~~~

----------------------------------------------------------

HTML

~~~~~~~~~

----------------------------------------------------------

HTML

~~~~~~~~~

----------------------------------------------------------

HTML

~~~~~~~~~

郭進電腦使用筆記

內容選單標籤

2021年12月1日星期三

HTML5+CSS(二)

沒有留言:

張貼留言

內容選單標籤

2021年12月1日 星期三

HTML5+CSS(二)

沒有留言:

張貼留言

2021年12月1日星期三