CSS
一、什么是CSS
- 層疊樣式表（Cascading Style Sheets）
- 對(duì)元素位置的排版進(jìn)行精確控制，實(shí)現(xiàn)結(jié)構(gòu)和樣式的分離
CSS 控制頁(yè)面的展示效果
HTML決定頁(yè)面的結(jié)構(gòu)
二、語(yǔ)法規(guī)范
選擇器+{一條/N條聲明}
- 選擇器：要修改誰(shuí)
- 聲明:具體要修改什么內(nèi)容。聲明的屬性是鍵值對(duì)，用分號(hào)區(qū)分，鍵和值用：
通常情況下，把style放在head中
<style>
p{
color: #23b47f;
/* font-size: 50px; */
}
</style>
這里注釋和html不一樣
三、引入方式
1.內(nèi)部樣式表
- 通過(guò)style標(biāo)簽將CSS嵌套到HTML頁(yè)面中
- style 一般放在 head 中
可以讓樣式和頁(yè)面結(jié)構(gòu)分離，但是當(dāng)CSS內(nèi)容多的時(shí)候，分離的不夠徹底
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: #23b47f;
font-size: 50px;
}
</style>
</head>
2.行內(nèi)樣式表
<h3 style=" color: blueviolet; font-size: 30px;">行內(nèi)樣式表</h3>
- 只針對(duì)某個(gè)標(biāo)簽生效
- 適合簡(jiǎn)易的樣式
- 優(yōu)先級(jí)高，會(huì)覆蓋掉其他的樣式
3.外部樣式
- 創(chuàng)建一個(gè)CSS文件
- 使用Link標(biāo)簽引如CSS
<link rel="stylesheet" href="./demo02.css">
樣式和結(jié)構(gòu)徹底分離
受瀏覽器緩存影響，修改后不一定立即生效
- ctrl+f5強(qiáng)制刷新頁(yè)面
四、選擇器
- 選中頁(yè)面中要指定的標(biāo)簽元素
- 先選中才能設(shè)置
1.選擇器的種類(lèi)
1.基礎(chǔ)選擇器：?jiǎn)蝹€(gè)選擇器構(gòu)成的
1.標(biāo)簽選擇器
p{
/* 標(biāo)簽選擇器 */
color: red;
font-size: 40px;
}
2.類(lèi)選擇器
<p class="html">hello html</p>
<p class="java">hello Java</p>
<p class="html">hello Python</p>
<p class="java">hello eat</p>
.java{
color:chartreuse;
font-size: 30px;
}
.html{
color:blueviolet;
font-size: 50px;
}
.longurage{
font-size: 70px;
}
<p class="html longurage">hello Python</p>
類(lèi)名用 . 開(kāi)頭的
類(lèi)選擇器可以進(jìn)行樣式的疊加，因此兩個(gè)類(lèi)名用空格隔開(kāi)
3.id 選擇器
<p id="fe">前端開(kāi)發(fā)</p>
<p id="server">后端開(kāi)發(fā)</p>
#fe{
color:red;
font-size: 80px;
}
#server{
color: blue;
font-size: 120px;
}
- 同一個(gè)頁(yè)面，id的值為一
- id后加#
4.通配符選擇器
- *選取所有的標(biāo)簽
- 消除所有元素的默認(rèn)樣式。主要消除邊距
* {
background-color:antiquewhite;
}
2.復(fù)合選擇器
- 把多種基礎(chǔ)選擇器綜合運(yùn)用起來(lái)
1.后代選擇器
包含選擇器，選擇父類(lèi)中的子元素
元素1 元素2 {樣式聲明}
ol li{
color: red;
}
ul li{
color: aqua;
}
.hobby li{
color: red;
}
元素 1 和 元素 2 要使用空格分割
元素 1 是父級(jí), 元素 2 是子級(jí), 只選元素 2 , 不影響元素 1
元素 2 不一定非是 兒子, 也可以是孫子
2.子選擇器
.two>a {
color: red;
}
- 只能選擇親兒子
- 使用大于號(hào)分割
3.并集選擇器
- 用于選擇多組標(biāo)簽. (集體聲明)
- 逗號(hào) 分割
div, h3 {
color: red;
}
4.偽類(lèi)選擇器
- 用來(lái)定義元素的狀態(tài)
1.鏈接偽類(lèi)選擇器
a:link 選擇未被訪問(wèn)過(guò)的鏈接
a:visited 選擇已經(jīng)被訪問(wèn)過(guò)的鏈接
a:hover 選擇鼠標(biāo)指針懸停上的鏈接
a:active 選擇活動(dòng)鏈接(鼠標(biāo)按下了但是未彈起)
a:link {
color: black;
/* 去掉 a 標(biāo)簽的下劃線(xiàn) */
text-decoration: none;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: blue;
}
-
清空瀏覽器歷史記錄: ctrl + shift + delete
-
按照 LVHA 的順序書(shū)寫(xiě),把 active 拿到前面去, 就會(huì)導(dǎo)致 active 失效
2 :force 偽類(lèi)選擇器
- 選取獲取焦點(diǎn)的 input 表單元素.
<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
.three>input:focus {
color: red;
}
被選中的表單的字體就會(huì)變成紅色
五、常用元素屬性
1.字體屬性
1.設(shè)置字體
font-family
<style>
.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋體';
}
</style>
++++++++++++++++++++++++++++++++++++++
<div class="font-family">
<div class="one">
這是微軟雅黑
</div>
<div class="two">
這是宋體
</div>
</div>
2.設(shè)置大小
font-size
p {
font-size: 100px;
}
- chrome 默認(rèn)大小是 16px
- 可以給 body 標(biāo)簽使用 font-size
- 標(biāo)題標(biāo)簽需要單獨(dú)指定大小
- 實(shí)際上它設(shè)置的是字體中字符框的高度；實(shí)際的字符字形可能比這些框高或矮
3.設(shè)置粗細(xì)
.font-family .two {
font-family: '宋體';
font-size: 30px;
font-weight: bold;
}
- 700 == bold, 400 是不變粗, == normal
- 取值范圍是 100 ~ 900
4.文字樣式
/* 設(shè)置傾斜 */
font-style: italic;
/* 取消傾斜 */
font-style :normal;
.font-style em {
font-style: normal;
}
<div class="font-style">
<em>傾斜的</em>
<div class="one">
正常的
</div>
</div>
- 經(jīng)常需要把傾斜的改正常
2.文本屬性
RBG
- R (red), G (green), B (blue) 的方式表示顏色(色光三原色)
- 每個(gè)顏色用一個(gè)字節(jié)表示
- 一個(gè)字節(jié)8個(gè)比特位, 表示的范圍是 0-255, 十六進(jìn)制表示為 00-FF
- 255, 255, 255 表示白色; 0, 0, 0 就表示黑色
1.文本顏色
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
2.文本對(duì)齊
-
控制文字水平方向上的對(duì)齊
-
lorem 生成一長(zhǎng)段文字
<style>
h1 {
text-align: left;
}
h2 {
text-align: center;
}
h3 {
text-align: right;
}
</style>
3.文本縮進(jìn)
-
控制段落的 首行 縮進(jìn) (其他行不影響)
-
單位可以使用 px 或者 em.使用 em 更好,1 個(gè) em 就是當(dāng)前元素的文字大小.
-
縮進(jìn)可以是負(fù)的, 表示往左縮進(jìn). (會(huì)導(dǎo)致文字就冒出)
p {
text-indent: 2em;
/* text-indent: 20px; */
}
4.文本裝飾
underline 下劃線(xiàn). [常用]
none 啥都沒(méi)有. 可以給 a 標(biāo)簽去掉下劃線(xiàn).
overline 上劃線(xiàn). [不常用]
line-through 刪除線(xiàn) [不常用]
p {
text-indent: 2em;
/* text-indent: -20px; */
text-decoration: underline;
}
a {
text-decoration: none;
}
<a href="#">不跳轉(zhuǎn)</a>
5.行高
- 上下文本行之間的基線(xiàn)距離
p {
text-indent: 2em;
/* text-indent: -20px; */
text-decoration: underline;
line-height: 30px;
}
- 行高 = 上邊距 + 下邊距 + 字體大小
3.背景屬性
1.背景顏色
- 默認(rèn)是 transparent (透明) 的. 可以通過(guò)設(shè)置顏色的方式修改
body {
background-color:blanchedalmond;
}
2.背景圖片
- 比 image 更方便控制位置(圖片在盒子中的位置)
div {
width: 500px;
height: 700px;
background-image: url(https://n.sinaimg.cn/spider20240403/541/w889h452/20240403/16f6-1605b48ddfd6cbf9f6f5f4e8e052308f.jpg);
}
url 上可以加引號(hào), 也可以不加
3.背景平鋪
repeat: 平鋪
no-repeat: 不平鋪
repeat-x: 水平平鋪
repeat-y: 垂直平鋪
默認(rèn)是repeat
- 背景顏色和背景圖片可以同時(shí)存在. 背景圖片在背景顏色的上方
div {
width: 700px;
height: 400px;
background-image: url(../image/男.png);
background-repeat: no-repeat;
}
4.背景位置
div {
width: 700px;
height: 400px;
/* background-image: url(https://n.sinaimg.cn/spider20240403/541/w889h452/20240403/16f6-1605b48ddfd6cbf9f6f5f4e8e052308f.jpg); */
background-image: url(../image/男.png);
background-repeat: repeat-y;
background-position: 200px 200px; /*對(duì)背景圖片的位置進(jìn)行移動(dòng)*/
}
參數(shù)的三種風(fēng)格:
- 方位名詞: (top, left, right, bottom)
- 精確單位: 坐標(biāo)或者百分比(以左上角為原點(diǎn))
- 混合單位: 同時(shí)包含方位名詞和精確單位
-
兩個(gè)參數(shù)都是方位名詞, 則前后順序無(wú)關(guān). (top left 和 left top 等效)
-
只有一個(gè)名詞，第二個(gè)默認(rèn)居中（left水平居中）
-
參數(shù)是精確值：第一個(gè)是x,第二個(gè)是y
-
參數(shù)是精確值：只有一個(gè)，是x是值，另一個(gè)默認(rèn)居中
-
混合單位，第一個(gè)是x的，第二個(gè)為y
計(jì)算機(jī)中的平面坐標(biāo)系, 一般是左手坐標(biāo)系(y軸向下)
5.背景尺寸
background-size: 700px 400px;
background-size: 80%;
background-size: cover;
background-size: contain;
- 填寫(xiě)具體的值
- 填百分比
- cover: 擴(kuò)展至足夠大,圖像完全覆蓋背景區(qū)域.超出范圍（溢出盒子）
- contion:擴(kuò)展至完全適應(yīng)內(nèi)容區(qū)域的最大尺寸（被盒子框?。?/li>
4.圓角矩形
通過(guò) border-radius 使邊框帶圓角效果
div {
width: 400px;
height: 200px;
border: 2px green solid;
/*solid顯示線(xiàn)條 */
border-radius: 20px;
}
- length 是內(nèi)切圓的半徑. 數(shù)值越大, 弧線(xiàn)越強(qiáng)烈
生成圓形
- 讓 border-radius 的值為正方形寬度的一半
div {
width: 400px;
height: 400px;
border: 2px green solid;
/*solid顯示線(xiàn)條 */
border-radius: 50%;
}
生成圓角矩形
- border-radius 的值為矩形高度的一半
div {
width: 400px;
height: 200px;
border: 2px green solid;
/*solid顯示線(xiàn)條 */
border-radius: 100px;
}
- 還可以，針對(duì)四個(gè)角分別設(shè)置
border-radius:2em;
等價(jià)于
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
border-radius: 10px 20px 30px 40px;
等價(jià)于
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
六、元素的顯示模式
1.塊級(jí)元素
h1 - h6
p
div
ul
ol
li
- 獨(dú)占一行
- 高度, 寬度, 內(nèi)外邊距, 行高都可以控制
- 和父元素一樣寬
- 是一個(gè)容器(盒子), 里面可以放行內(nèi)和塊級(jí)元素
<style>
.demo1 .parent {
width: 500px;
height: 500px;
background-color: green;
}
.demo1 .child {
/* 不寫(xiě) width, 默認(rèn)和父元素一樣寬 */
/* 不寫(xiě) height, 默認(rèn)為 0 (看不到了) */
height: 200px;
background-color: red;
}
</style>
<div class="demo1">
<div class="parent">
<div class="child">
child1
</div>
<div class="child">
child2
</div>
</div>
</div>
-
文字類(lèi)的元素內(nèi)不能使用塊級(jí)元素
p 標(biāo)簽主要用于存放文字, 內(nèi)部不能放塊級(jí)元素, 尤其是div
2.行內(nèi)元素
a
strong
b
em
i
del
s
ins
u
span
- 不獨(dú)占一行, 一行可以顯示多個(gè)
- 無(wú)法設(shè)置高度, 寬度, 行高
- 默認(rèn)寬度就是本身的內(nèi)容
- 行內(nèi)元素只能容納文本和其他行內(nèi)元素, 不能放塊級(jí)元素
- 行內(nèi)元素 的寬度和高度會(huì)根據(jù)其內(nèi)容進(jìn)行改變
3.行內(nèi)元素和塊級(jí)元素的區(qū)別
1.塊級(jí)元素獨(dú)占一行, 行內(nèi)元素不獨(dú)占一行
2.塊級(jí)元素可以設(shè)置寬高, 行內(nèi)元素不能設(shè)置寬高
3.塊級(jí)元素四個(gè)方向都能設(shè)置內(nèi)外邊距, 行內(nèi)元素垂直方向不能設(shè)置.
4.改變顯示模式
- 使用 display 屬性可以修改元素的顯示模式
- 可以把 div 等變成行內(nèi)元素, 也可以把 a , span 等變成塊級(jí)元素
display: block 改成塊級(jí)元素 [常用]
display: inline 改成行內(nèi)元素 [很少用]
display: inline-block 改成行內(nèi)塊元素
a{
display: block;
}
<a href="#">test1</a>
<a href="#">test2</a
七、盒模型
- 每一個(gè) HTML 元素就相當(dāng)于是一個(gè)矩形的 “盒子”
邊框 border
內(nèi)容 content
內(nèi)邊距 padding
外邊距 margin
1.邊框
粗細(xì): border-width
樣式: border-style, 默認(rèn)沒(méi)邊框. solid 實(shí)線(xiàn)邊框 dashed 虛線(xiàn)邊框 dotted 點(diǎn)線(xiàn)邊框
顏色: border-color
div{
width: 200px;
height: 100px;
border-color: black;
border-style: solid;
border-width: 10px;
}
簡(jiǎn)寫(xiě)： border: black solid 10px;
邊框會(huì)把盒子撐大
- 通過(guò) box-sizing 屬性可以修改瀏覽器的行為, 使邊框不再撐大盒子
div{
width: 200px;
height: 100px;
border-color: black;
border-style: solid;
border-width: 10px;
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
2.內(nèi)邊距
- padding 設(shè)置內(nèi)容和邊框之間的距離
- 默認(rèn)內(nèi)容是頂著邊框來(lái)放置的. 用 padding 來(lái)控制這個(gè)距離
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
簡(jiǎn)寫(xiě)： padding: 5px;
還有按照順時(shí)針寫(xiě)四個(gè)px
3.外邊距
- 控制盒子和盒子之間的距離
div{
border: solid green 5px;
/* margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px; */
/* margin: 5px; */
margin: 5px 5px 6px 6px;
}
4.塊級(jí)元素水平居中
-
前提：指定寬度(如果不指定寬度, 默認(rèn)和父元素一致)
-
把水平 margin 設(shè)為 auto
div{
border: solid green 5px;
width: 200px;
height: 100px;
margin: auto;
/* 居中的是盒子，調(diào)整的是外邊框 */
text-align: center;
}
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
三種寫(xiě)法都可以
- 對(duì)于垂直居中, 不能使用 "上下 margin 為 auto " 的方式
5.去除瀏覽器默認(rèn)樣式
* {
margin: 0px;
padding: 0px;
}
八、彈性布局
1.flex布局的概念
- flex 是 flexible box 的縮寫(xiě)（彈性盒子）
- 任何一個(gè) html 元素, 都可以指定為 display:flex 完成彈性布局
- 本質(zhì)是給父盒子添加 display:flex 屬性, 來(lái)控制子盒子的位置和排列方式
- 當(dāng)父元素設(shè)置為 display: flex 之后, 子元素的 float, clear, vertical-align 都會(huì)失效
div {
height: 700px;
width: 700px;
background-color: green;
display: flex;
/*定義在直接的父級(jí)元素上
加上后不再是行內(nèi)元素，大小為自己設(shè)置的寬高 */
}
- flex container :被設(shè)置display:flex屬性的元素
- flex item: 子元素成為這個(gè)容器的成員?？梢钥v向排列或者橫向排列
- flex direction(主軸)：控制排列方向
2.常用屬性
1.justify-content
- 設(shè)置主軸上的子元素排列方式
justify-content:flex-end;
/* 項(xiàng)目位于容器的結(jié)尾 */
justify-self: start;
/* start是默認(rèn)情況，默認(rèn)在容器的開(kāi)頭 */
平分剩余空間
justify-content: space-between;
/* 項(xiàng)目在行與行直接有間隙 */
justify-content: space-around;
/* 在項(xiàng)目的行之前，行之后，行之間留上空間 */
2.align-items
- 設(shè)置側(cè)軸上的元素排列方式
- align-items 只能針對(duì)單行元素來(lái)實(shí)現(xiàn). 如果有多行元素, 就需要使用 item-contents
align-items: stretch;
align-items:start;
align-items:end;
align-items: center;
align-items: space-around;
align-items: space-between;
stretch(拉伸)是 align-content 的默認(rèn)值
- 如果子元素沒(méi)有被顯示指定高度，就會(huì)填充父元素的高度
點(diǎn)擊移步博客主頁(yè)，歡迎光臨~文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-851860.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-851860.html
到了這里，關(guān)于【前端】CSS（引入方式+選擇器+常用元素屬性+盒模型+彈性布局）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
