CSS結構的基礎認知

css的屬性值與html的屬性值用法不相上下,但是css主要分為內聯樣式表和外聯樣式表。

內聯樣式表用法:在html文件中的《head》頭文件中添加<style></style>標簽,在標簽內添加所需的屬性值,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>

外聯樣式表用法:在同一項目的目錄下創建css為拓展名的文件,在文件編寫所需屬性和個人style,在HTML內編寫代碼:<link rel="stylesheet" href="文件名" />進行調用。

CSS樣式表規則中class標記和超鏈接的用法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p.first{text-indent: 0.5in;}
p.second{text-indent: 1.0in;}
.main01{font-size: 10pt;color: red;}
#01{font-size: 10pt;color: yellow;}
#02{font-size: 12pt;color: blue;}

        //屬性:link鏈接本身;visited被訪問過時;hover指向時;a:link{font-size: 10pt;color: blue;text-decoration: none;}a:visited{font-size: 13pt;color: gray;text-decoration: underline;}a:hover{font-size: 16pt;color: red;text-decoration: overline;}</style>
</head>
<body><!--創建class-->//<標記 class="類名"></標記>//直接用class定義段落的縮進大小<p class="first">這個段落縮進0.5in</p><p class="second">這個段落縮進1.0in</p>//<標記 class="類名"></標記>//調用.main01定義段落和單元格的屬性<p calss=".main01"></p><td calss="main01"></td>//<標記 id="id名"><font id="01">php是世界上最好的語言</font><font id="02">php是世界上最好的語言</font><!--超鏈接--><a href="http://www.baidu.com">first</a>《style中的屬性一一對應body中class和超鏈接的用法》

這是一些關于css的屬性注釋:
/文本對齊/
h1{text-align:center}
/文本縮進/
h1{text-indent: 50px;}
/行高/
body{line-height: 120%;}
/字間距/
body{letter-spacing: 0.1cm;}
/文本裝飾/
h3{text-decoration: underline;}
/垂直對齊/
<p>平方值:3<font style="vertical-align:super">2</font></p>
/文本變換/
p{txet-transform:capitalize}

轉載于:https://blog.51cto.com/13881481/2151580

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/390039.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/390039.shtml
英文地址,請注明出處:http://en.pswp.cn/news/390039.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

BZOJ1453: [Wc]Dface雙面棋盤

Time Limit: 10 Sec Memory Limit: 64 MB Submit: 784 Solved: 422 [Submit][Status][Discuss] Description 佳佳有一個 nnn 行 nnn 列的黑白棋盤&#xff0c;每個格子都有兩面&#xff0c;一面白色&#xff0c;一面黑色。佳佳把棋盤平放在桌子上&#xff0c;因此每個格子恰好一…

用戶體驗數據分析 書單_如何使用數據改善用戶體驗設計

用戶體驗數據分析 書單In the current age of technology, if an entrepreneur comes up with a grand idea, chances are they’ll need a pretty sweet website to go along with it. And if they want their idea to really sell, they will also need a website that reall…

推薦11個實用的JavaScript庫

2019獨角獸企業重金招聘Python工程師標準>>> JavaScript 仍然是 2018 年最受歡迎和使用最為廣泛的編程語言&#xff0c;因此 JavaScript 生態系統也會繼續發展壯大。 然而&#xff0c;JavaScript 的標準庫仍然繼續保持“短小精悍”的身材。為了填補標準庫功能方面的…

371. 兩整數之和

371. 兩整數之和 給你兩個整數 a 和 b &#xff0c;不使用 運算符 和 - ???????&#xff0c;計算并返回兩整數之和。 示例 1&#xff1a; 輸入&#xff1a;a 1, b 2 輸出&#xff1a;3 示例 2&#xff1a; 輸入&#xff1a;a 2, b 3 輸出&#xff1a;5 提示&a…

【福利】微信小程序精選Demo合集

小編最近在開發小程序&#xff0c;也讀到了不少優秀的小程序源碼&#xff0c;項目中有些需求可以直接從源碼里粘貼復制過來&#xff0c;雖然這樣做不利于自己獨立編寫代碼&#xff0c;但比較是給公司做項目啊&#xff0c;秉著效率第一的原則&#xff0c;簡直沒有什么比ctrlc,ct…

639. 解碼方法 II

639. 解碼方法 II 一條包含字母 A-Z 的消息通過以下的方式進行了編碼&#xff1a; A -> 1 B -> 2 ... Z -> 26要 解碼 一條已編碼的消息&#xff0c;所有的數字都必須分組&#xff0c;然后按原來的編碼方案反向映射回字母&#xff08;可能存在多種方式&#xff09;。…

[cpyhon源代碼]dict對象原理學習

Cpython 2.7 分支中&#xff0c;dict 對象的源代碼 lookdict 搜索算法 1 static PyDictEntry *2 lookdict(PyDictObject *mp, PyObject *key, register long hash)3 {4 register size_t i;5 register size_t perturb;6 register PyDictEntry *freeslot;7 regis…

