```一、CSS概念
1、需求:
設置網頁標籤的樣式:寬``、高、背景顏色、位置......
用於佈局或美化網頁
2、概念:
css 層疊樣式表
英文全稱:cascading style sheets
瀏覽器解釋語言:讓瀏覽器去執行解釋的語言
html css
大小寫不敏感:小寫
w3c組織
3、css語法:
選擇器1{
屬性名1:屬性值1;
屬性名2:屬性值2;
...
...
}
選擇器2{
屬性名1:屬性值1:
屬性名2:屬性值2;
...
...
}
選擇器:我要找的html標籤(元素)
屬性1:屬性值1:width:20px
不針對行內樣式
4、css註釋
html註釋
<!--註釋內容 -->
css註釋
/*註釋內容*/
//也可以
sublime快捷鍵:ctrl+/
5、補充
dhtml=html(指定元素)+css(元素大小位置顏色)+javascript(操縱網頁元素)
<div>內容</div>獨佔一行,背景顏色一行
<span>內容</span>不獨佔一行,背景顏色跟隨內容
<SPAN>是行級容器標籤,不可以包含圖片、標題、段落等,只能包含文字內容
(他們存在就是爲了樣式)
二、css樣式分類
1、行內樣式
只作用於行內
<p style="屬性名:屬性值;屬性名:屬性值;">內容</p>
2、內嵌樣式
作用於本頁也可以鏈接到html中
<HEAD>
<STYLE type="text/css">
P { /*設置樣式:字體和背景色*/
font-family: System;
font-size: 18px;
color: #3333CC;
}
H2 {
background-color: #CCFF33;
text-align: center;
}
</STYLE>
</HEAD>
<BODY>
<H2.>品種特徵方面:</.H2>
<P> 1、蛋魚:蛋魚…….。</P>
<P> 2、龍睛:龍睛……..。</P>
<P> 3、高頭:高頭….。</P>
3、外部樣式
作用於多個頁面
引入內嵌樣式css文件
<head>
link
<link rel="stylesheet" type="text/css" href=".css文件">
</head>
三、選擇器
1、html選擇器
<.style type="txet/css">
p{屬性名:屬性值;
屬性名:屬性值;}
<.style/>
2、class類選擇器
<.p class="命名">內容</p>
<.STYLE type="text/css">
.命名{
屬性名:屬性值;
屬性名:屬性值;
}
3、ID選擇器
<.p id="命名">內容</p>
<.STYLE type="text/css">
#命名{
屬性名:屬性值;
屬性名:屬性值;
}
4、子元素選擇器(父子關係)
.div > .input > 選擇器1 > 選擇器2{
}
.border:5px dotted red;
.dotted:虛線
.solid:實線
5、後代選擇器(後代關係)
.div .input{
}
6、組合選擇器
選擇器,選擇器{
屬性名:屬性值;
屬性名:屬性值;
}
7、樣式混用
行內樣式
內嵌樣式
外部樣式
就近原則
真正零基礎學習HTML(三)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.