css基礎
一、css簡介
二、css導入方式
注意：當一個標籤使用了多個css（比如：一個修改字體顏色爲“藍色”，一個修改字體顏色爲“紅色”，即相同屬性，不同值）時，他們的優先級別是：就近原則（離標籤最近的生效）
三、css選擇器
3.1 簡介
3.2 選擇器種類
補充：標籤選擇器
3.3 各選擇器的使用方法
實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css選擇器</title>
<style>
/*標籤選擇器*/
/*p{*/
/*font-size:50px;*/
/*}*/
/*class選擇器*/
.test1{
color:red;
}
/*id選擇器*/
#test2{
font-weight:bolder;
}
/*子代選擇器*/
/*.box1>span{*/
/*color:skyblue;*/
/*}*/
/*後代選擇器：在沒有子代選擇器時，子代和後代元素，都採用後代選擇器的樣式，二者都有，則各管各的。*/
.box1 span{
font-size:50px;
}
/*兄弟選擇器*/
.box2~p{
color:blue;
}
/*相鄰選擇器*/
.box2+p{
font-size:30px;
}
/*全選擇器*/
*{
font-family: 華文彩雲;
}
/*屬性選擇器*/
div[hh="test"]{
color:peru;
}
div[class="box3"]{
font-size:50px;
}
/*分組選擇器*/
.box4,.box5{
height:200px;
width:200px;
background: #5b86db;
}
/*.box4{*/
/*height:200px;*/
/*width:200px;*/
/*background: #5b86db;*/
/*}*/
/*.box5{*/
/*height:200px;*/
/*width:200px;*/
/*background: #5b86db;*/
/*}*/
</style>
</head>
<body>
<!--基本選擇器：標籤選擇器、class選擇器、id選擇器-->
<p class="test1" id="test2">我就是我</p>
<!--後代選擇器和子代選擇器-->
<div class="box1">
<span>鵝鵝鵝，</span>
<p>曲<span>項</span>向天歌。</p>
</div>
<!--兄弟選擇器和相鄰選擇器-->
<p>兄：我就是我不一樣的煙火</p>
<div class="box2">參照物</div>
<p>白毛浮綠水，</p>
<p>紅掌撥清波。</p>
<!--屬性選擇器-->
<div class="box3" hh="test">我是屬性選擇器</div>
<!--分組選擇器-->
<div class="box4">div</div>
<p class="box5">p</p>
</body>
</html>
複合選擇器加空格與不加空格的關係
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css選擇器補充</title>
<style>
/*div .test{*/ /*div標籤下後代元素中class="test"的對象*/
/*height:200px;*/
/*width:200px;*/
/*border:1px solid red;*/
/*}*/
div.test{ /*class="test"的div標籤元素*/
height:200px;
width:200px;
border:1px solid red;
}
#test{
}
.test{
}
</style>
</head>
<body>
<div class="test" id="test">我是div1</div>
<div class="tar">我是div2
<div class="test">我是div3</div>
</div>
<div class="test"></div>
<!--css選擇器有哪些-->
<!--基本選擇器：標籤選擇器（標籤名）；id選擇器（#id名）; class選擇器（.class名）-->
<!--複合選擇器：子代選擇器（基本選擇器>基本選擇器）；後代選擇器（基本選擇器 基本選擇器）；相鄰+；兄弟~-->
</body>
</html>
3.4 僞類選擇器
3.5 僞選擇器用法
四、字體/文本
4.1 字體常用樣式
實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字體樣式</title>
<style>
div{
/*
font-family:字體
默認微軟雅黑，可以同時設置多個字體，只有前面的字體沒有，就用後面的字體
*/
font-family: 華文中宋,華文彩雲,華文楷體;
/*
font-size:字體大小（單位：px rem % em)
px: 谷歌瀏覽器默認字體大小16px，最小是12px
rem：16px*n
em：父級字體*n
%：父級字體*%
*/
font-size:30px;
/*
font-weight:字體粗細
給值：100-900的整百數
400=正常粗細， 700=bold
*/
font-weight: bolder;
/*
font-style:字體樣式
normal:文字正常，默認
italic/oblique:斜體
*/
font-style: italic;
/*
color:文字顏色
1.顏色單詞
2.#16進制
3.rgb
4.rgba a:0-1(0完全透明，1完全不透明）
*/
color:rgba(199,21,133,0.5);
}
</style>
</head>
<body>
<div>測<span>試</span>對象</div>
</body>
</html>
4.2 文本常用樣式
實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本樣式</title>
<style>
p{
text-indent:2em; /*首行縮進*/
line-height:32px; /*行高*/
}
div{
height:200px;
width:200px;
border:1px solid red;
/*文字上下居中：line-height = height*/
/*line-height:200px;*/
/*文字左右居中*/
/*text-align: center;*/
/*文本大小寫*/
text-transform: lowercase;
}
a{
/*取消下劃線*/
/*text-decoration: none;*/
/*使用下劃線*/
/*text-decoration: underline;*/
/*使用上劃線*/
/*text-decoration: overline;*/
/*使用中劃線*/
/*text-decoration: line-through;*/
}
.box{
white-space: nowrap; /*換行方式：不換行*/
overflow:hidden;/*超出部分隱藏*/
text-overflow: ellipsis;/*文字超出部分用...顯示*/
}
.box1{
height:500px;
width:800px;
background: #54b9e2;
}
.box2{
height:500px;
width:200px;
background: #9090fb;
margin: 0 auto; /*div居中*/
}
</style>
</head>
<body>
<div class="box">我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火</div>
<div>文字居中,hello, world!hello,TZ</div>
<p>我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火我就是我不一樣的煙火</p>
<a href="javascript:void(0);">我是a標籤</a>
<div class="box1"><div class="box2"></div></div>
</body>
</html>
五、背景
5.1 常用背景樣式
實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景樣式</title>
<style>
.box{
width:200px;
height:200px;
border:1px solid skyblue;
/*背景色*/
/*background-color: #54b9e2;*/
/*背景圖片*/
/*background-image:url("../lesson02/日誌.png");*/
/*background-image: url("2.jpg");*/
/*背景圖片是否平鋪：默認repeat平鋪*/
/*background-repeat: no-repeat;*/
/*背景圖片定位：position*/
/*background-position: 200px 200px;*/
/*
背景圖片的大小：size
px,
contain:等比例的縮放，圖片全部可見的，不一定鋪滿整個背景
cover:鋪滿整個背景,圖片可能是殘缺的
*/
/*background-size:400px;*/
/*background-size:contain;*/
/*background-size:cover;*/
/*複合樣式background:color image repeat position/size*/
/*background: url("../lesson02/日誌.png") no-repeat 200px 200px / 200px 200px;*/
}
</style>
</head>
<body>
<div class="box">你好</div>
<div class="box">我好</div>
<script>
//註釋說明：
//css：/*註釋內容*/
//html:<!--註釋內容-->
//js://單行註釋
/*多行註釋*/
</script>
</body>
</html>
背景圖的放置朝向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景圖的旋轉</title>
<style>
.box{
width:350px;
height:350px;
background: url("1.jpg");
}
</style>
</head>
<body>
<div class="box"></div>
<p>
<input type="button" value="上">
<input type="button" value="下">
<input type="button" value="左">
<input type="button" value="右">
</p>
<script>
// 獲取元素
var box = document.querySelector(".box");
var btn = document.querySelectorAll("input");
// 綁定事件
btn[0].onclick=function () {
box.style.backgroundPositionX="0px";
box.style.backgroundPositionY="0px";
};
btn[1].onclick=function () {
box.style.backgroundPositionX="0px";
box.style.backgroundPositionY="350px";
};
btn[2].onclick=function () {
box.style.backgroundPositionX="350px";
box.style.backgroundPositionY="0px";
};
btn[3].onclick=function () {
box.style.backgroundPositionX="350px";
box.style.backgroundPositionY="350px";
};
</script>
</body>