難點(diǎn)&重點(diǎn):東西太多了吧.....
- 各類選擇器的適用和區(qū)別 (https://blog.csdn.net/LIUCHUANQI12345/article/details/109170492)
- 選擇器的優(yōu)先級(https://blog.csdn.net/hellow_tommer/article/details/121566718)
- 取色器
- css的繼承性
- 行高和font-size line-height詳解
- 行內(nèi)元素,塊狀元素,內(nèi)聯(lián)元素
- 盒子模型,margin注意事項(xiàng)
- 相對位置
- 浮動(dòng)
CSS全稱為層疊樣式表(cascading style sheets),css也是一種標(biāo)記語言,用于給html結(jié)構(gòu)設(shè)置樣式,與HTML關(guān)系是這樣的,HTML搭建結(jié)構(gòu),CSS添加樣式,實(shí)現(xiàn)了:結(jié)構(gòu)和樣式的分離
樣式
CSS 規(guī)則集（rule-set）由選擇器和聲明塊組成：每條聲明都包含一個(gè) CSS 屬性名稱和一個(gè)值铐达，以冒號分隔。多條 CSS 聲明用分號分隔，聲明塊用花括號括起來板惑。
優(yōu)先級原則:行內(nèi)樣式>內(nèi)部樣式>外部樣式
選擇器
元素選擇器
通配選擇器
類選擇器
ID選擇器
交集選擇器
并集選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.type1{
color: black;
}
.type2{
color: orange;
}
.type1,.type2,#id-test{
background-color: blue;
width: 180px;
}
#id-test{
color: blue;
width: 200px;
}
h1.type2{
color: burlywood;
width: 200px;
}
</style>
</head>
<body>
<h1 id="id-test">一個(gè)測試</h1>
<p style="color: red; width: 100px">i love you</p>
<p class="type1">你好</p>
<p class="type1">你好</p>
<p class="type1">你好</p>
<p class="type2">hhhhh</p>
<p class="type2">hhhhh</p>
<p class="type2">hhhhh</p>
<h1 class="type2">hhhhh</h1>
</body>
</html>
后代選擇器:語法:選擇器1 選擇器2 ...選擇器n {} 后代選擇器,最終選擇的是后代,不選中祖先
子代選擇器
兄弟選擇器
屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div ol li{
color: blue;
}
[title="abc"]{
color: red;
}
[title^="b"]{
color: red;
}
div ul+li{
color: red;
}
div>p>a{
color: #000;
}
div.abc>a{
color: #000;
}
h1+p{
color: aqua;
}
p~p{
color: antiquewhite;
}
</style>
<body>
<div>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<p>
<a href="#">11111</a>
<div class="abc">
<a href="#">11111</a>
</div>
</p>
</div>
<p1 title="abc">abc</p1>
<p1 title="bbc">abc</p1>
<h1></h1>
<p>abcccc</p>
<p>abcccc</p>
<p>abcccc</p>
</body>
</html>
偽類選擇器
動(dòng)態(tài)偽類
結(jié)構(gòu)偽類
否定偽類
UI偽類
目標(biāo)偽類
語言偽類
偽元素選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{
color: azure;
}
a:visited{
color: aquamarine;
width: 200px;
}
/*懸浮*/
a:hover{
color: orange;
}
/*激活*/
a:active{
color: blue;
}
/* 焦點(diǎn)*/
select:focus{
background-color: aqua;
}
/*選中的是div的后代選擇器p,并且p的父親是誰無所謂*/
div p:first-child{
color: aqua;
}
div div p:nth-child(-n + 5){
color: aqua;
}
div >div> p:last-of-type{
color: aqua;
}
div:empty{
color: aqua;
width: 1000px;
}
:input:checked{
width: 100px;
height: 1000px
;
}
p::first-letter{
background-color: red;
}
div+p::before{
content: "%";
}
p::first-line{
background-color: azure;
}
p::selection{
background-color: blue;
}
</style>
</head>
<body>
<a href="aaaa">點(diǎn)擊</a>
<select>
<option>"aaaa"</option>
<option>"bbbb"</option>
</select>
<div>
<p>ceshi</p>
<div>
<marquee>
<p>ceshi</p>
</marquee>
</div>
<p>ceshi</p>
<p>ceshi</p>
</div>
<div>
<span></span>
<div>
<p>ceshi</p>
<p>ceshi</p>
<p>ceshi</p>
<p>ceshi</p>
<p>ceshi</p>
<p>ceshi</p>
<div></div>
</div>
</div>
<div></div>
<input type="checkbox">
<input type="radio" name="aaa">
<input type="radio" name="aaa">
</body>
</html>
選擇器的優(yōu)先級
通過不同的選擇器,選中相同的元素,并且為相同的樣式名設(shè)置不同的值,就發(fā)生了樣式的沖突,到底應(yīng)用哪個(gè)樣式,此時(shí)需要看優(yōu)先級了,簡單描述:行內(nèi)樣式>ID選擇器>類選擇器>元素選擇器>通配選擇器
像素
像素是一個(gè)相對單位
顏色
常用字體屬性
大小
族
風(fēng)格
粗細(xì)
符合屬性
顏色
間距
修飾
縮進(jìn)
對齊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
letter-spacing: 10px;
}
p1.aa{
word-spacing: 10px;
}
p1.bb{
text-decoration: underline wavy ;
}
p.cc{
font-size: 30px;
text-indent: 60px;
}
p.dd{
font-size: 30px;
text-indent: 60px;
text-align: end;
}
</style>
</head>
<body>
<h1>HHHH HHH H H 我們</h1><br>
<p1 class="aa">HHHH HHH H H 我們 </p1><br>
<p1 class="bb">HHHH HHH H H 我們 </p1><br>
<p class="cc">HHHH HHH H H 我們 </p>
<p class="dd">HHHH HHH H H 我們 </p>
</body>
</html>
行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 100px;
line-height: 50px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<p>asgrgsgsgsd</p>
<p>asgrgsgsgsd</p>
列表相關(guān)屬性
符號,位置,自定義列表符號
表格相關(guān)屬性
背景相關(guān)屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: white;
}
div{
width: 100px;
height: 100px;
border: 100px black;
background-color: aqua;
background-image: url("aa.jpg");
/*背景圖片重復(fù)方式*/
background-repeat: no-repeat;
/*對齊方式*/
background-position: left top;
}
</style>
</head>
<body>
<div>
nigao
</div>
</body>
</html>
css長度單位
- px像素
- em相對元素font-size的倍數(shù)
- rem相對根字體大小
- %相對父元素計(jì)算
元素的顯示模式
block
- 在頁面中獨(dú)占一行,不會(huì)與任何元素共用一行,是從上到下排列的
- 默認(rèn)寬度:撐滿父元素
- 默認(rèn)高度:由內(nèi)容撐開
- 可以通過CSS設(shè)置寬高
inline
- 在頁面中不會(huì)獨(dú)占一行,一行中不能容納下的行內(nèi)元素,會(huì)在下一行繼續(xù)從左到右排列
- 默認(rèn)寬度 :內(nèi)容撐開
- 默認(rèn)高度:內(nèi)容撐開
- 無法通過CSS設(shè)置寬高
inline-block
- 在頁面中不獨(dú)占一行,一行中不能容納下的行內(nèi)元素,會(huì)在下一行繼續(xù)從左到右排列
- 默認(rèn)寬度 :內(nèi)容撐開
- 默認(rèn)高度:內(nèi)容撐開
- 可以通過CSS設(shè)置寬高
https://www.cnblogs.com/qiul-ing/p/17308871.html
盒子模型
http://c.biancheng.net/css3/border.html [CSS邊框樣式（border]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*內(nèi)容區(qū)的寬和高*/
width: 200px;
height: 200px;
/*內(nèi)邊距 設(shè)置的背景顏色會(huì)填充邊框*/
padding: 20px;
/*邊框*/
border: 10px salmon solid;
font-size: 10px ;
/*外邊距*/
margin: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<div>
abcd
</div>
</body>
</html>
margin 塌陷問題和合并問題
布局技巧
浮動(dòng)
沒看...
定位
相對定位
絕對定位
固定定位
粘性定位
H5
語義標(biāo)簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<input type="text" list="a">
<button>按鈕</button>
</form>
<datalist id="a">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</datalist>
</body>
</html>
視頻標(biāo)簽
音頻標(biāo)簽
全局屬性
CSS3
CSS3之背景剪裁Background-clip_-webkit-background-clip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid bisque;
float: left;
margin-left: 20px;
font-size: 20px;
}
.box1{
background-image: linear-gradient(red,blue,greenyellow);
}
.box2{
background-image: linear-gradient( to left top,red,blue,greenyellow);
}
.box3{
background-image: linear-gradient( 20deg
,red,blue,greenyellow);
}
.box4{
background-image: linear-gradient( to left top,red,blue,greenyellow);
font-size: 50px;
text-align: center;
line-height: 200px;
font-weight: bold;
color: blanchedalmond;
-webkit-background-clip:text ;
}
.box5{
background-image: radial-gradient(
red,blue,greenyellow);
}
.box6{
background-image: radial-gradient(circle,
red,blue,greenyellow);
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">444444</div>
<div class="box box5">444444</div>
<div class="box box6">444444</div>
</body>
</html>
web字體
http://c.biancheng.net/css3/position.html
[position]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.out{
width: 200px;
height: 200px;
border: 1px solid black;
margin: 0 auto;
margin-top: 100px;
}
.in{
width: 200px;
height: 200px;
background-color: green;
transform: translateX(50px);
}
</style>
<body>
<div class="out">
<div class="in">
abc
</div>
</div>
<hr>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 1200px;
height: 1200px;
}
.box:hover .b{
width: 1200px;
}
.box1{
width: 200px;
height: 200px;
background-color: bisque;
/* 設(shè)置需要過渡的屬性*/
/* 不是所有屬性都能過渡*/
transition-property: height , width,background-color;
transition-duration: 1000ms;
}
.box1:hover{
height: 400px;
width: 400px;
background-color:aqua;
}
.box2 {
width: 200px;
height: 200px;
background-color: bisque;
transition-property:all;
transition-duration: 1000ms;
}
.box2:hover{
transition-timing-function: ease;
background-color:aqua;
}
</style>
</head>
<body>
<div class="box">
<div class="b box1">abc</div>
<div class="b box2">abc</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.out{
width: 1200px;
height: 1200px;
border: 1px salmon solid;
}
.in{
width: 100px;
height: 100px;
background-color: aqua;
animation-name: ta;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes ta {
from{
}
to{
transform:translate(1100px) rotate(360deg);
background-color: greenyellow;
}
}
/* 定義一組關(guān)鍵幀*/
</style>
<body>
<div class="out">
<div class="in">
</div>
</div>
</body>
</html>
伸縮盒模型
只有直接的子元素才是伸縮項(xiàng)目
伸縮項(xiàng)目:伸縮容器所有子元素自動(dòng)成為了:伸縮項(xiàng)目
