熟妇人妻无码中文幕老熟妇,天堂AV一区二区三区无码

Web階段：第二章：CSS語(yǔ)言

CSS語(yǔ)言介紹：CSS 是「層疊樣式表單」。是用于(增強(qiáng))控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。

選擇器：
瀏覽器根據(jù)“選擇器”決定受CSS樣式影響的HTML元素（標(biāo)簽）。
屬性 (property) ：
是你要改變的樣式名，并且每個(gè)屬性都有一個(gè)值。屬性和值被冒號(hào)分開(kāi)，并由花括號(hào)包圍，這樣就組成了一個(gè)完整的樣式聲明（declaration），例如：p {color: blue}
多個(gè)聲明：
如果要定義不止一個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開(kāi)。雖然最后一條聲明的最后可以不加分號(hào)，但盡量在每條聲明的末尾都加上分號(hào)
例如：

p（選擇器）{
color（屬性）:red（值）;
font-size（屬性）:30px（值）;
}
注意：
每行最好只描述一個(gè)屬性
CSS注釋?zhuān)?*注釋內(nèi)容*/

CSS和html的結(jié)合方式
第一種：
在標(biāo)簽的style屬性上設(shè)置”key:value value;”，修改標(biāo)簽樣式。

<div>div標(biāo)簽1</div>
<div>div標(biāo)簽2</div>
<span>span標(biāo)簽1</span>
<span>span標(biāo)簽2</span>

需求1：分別定義兩個(gè) div、span標(biāo)簽，分別修改每個(gè) div 標(biāo)簽的樣式為：邊框1個(gè)像素，實(shí)線(xiàn)，紅色。
舉例：

<body>
        <div style="border: 1px solid red;">div標(biāo)簽1</div>
        <div style="border: 1px solid red;">div標(biāo)簽2</div>
        <span style="border: 1px solid red;">span標(biāo)簽1</span>
        <span style="border: 1px solid red;">span標(biāo)簽2</span>
   </body>

問(wèn)題：這種方式的缺點(diǎn)？
1.如果標(biāo)簽多了。樣式多了。代碼量非常龐大。
2.可讀性非常差。
3.Css代碼沒(méi)什么復(fù)用性可方言。

第二種：
在head標(biāo)簽中，使用style標(biāo)簽來(lái)定義各種自己需要的css樣式。
格式如下：
xxx {
Key : value value;
}

<div>div標(biāo)簽1</div>
<div>div標(biāo)簽2</div>
<span>span標(biāo)簽1</span>
<span>span標(biāo)簽2</span>

需求1：分別定義兩個(gè) div、span標(biāo)簽，分別修改每個(gè) div 標(biāo)簽的樣式為：邊框1個(gè)像素，實(shí)線(xiàn)，紅色。
舉例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        
        <style type="text/css">
            /* 這里都是css代碼 */
            div{
                border: 1px solid blue;
            }
            span{
                border: 1px solid red;
            }
        </style>
   </head>
   <body>
        <div>div標(biāo)簽1</div>
        <div>div標(biāo)簽2</div>
        <span>span標(biāo)簽1</span>
        <span>span標(biāo)簽2</span>
   </body>
</html>
Css 注釋 /* 這是css 的代碼注釋 */

問(wèn)題：這種方式的缺點(diǎn)。
1.只能在同一頁(yè)面內(nèi)復(fù)用代碼，不能在多個(gè)頁(yè)面中復(fù)用css代碼。
2.維護(hù)起來(lái)不方便，實(shí)際的項(xiàng)目中會(huì)有成千上萬(wàn)的頁(yè)面，要到每個(gè)頁(yè)面中去修改。工作量太大了。

第三種：
把CSS定義在一個(gè)單獨(dú)文件中，然后引入使用。
使用html 的標(biāo)簽導(dǎo)入 css 樣式文件。

CSS選擇器
標(biāo)簽名選擇器
標(biāo)簽名選擇器的格式是：

標(biāo)簽名{
屬性：值；
}

需求1：在所有div標(biāo)簽上修改字體顏色為藍(lán)色，字體大小30個(gè)像素。邊框?yàn)?像素黃色實(shí)線(xiàn)。并且修改所有span 標(biāo)簽的字體顏色為黃色，字體大小20個(gè)像素。邊框?yàn)?像素藍(lán)色虛線(xiàn)。
舉例：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>CSS選擇器</title>
   <style type="text/css">
   /*
   標(biāo)簽名選擇器的格式是：
        標(biāo)簽名{
            屬性：值；
        }
   標(biāo)簽名選擇器，只需要把樣式導(dǎo)入，就會(huì)自動(dòng)生效在所有和選擇器名相同的標(biāo)簽上
   */
        div{
            border: 1px yellow solid;
            color: blue;
            font-size: 30px;
        }
        span{
            color: yellow;
            font-size: 20px;
            border: 5px blue dashed;
        }
   </style>
