柚子快報邀請碼778899分享：CSS基礎(chǔ)筆記
第一課
CSS（層疊式樣式表）；樣式規(guī)則由 選擇器、 屬性 以及 屬性值 組成
內(nèi)聯(lián)樣式表、內(nèi)嵌樣式表、外部樣式表
內(nèi)聯(lián)樣式表
寫在標簽里 用 style 屬性進行表示，優(yōu)先級比 內(nèi)嵌 和 外部 高
內(nèi)聯(lián)樣式，h1我是藍色
內(nèi)嵌樣式表
寫在 head 標簽內(nèi)，使用 style 標簽包含，優(yōu)先級比 外部 高
我是紅色
我是綠色，字體大小是 30 px
內(nèi)聯(lián)樣式，h1我是藍色
G
o
o
g
l
e
外聯(lián)樣式表
在 head 標簽內(nèi)，使用 link 標簽外鏈外部文件 .css，優(yōu)先級較低
你好，世界
/* css文件里面只有樣式?jīng)]有標簽 */
body {
background-image: url(../../HTML/材料/img/bj.gif);
}
h1 {
color: pink;
text-align: center;
}
第二課
!importtant 用于定義優(yōu)先級最高
important 后面 才加 分號
你好 世界
你好 藍色
標簽選擇器
就是標簽名的選擇器，對HTML標簽指定樣式規(guī)則。
p {
color: red;
}
div {
color; green;
}
ID選擇器
id 的值必須唯一，id 是標簽內(nèi)的一個 屬性
格式：#id名 {}
id選擇器的使用
id選擇器
id選擇器
id選擇器
id選擇器
類選擇器
可以為標有特定class值的HTML元素指定樣式規(guī)則。
css語法：. 類選擇器名{}
標簽語法：<標簽名 class=“類選擇器名”>
類選擇器
這是class1
這是class2
全局選擇器
可以為頁面所有的HTML頁面的所有元素指定樣式
語法：*{}
* {
margin: 0;
padding: 0;
}
這里兩個清零很重要，因為有的標簽有默認的 margin 和 padding
所以寫頁面的時候，通配符雙清零很重要?。。。?/p>
群組選擇器
語法：選擇器名1 ， 選擇器名2 ， 選擇器名3 ，…
p,div,.class1{
color: red;
}
群組選擇器
這是id選擇器
這是類選擇器
后代選擇器
父子關(guān)系的標簽
語句：父選擇器名 空格 子選擇器名 {}
p span {
color: red;
}
#id1 span {
color: blue;
}
.class1 span {
color: green;
}
后代選擇器
后代選擇器的應(yīng)用
后代選擇器的應(yīng)用
后代選擇器的應(yīng)用
偽類選擇器
用于添加選擇器的一些特殊效果，例如HTML元素在不同狀態(tài)下使用不同的樣式。
使用最多的是 連接的偽類選擇器
link：未訪問連接
visited：已訪問鏈接
hover：鼠標懸停
active：鼠標按下不松的時候
注意 一定要按照順序link，visited，hover，active的順序來寫
/* text-decoration屬性清除默認的下劃線 */
a {
text-decoration: none;
}
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: blue;
}
a:active {
color: black;
}
屬性選擇器
定于屬性選擇器的語法格式：選擇器名[屬性名]{}
子串匹配屬性選擇器
[ab^=“def”] 選擇ab屬性以def開頭的
字體屬性
font：簡寫屬性；font-style font-weight font-size font-family;
斜不斜 粗不粗 大不大/高不高 什么樣
font-size：字體大小
font-weight：字體粗細
font-family：字體
font-style：字形，italic 斜體
/* 符合屬性：簡寫的方式 */
/* font: font-style font-weight font-size font-family; */
p {
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 24px;
font-weight: bold;
font-style: italic;
}
文本屬性
color：文本言責(zé)
line-height：行高
letter-spacing：字符間距
text-indent：縮進
text-decoration：字體的初始化，none就是空，即清除字體樣式
text-align；文本對齊的方式
p {
text-indent: 2em;
text-align: left;
text-decoration: none;
color: brown;
line-height: 50px;
}
text-shadow 陰影：水平偏移 垂直偏移 模糊半徑 顏色值
水平和垂直正值的是右下，負值是左上
模糊半徑不可為負，越小陰影越明顯
.title {
font: italic 700 60px/80px "宋體";
color: rgba(235, 16, 16, 0.856);
text-shadow: 10px 10px 1px green;
}
word-wrap 自動換行
.huanhang {
width: 120px;
border: 1px solid black;
/* 多余字進行換行 */
word-wrap: break-word;
}
font-face 導(dǎo)入自己的字體
@font-face {
font-family: "guaiti";
src: url(./css/怪體2.ttf);
}
div {
font-family: "guaiti";
}
.title {
text-shadow: 5px 5px 10px gray;
color: rgb(192, 12, 12);
}
.author {
color: rgb(231, 149, 163);
text-shadow: 5px 5px 10px gray;
}
背景屬性 background
background-color：背景顏色
background-image：背景圖片
background-repeat：背景重復(fù)，指定只顯示一次背景圖像：no-repeat
background-position: right top; 用于指定背景圖像的位置
background-origin：設(shè)置圖片的相對位置，前提是得有padding，值有content-box：相對于內(nèi)容，padding-box：相對于外盒
div {
background-color: bisque;
}
.fistword {
font-size: 300%;
}
body {
background-image: url(./css/hs.png);
background-repeat: no-repeat;
background-size: 100vw 100vh;
}
.warp {
background-image: url(./css/yks.png);
background-repeat: no-repeat;
background-position: left;
padding: 60px;
background-origin: padding-box;
}
第三課
列表屬性
list-style：簡寫屬性。主要用 none
list-style-image：圖像設(shè)置列表項標志（即用圖片替換 ·）
list-style-position：設(shè)置列表中列表項標志的位置
list-style-type：設(shè)置列表項標志的類型，
/* 主要用于消除列表的默認樣式 */
ul {
list-style: none;
}
/* 用列表做導(dǎo)航欄 */
ul {
height: 300px;
width: 200px;
list-style: none;
text-align: center;
/* margin: 0; */
padding: 0;
}
ul li {
height: 30px;
line-height: 30px;
display: list-item;
color: white;
}
表格屬性
border-collapse：設(shè)置是否把表格邊框合并為單一的邊框，值為 collapse
caption-side：設(shè)置表格標題的位置
vertical-align：設(shè)置文本垂直對齊方式
text-align：設(shè)置文本水平對齊方式
border-spacing：屬性和 cellspacing 類似
.class1 {
border: 1px solid red;
text-align: center;
/* 把表格邊框合并為單一的邊框 */
border-collapse: collapse;
/* 表格居中的css實現(xiàn) */
margin: 0 auto;
}
.class1 tr td {
border: 1px solid blue;
}
.class2 {
border: 1px solid red;
border-spacing: 0;
}
.class2 tr td {
border: 1px solid blue;
}
.class3 {
border: 1px solid red;
border-spacing: 30px;
float: right;
}
.class3 tr td {
border: 1px solid blue;
}
| item | item |
| item | item |
| item | item |
| item | item |
| 測試 | 測試 |
案例
| 900×350 | ||
| 200×170 | 316×170 | 316×170 | 316×170 |
盒子模型
內(nèi)容、內(nèi)邊距、邊框和外邊框
width 和 height 只改變內(nèi)容的大小
margin：外邊框
padding：內(nèi)邊距
border：邊框
邊框 border
寬度：border-width；順序是 上 右 下 左 、上下 左右 、上下 左右、上 左右 下
樣式：border-style；solid 實線
顏色：border-color；
陰影：box-shadow：水平 垂直 陰影半徑 陰影顏色，水平和垂直正值為右下；陰影半徑必須為正值，數(shù)值越小越清晰；
例如 border：1px solid black；
div {
border-style: solid;
background-color: #ffc;
/* border-top-width: 2px;
border-right-width: 3px;
border-bottom-width: 4px;
border-left-width: 5px; */
/* 順序是上右下左 */
border-width: 2px 3px 4px 5px;
width: 300px;
}
span {
/* 順序是 上 左右 下 */
border-width: 2px 5px 2px;
}
邊框圓角 border-radius
border-radius 屬性指定圓角的半徑 若只提供一個值，將全部應(yīng)用到 4 個角 順序按照 左上、右上、右下、坐下（順時針）
邊框圓角
如果是圓形的話
長寬相等的正方形
border-radius為長寬的一半
陰影：box-shadow：水平 垂直 陰影半徑 陰影顏色，水平和垂直正值為右下；陰影半徑必須為正值，數(shù)值越小越清晰；
.top {
height: 500px;
border: 5px solid blue;
border-radius: 10px;
background-color: rgb(36, 36, 170);
text-align: center;
overflow: hidden;
}
.bottom {
background-color: brown;
border-radius: 2px;
box-shadow: 10px 10px 5px green;
}
- 張學(xué)良
- 楊虎城
- 蔣介石
第四課
padding 內(nèi)邊距
padding：內(nèi)邊距的距離值
div {
width: 128px;
height: 128px;
background-color: #ffc;
border-style: solid;
padding: 10px 20px;
}
外邊距中 inline即行內(nèi)元素的注意事項
兩個水平行內(nèi)元素之間的外邊距 margin-right margin-left 為兩個水平行內(nèi)元素的距離之和
兩個垂直行內(nèi)元素之間的外邊距 margin-top margin-bottom 為兩個垂直行內(nèi)元素的距離的最大值的那個
內(nèi)邊距與外邊距 案例
* {
margin: 0;
padding: 0;
}
.context {
border: 1px solid blue;
font-size: 32px;
text-indent: 1em;
padding: 5px 0;
margin: 5px 0;
}
澳門名稱：
澳門簡歷：
日期由來：
紀念活動：
溢出 overflow
hidden：隱藏溢出
scroll：溢出部分用滾動條顯示
visible：默認，直接溢出
div {
width: 200px;
height: 100px;
border: 1px solid black;
}
浮動 float
left：靠左浮動
right：靠右浮動
none：不浮動
浮動元素需要 父級設(shè)置一個寬度，子元素脫離文檔流后不得超過父級的寬度，即 子浮動寬度小于父級寬度
浮動元素屬性設(shè)置后，就算是 inline 即行內(nèi)元素也會變成 block 即塊級元素
float 受父類影響?。?！
div {
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
margin-right: 20px;
}
ul 中 li 變成橫向，需要對 li 進行 float：left
ul {
list-style: none;
}
ul li {
float: left;
margin-right: 20px;
border: 1px solid black;
padding: 5px;
cursor: pointer;
background-color: white;
}
第五課
相對定位 position：relative
position：relative
是相對于 父級元素 的調(diào)動
使用相對定位的盒子對 父級 和 兄弟 并無影響
left：30px
right：30px
top：30px
bottom：30px
#id1 {
background-color: blue;
}
#id2 {
position: relative;
left: 10px;
top: 10px;
background-color: red;
}
絕對定位 position：absolute
相對于 瀏覽器頁面 的調(diào)用
#father {
background-color: blue;
width: 700px;
height: 500px;
}
#father div {
background-color: red;
border: 1px solid yellow;
width: 500px;
height: 100px;
margin: 0 auto;
}
#box2 {
position: absolute;
top: 0;
right: 0;
}
當父元素被定位，box2就會以其 父親 作為絕對定位的基準
#father {
background-color: blue;
width: 700px;
height: 500px;
position: relative; <-----------
}
#box2 {
position: absolute;
top: 10px;
right: 10px;
}
z-index 屬性
用于設(shè)置重疊元素的堆疊順序，默認是0，允許負值。z-index 僅能在定位元素上奏效
越 大 越 在上
#father {
background-color: black;
width: 700px;
height: 500px;
position: relative;
}
#father div {
border: 1px solid yellow;
width: 300px;
height: 100px;
}
#box1 {
background-color: blue;
position: absolute;
left: 10px;
}
#box2 {
background-color: red;
position: absolute;
left: 60px;
}
#box3 {
background-color: green;
position: absolute;
left: 110px;
}
#box1 {
background-color: blue;
position: absolute;
left: 10px;
z-index: 1; <-----------------------
}
#box2 {
background-color: red;
position: absolute;
left: 60px;
z-index: 3; <-----------------------
margin-top: 30px; <-----------------------
}
#box3 {
background-color: green;
position: absolute;
left: 110px;
z-index: 2; <-----------------------
}
小練
#wrap {
width: 800px;
height: 500px;
background-color: green;
margin: 0 auto;
position: relative;
border: 2px solid blue;
}
#box1 {
width: 300px;
height: 200px;
background-color: gray;
position: absolute;
left: 30px;
top: 30px;
}
#box2 {
width: 300px;
height: 200px;
background-color: gray;
position: absolute;
right: 30px;
top: 30px;
}
#box3 {
width: 200px;
height: 200px;
border-radius: 100px;
background-color: blue;
position: absolute;
top: 180px;
left: 300px;
z-index: 2;
border: 2px solid white;
}
#box4 {
width: 400px;
height: 100px;
background-color: red;
position: absolute;
bottom: 30px;
left: 200px;
z-index: 1;
border-radius: 30px;
border: 2px solid white;
}
display 屬性
inline：行內(nèi)元素
block：塊元素
none：無元素，無元素就是 不顯示 里面的內(nèi)容
默認span
默認span
屬性改為 block 的span
屬性改為 block 的span
flex 布局
容器->項目，主軸（水平）、交叉軸（垂直）
柚子快報邀請碼778899分享：CSS基礎(chǔ)筆記
文章鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
亞馬遜全球購隨便看看
換一換
最新留言
- 珠海職業(yè)培訓(xùn)指導(dǎo)服務(wù)官網(wǎng)為http://zhrsj.zhuhai.gov.cn/，成立于2012年，現(xiàn)更名為珠海市職業(yè)訓(xùn)練指導(dǎo)服務(wù)中心。
- 小紅書商家入駐后臺有哪些主要優(yōu)勢？
- 商品售價的制定是一個復(fù)雜的過程，需要考慮哪些因素？
- 9月份的電商節(jié)日包括教師節(jié)、中秋節(jié)和秋分等，各大電商平臺會推出相應(yīng)的促銷活動。
- 神經(jīng)網(wǎng)絡(luò)優(yōu)化中常見的問題包括梯度消失或爆炸、過擬合、計算資源消耗大等。
- Kodi 插件包為 Kodi 用戶提供了廣泛的功能和豐富的體驗，無論是想要觀看 Netflix 大片、收聽 Spotify 音樂，還是觀看直播電視節(jié)目，都可以通過安裝相應(yīng)的插件來實現(xiàn)，考慮到不同用戶的需求和場景，中文語言插件和其他中文插件倉庫也為中文用戶提供了便利。
- 分銷渠道的建立和管理對企業(yè)銷售策略的成功至關(guān)重要。
- 處理網(wǎng)上收款不封的收錢碼，需確認需求、了解規(guī)則、解決無法使用問題及注意賬戶安全。
- 彈幕數(shù)據(jù)分析在B站平臺上的應(yīng)用有助于豐富用戶的互動體驗，但也存在一些挑戰(zhàn)和問題，彈幕數(shù)據(jù)的采集和處理需要開發(fā)者具備一定的技術(shù)知識，而情感分析和內(nèi)容分析則需要專業(yè)的算法支持，用戶行為分析和可視化展示也需要大量的數(shù)據(jù)資源和技術(shù)支持，彈幕數(shù)據(jù)的采集和使用需要遵守相關(guān)的法律法規(guī)，確保不侵犯他人的合法權(quán)益。
- 外貿(mào)稅率計算中，如何確保所有交易都有有效的發(fā)票和合同支持？