熊貓數據集_熊貓邁向數據科學的第一步

熊貓數據集I started learning Data Science like everyone else by creating my first model using some machine learning technique. My first line of code was :通過使用某種機器學習技術創建我的第一個模型&#xff0c;我開始像其他所有人一樣學習數據科學。 我的第一行代…

SQLServer鎖的機制

SQLServer鎖的機制&#xff1a;共享鎖(S)排它鎖(X)更新鎖(U)意向共享 (IS)意向排它 (IX) 意向排它共享 (SIX)架構修改(Sch-M) 架構穩定性(Sch-S)大容量更新&#xff08;BU&#xff09;轉載于:https://www.cnblogs.com/yldIndex/p/8603902.html

你是否具有價值

一個有價值的人往往受歡迎的程度才會高。白天上午花了兩個多小時的時間幫前同事遠程解決了服務器部署時由于防火墻機制問題引起的系統功能失敗的問題。解決完這個問題之后&#xff0c;同事的心情很愉悅&#xff0c;其實我自己的心情也很愉悅&#xff0c;看來人都有幫助別人和被…

為什么選擇做班級管理系統_為什么即使在平衡的班級下準確性也很麻煩

為什么選擇做班級管理系統Accuracy is a go-to metric because it’s highly interpretable and low-cost to evaluate. For this reason, accuracy — perhaps the most simple of machine learning metrics — is (rightfully) commonplace. However, it’s also true that m…

使用Chrome開發者工具調試Android端內網頁(微信,QQ,UC,App內嵌頁等)

使用Chrome開發者工具調試Android端內網頁(微信&#xff0c;QQ&#xff0c;UC&#xff0c;App內嵌頁等) 傳送門轉載于:https://www.cnblogs.com/momozjm/p/9389912.html

517. 超級洗衣機

517. 超級洗衣機 假設有 n 臺超級洗衣機放在同一排上。開始的時候&#xff0c;每臺洗衣機內可能有一定量的衣服&#xff0c;也可能是空的。 在每一步操作中&#xff0c;你可以選擇任意 m (1 < m < n) 臺洗衣機&#xff0c;與此同時將每臺洗衣機的一件衣服送到相鄰的一臺…

netflix的準實驗面臨的主要挑戰

重點 (Top highlight)Kamer Toker-Yildiz, Colin McFarland, Julia GlickKAMER Toker-耶爾德茲 &#xff0c; 科林麥克法蘭 &#xff0c; Julia格里克 At Netflix, when we can’t run A/B experiments we run quasi experiments! We run quasi experiments with various obje…

網站漏洞檢測針對區塊鏈網站安全分析

2019獨角獸企業重金招聘Python工程師標準>>> 目前移動互聯網中&#xff0c;區塊鏈的網站越來越多&#xff0c;在區塊鏈安全上&#xff0c;很多都存在著網站漏洞&#xff0c;區塊鏈的充值&#xff0c;會員賬號的存儲性XSS竊取漏洞&#xff0c;賬號安全&#xff0c;等…

223. 矩形面積

223. 矩形面積 給你 二維 平面上兩個 由直線構成的 矩形&#xff0c;請你計算并返回兩個矩形覆蓋的總面積。 每個矩形由其 左下 頂點和 右上 頂點坐標表示&#xff1a; 第一個矩形由其左下頂點 (ax1, ay1) 和右上頂點 (ax2, ay2) 定義。 第二個矩形由其左下頂點 (bx1, by1) …

微觀計量經濟學_微觀經濟學與數據科學

微觀計量經濟學什么是經濟學和微觀經濟學&#xff1f; (What are Economics and Microeconomics?) Economics is a social science concerned with the production, distribution, and consumption of goods and services. It studies how individuals, businesses, governmen…

NPM 重新回爐

官方教程傳送門( 英文 ) 本文主要是官方文章的精煉,適合想了解一些常用操作的同學們 NPM 是 基于node的一個包管理工具 , 安裝node環境時會自帶安裝NPM. NPM版本管理 查看現有版本 npm -v 安裝最新的穩定版本 npm install npmlatest -g 安裝最新的測試版本 npm install npmn…

1436. 旅行終點站

1436. 旅行終點站 給你一份旅游線路圖&#xff0c;該線路圖中的旅行線路用數組 paths 表示&#xff0c;其中 paths[i] [cityAi, cityBi] 表示該線路將會從 cityAi 直接前往 cityBi 。請你找出這次旅行的終點站&#xff0c;即沒有任何可以通往其他城市的線路的城市。 題目數據…

如何使用fio模擬線上環境

線上表現 這里我想通過fio來模擬線上的IO場景&#xff0c;那么如何模擬呢&#xff1f; 首先使用iostat看線上某個盤的 使用情況&#xff0c;這里我們需要關注的是 avgrq-sz, avgrq-qz. #iostat -dx 1 1000 /dev/sdk Device: rrqm/s wrqm/s r/s w/s rkB/s …