</head>
<body>
   
   <div>div標(biāo)簽1</div>
   <div>div標(biāo)簽2</div>
   <span>span標(biāo)簽1</span>
   <span>span標(biāo)簽2</span>
</body>
</html>

id選擇器
ID選擇器的格式是：
#id屬性值{
屬性：值；
}
需求1：分別定義兩個(gè) div 標(biāo)簽，
第一個(gè)div 標(biāo)簽定義 id 為 id001 ，然后根據(jù)id 屬性定義css樣式修改字體顏色為藍(lán)色，字體大小30個(gè)像素。邊框?yàn)?像素黃色實(shí)線(xiàn)。第二個(gè)div 標(biāo)簽定義 id 為 id002 ，然后根據(jù)id 屬性定義css樣式修改的字體顏色為紅色，字體大小20個(gè)像素。邊框?yàn)?像素藍(lán)色點(diǎn)線(xiàn)。
舉例：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>ID選擇器</title>
   <style type="text/css">
        #id001{
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        #id002{
            color: red;
            font-size: 20px;
            border: 5px blue dotted;
        }
   </style>
</head>
<body>
   <div id="id001">div標(biāo)簽1</div>
   <div id="id002">div標(biāo)簽2</div>
</body>
</html>

class選擇器（類(lèi)選擇器）
Class類(lèi)型選擇器的格式是：
.class屬性值{
屬性：值;
}
需求1：修改 class 屬性值為 class01的 span 或 div 標(biāo)簽，字體顏色為藍(lán)色，字體大小30個(gè)像素。邊框?yàn)?像素黃色實(shí)線(xiàn)。
需求2：修改 class 屬性值為 class02的 div 標(biāo)簽，字體顏色為灰色，字體大小26個(gè)像素。邊框?yàn)?像素紅色實(shí)線(xiàn)。
舉例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class類(lèi)型選擇器</title>
<style type="text/css">
   .class01{
        color: blue;
        font-size: 30px;
        border: 1px yellow solid;
   }
   .class02{
        color: red;
        font-size: 26px;
        border: 1px red solid;
   }
</style>
</head>
<body>
   <div class="class01">div標(biāo)簽class01</div>
   <div class="class01">div標(biāo)簽</div>
   <span >span標(biāo)簽class01</span>
   <span>span標(biāo)簽2</span>
</body>
</html>

組合選擇器
組合選擇器格式是：
選擇器1，選擇器2，選擇器n{
屬性：值;
}
需求1：修改 class=“class01” 的div 標(biāo)簽和 id=“id01” 所有的span標(biāo)簽，字體顏色為藍(lán)色，字體大小20個(gè)像素。邊框?yàn)?像素黃色實(shí)線(xiàn)。
舉例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class類(lèi)型選擇器</title>
<style type="text/css">
   .class01 , #id01{
        color: blue;
        font-size: 20px;
        border: 1px yellow solid;
   }
</style>
</head>
<body>
   <div class="class01">div標(biāo)簽class01</div> <br />
   <span id="id01">span 標(biāo)簽</span> <br />
   <div>div標(biāo)簽</div> <br />
   <div>div標(biāo)簽id01</div> <br />
</body>
</html>

常用樣式：
1、顏色
color：red；
顏色可以寫(xiě)顏色名如：black, blue, red, green等
顏色也可以寫(xiě)rgb值和十六進(jìn)制表示值：如rgb(255,0,0)，#00F6DE，如果寫(xiě)十六進(jìn)制值必須加#
2、寬度
width:19px;
寬度可以寫(xiě)像素值：19px；
也可以寫(xiě)百分比值：20%；
3、高度
height:20px;
高度可以寫(xiě)像素值：19px；
也可以寫(xiě)百分比值：20%；
4、背景顏色
background-color:#0F2D4C
5、字體樣式：
color：#FF0000；字體顏色紅色
font-size：20px; 字體大小
6、紅色1像素實(shí)線(xiàn)邊框
border：1px solid red;
7、DIV居中
margin-left: auto;
margin-right: auto;
8、文本居中：
text-align: center;
9、超連接去下劃線(xiàn)
text-decoration: none;
10、表格細(xì)線(xiàn)
table {
border: 1px solid black; /設(shè)置邊框/
border-collapse: collapse; /將邊框合并/
}
td,th {
border: 1px solid black; /設(shè)置邊框/
}
11、列表去除修飾
ul {
list-style: none;
}

在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

JSP