前端三要素-CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../1.我的第一個CSS程序/CSS/style.css">
<!--導入外部樣式-->
</head>
<body>
<h1>我是標題標簽</h1>
</body>
</html>
style.css
h1{
color: red;
}
1......4種導入方式
行內導入方式
比如我想給我一個 h1標簽改變顏色
可以直接在<h1 >后面機上style,添加color屬性
就可以改變元素顏色
這種導入方式稱為行內導入方式
2.內部選擇器
直接在頭部位置加上style 指定想要改變的標簽 比如h1{} 即可
3.外部導入方式
把改變條件放在css包內 利用link進行調用
4.（不常用 了解就可以）
4種導入方式都是對標簽進行操作 如果出現多個導入方式對同一標簽進行操作的時候 這個時候采用就近原則 誰離的近就使用哪一個
2.基本選擇器
1.標簽選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: red;
}
/*
標簽選擇器寫在style中 會選中符合標簽名的所有標簽進行修改
但是，如果我有三個h1標簽 我只想修改第一個h1那么標簽選擇器明顯是無法滿足效果的，這個時候就要使用類選擇器
*/
</style>
</head>
<body>
<h1>我是標題標簽</h1>
<h1>我是標題標簽</h1>
<h1>我是標題標簽</h1>
<h1>我是標題標簽</h1>
<p>我是p標簽</p>
</body>
</html>
2.類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a{
color: red;
}
</style>
</head>
<body>
<!--如果我有三個h1標簽 我只想修改第一個h1那么標簽選擇器明顯是無法滿足效果的，這個時候就要使用類選擇器
給想要修改的h1標簽起一個class名 然后再style里進行調用即可
<h1 class="a">我是標簽標簽</h1>
類選擇器的寫法
.+類名{
}
-->
<h1 class="a">我是標簽標簽</h1>
<h1 class="a">我是標簽標簽</h1>
<h1>我是標簽標簽</h1>
<h1>我是標簽標簽</h1>
</body>
</html>
3.id選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#b{
color: red;
}
</style>
</head>
<body>
<!--id選擇器跟class差不多 都是起名字進行修改 但是class可以重復使用 id只能使用一次
<h1 id="b">我是標題標簽</h1>
<h1 id="b">我是標題標簽</h1>
這樣寫是錯誤的
依舊是在style內部樣式里編寫
#+id名{
}
-->
<h1 id="b">我是標題標簽</h1>
<h1>我是標題標簽</h1>
<h1>我是標題標簽</h1>
</body>
</html>
三種選擇器的優先級為 id>class>標簽
3.層次選擇器
1.后代選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body p{
color: red;
}
</style>
</head>
<body>
<!--在style內編寫 body空格p{}
body p{}
選中body下所有的p標簽
-->
<p>p0</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li><p>p5</p></li>
</ul>
<ul>
<li><p>p6</p></li>
</ul>
<ul>
<li><p>p7</p></li>
</ul>
</body>
</html>
2.子選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body>p{
color: red;
}
</style>
</head>
<body>
<!--
子選擇器 會選中跟body>p有直接關系的p標簽
在style內編寫 body>p{}
這里只有
<p>p0</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
發生了變化
而后面的在ul li里的p沒有發生變化 因為隔斷了一層
-->
<p>p0</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li><p>p5</p></li>
</ul>
<ul>
<li><p>p6</p></li>
</ul>
<ul>
<li><p>p7</p></li>
</ul>
</body>
</html>
3.相鄰兄弟選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a+p{
color: red;
}
</style>
</head>
<body>
<!--相鄰兄弟選擇器
如果我想選中class=a下面的p3
可以使用這種方法 先定位a然后在style中編寫 .a+p{}
就可以選中p3
相鄰只針對下面的 上面的無效
-->
<p>p0</p>
<p>p1</p>
<p class="a">p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li><p>p5</p></li>
</ul>
<ul>
<li><p>p6</p></li>
</ul>
<ul>
<li><p>p7</p></li>
</ul>
</body>
</html>
4.通用選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a~p{
color: red;
}
</style>
</head>
<body>
<!--通用選擇器 跟相鄰兄弟選擇器差不多 不過相鄰兄弟選擇器只能選中定位后的下面一個
而通用的可以選中定位后的多個（只能選中有直接關系的）
想ul li里的p標簽依然不能實現
在style里編寫 .a~p{}
-->
<p>p0</p>
<p>p1</p>
<p class="a">p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li><p>p5</p></li>
</ul>
<ul>
<li><p>p6</p></li>
</ul>
<ul>
<li><p>p7</p></li>
</ul>
<p class="a">p2</p>
<p>p3</p>
<p>p4</p>
</body>
</html>
5.結構尾類選擇器（了解即可）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*h1:hover{*/
/*background: red;*/
/*}*/
/*ul li:first-child{*/
/*background: red;*/
/*}*/
/*ul li:last-child{*/
/*background: yellow;*/
/*}*/
p:nth-child(2){
background: red;
}
p:nth-of-type(1){
background: red;
}
</style>
</head>
<body>
<!--標簽后面跟上 ‘:’號的叫做尾類
hover 鼠標移動事件 等于加上后 你鼠標移動過去之后 背景顏色會變成background: red;
ul li:first-child{
background: red;
}
選中ul下面的li（后代選擇器）
first-child（選中第一個）進行更換背景顏色操作
ul li:last-child{
background: yellow;
}
中ul下面的li（后代選擇器）
last-child（選中最后一個）進行更換背景顏色操作
(無需記憶 了解即可)
p:nth-child(2){
background: red;
}
<p >p1</p>
<p >p2</p>
<p >p3</p>
選中當前p元素的父輩 父輩元素的第一個p 注意并且是當前元素才生效
如果在p1上面加上一個 h1標簽
h1 我
<p >p1</p>
<p >p2</p>
<p >p3</p>
那么這個指令就會失效 而p:nth-of-type(1)則不會
p:nth-of-type(1){
background: red;
}
選中父元素，下的p元素的第1個
-->
<!--<h1>點我變色</h1>-->
<p >p1</p>
<p >p2</p>
<p >p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
6.屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!---->
<style>
.demo a{
float: left;
width: 50px;
height: 50px;
background: red;
margin-left: 10px;
border-radius: 10px;
display: block;
text-decoration: none;
text-align: center;
font: bold 20px/50px Arial;
}
/*
選中a標簽中的id為1的元素
*/
/*a[id="1"]{*/
/*background: black;*/
/*}*/
/*
class里面有link的元素
=(絕對等于)
*=(包含等于)
*/
/*a[class*="link"]{*/
/*background: yellow;*/
/*}*/
/*
選中href中以https開頭的元素
^= 以..開頭
*/
/*a[href^="https"]{*/
/*background: yellow;*/
/*}*/
/*
選中href中以lk結尾的元素
$= 以..結尾
*/
/*a[href $=lk]{*/
/*background: yellow;*/
/*}*/
</style>
</head>
<body>
<!--標簽定位某一個屬性進行修改
a[id=1]{
a標簽里id=1的
}
-->
<p class="demo">
<a href="https:www lk" class="link k" id="1">1</a>
<a href="https:www" id="2">2</a>
<a href="">3</a>
<a href="">4</a>
</p>
</body>
</html>
spa標簽
在一些特別情況下可以使用span標簽把一些關鍵字括起來（暫時沒發現什么用）
字體樣式
font-family 字體樣式
font-size 字體大小
font-weight 字體粗細
color 字體顏色
文本樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- text-indent 首行縮進
text-align: center; 文本居中
`text-align:left 居左
`text-align:right 居右
line-height:行高
text-decoration: none 去掉下劃線
text-decoration: underline; 增加下劃線
text-decoration: line-through;增加中劃線
text-decoration: overline;增加上劃線
-->
<style>
.a{
/*text-align: center;*/
text-indent: 2em;
height: 30px;
line-height: 30px;
background: red;
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<p class="a">123123</p>
<p class="b">123123</p>
<p class="c">123123</p>
<a href="">點我</a>
</body>
</html>
在一些別的情況下 可能會用到圖片跟文字水平對齊
比如
達到這種效果要
使用
vertical-align: middle
這種方法需要參照物
比如圖片img跟文字span
想要這兩個屬性相對齊
在style可以這樣寫
<style>
img,span{
vertical-align: middle;
}
</style>
偽類
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
text-decoration: none;去掉下劃線
a:hover偽類 鼠標移動到a標簽的時候 顏色跟字體發生變化
a:active 鼠標按住a標簽的時候 發生顏色變化 移開則恢復
*/
a{
text-decoration: none;
color: red;
}
a:hover{
color: orange;
/*font-size: 100px;*/
}
a:active{
color: black;
}
/*
加陰影
text-shadow
陰影顏色 水平偏移 垂直偏移 陰影半徑
*/
#j{
text-shadow:red 10px 10px 10px;
}
</style>
</head>
<body>
<a href="#">
<img src="imgage/13260619927521479.jpg" alt="">
</a>
<p>
<a href="#">藍色少女</a>
</p>
<p>
<a href="#">作者:未知</a>
</p>
<p id="j">
￥99
</p>
</body>
</html>
后面加上：的都可以理解為偽類
列表樣式的練習
imgages包內需要兩張向下跟向左的箭頭圖片
完成效果圖
自己畫的箭頭===
背景跟漸變
比如說想設置一個背景圖片
background-repeat: no-repeat;
可以先設置一個div
<div class="div1"></div>
然后給它進行style渲染美化
<style>
div1{
width: 300px;寬度
height: 300px;高度
border: 1px solid black;盒子邊框
background-image:url("imgages/2.png");背景圖片
}
如果直接這樣寫會發生圖片充滿整個盒子的情況 如：
想要解決上面的方法 可以給div1添加屬性
background-repeat: no-repeat;
這樣就可以解決掉
.div1{
background-repeat:repeat-x;只顯示x軸的圖片
}
.div1{
background-repeat:repeat-y;只顯示y軸的圖片
}
漸變色<style>
body{
/*background: blue;*/
background-image: linear-gradient(50deg,blue,red 50%);
}
更換背景
</style>
盒子模型跟邊框的使用
盒子分為外邊距（margin）跟內邊距(padding) 還有border邊框
外邊距是值 盒子距離瀏覽器的距離
黃色部分為外邊距 每個盒子創建的時候都有一個默認的外邊距為8px
border: 1px solid red; 邊框的寫法 1px solid為1px的實線（dashed為虛線） red為紅色
border-radius ；可以給邊框設置形狀 100%為圓形
如果
border-radius ；后面有四個值 那么對應的是
左上 右上 右下 坐下 順時針旋轉
浙公網安備 33010602011771號