HTML/CSS初步了解

miracledan 發(fā)布于2019-04-23 11:41 / 3249人閱讀

摘要：為標(biāo)記語言提供了一種樣式描述，定義了其中元素的顯示方式。選擇器指明了中的樣式的作用對象，也就是樣式作用于網(wǎng)頁中的哪些元素基本語法第一種選擇器叫選擇器在里面寫一個(gè)，通過這個(gè)就能找到這個(gè)。

一、CSS是什么？

　　它是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。CSS為HTML標(biāo)記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設(shè)計(jì)領(lǐng)域是一個(gè)突破。利用它可以實(shí)現(xiàn)修改一個(gè)小的樣式更新與之相關(guān)的所有頁面元素。

　　那么 html?ccs? javascript 分別起到1了什么作用呢?

HTML	CSS	javaScript
結(jié)構(gòu)	樣式	行為

要分清楚他們分別負(fù)責(zé)什么。

二、CSS是干什么的？

　　比如那么說：蓋一層樓，你要先蓋后裝修，光給你裝修涂料有意義嗎，肯定是要先蓋好樓，才能裝修，所CSS就是裝修涂料，它自己沒辦法多帶帶存在，必須依靠結(jié)構(gòu)，它沒有html的存在，CSS一點(diǎn)意義都沒有。

三、引入CSS的三種方法

　　CSS(cascading style sheet)層疊樣式表

　　1、行間樣式

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>CSStitle>    
 5     <head>
 6         <body>
 7             <div style="
 8                 width:100px;
 9                 height:100px;
10                 background-color:green;">
11             div>
12             
13         body>
14 html>

運(yùn)行效果：

　　2、頁面級CSS

　　先來初步了解一下，頁面級就是在head里面寫一個(gè)標(biāo)簽叫

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>CSStitle>  
 5         <style>
 6              div{  
 7                   width:100px;
 8                   height:100px;
 9                   background-color:green;
10                 }
11         style>
12     <head>
13         <body>
14             <div>div>
15             
16         body>
17 html

?　3、外部CSS文件(重點(diǎn))

　是最高大上，最實(shí)用，在開發(fā)中經(jīng)常用到的

　首先，我們要建一下文件，起個(gè)名名字后綴名要寫出CSS

　那如何如何將css文件和html聯(lián)合起來呢？

　用link標(biāo)簽：herf是放css文件的

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>CSStitle>
 5         <link rel="stylesheet" type="text/css" href="lesson.css">
 6     <head>
 7         <body>
 8             <div>div>
 9             
10         body>
11 html>

?CSS文件：

1 div{
2     width:100px;
3     height:100px;
4     border-radius:50%;//圓角屬性
5     background-color:green;    
6 }

這樣就是成功的引用了外部的CSS。　　

四、選擇器

1、什么是選擇器呢？ ? 每一條css樣式定義由兩部分組成，形式如下： [code] 選擇器{樣式} [/code] 在{}之前的部分就是“選擇器”。 “選擇器”指明了{(lán)}中的“樣式”的作用對象，也就是“樣式”作用于網(wǎng)頁中的哪些元素 ? 基本語法：　

第一種選擇器叫ID選擇器

在div里面寫一個(gè)id，通過這個(gè)id就能找到這個(gè)div。

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>CSStitle>
 5         <link rel="stylesheet" type="text/css" href="lesson.css">
 6     <head>
 7         <body>
 8             <div id="only">123456div>
 9         body>
10 html>

怎么找呢，首先在css文件里面以#開頭，之后id的值是什么就寫什么之后{里面寫css代碼}

#only{
    background-color:red;
}

提示：一個(gè)元素只能有一個(gè)id值，一個(gè)id值只能對應(yīng)一個(gè)元素

簡單說就是一點(diǎn)id的命名，只能有一個(gè)。

第二種選擇器叫IClass選擇器

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>CSStitle>
 5         <link rel="stylesheet" type="text/css" href="lesson.css">
 6     <head>
 7         <body>
 8             <div class="demo">123456div>
 9         body>
10 html>

Class選擇器和id選擇器差不多以點(diǎn)（.）開頭，后面寫class值

1 .demo{
2     background-color:red;
3 }

提示：如果我用兩個(gè)class及值相同可以嗎。

答：是可以的

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>CSStitle>
 5         <link rel="stylesheet" type="text/css" href="lesson.css">
 6     <head>
 7         <body>
 8             <div class="demo">123456div>
 9             <div class="demo">78910div>
10         body>
11 html>

.demo{
    background-color:red;
}

運(yùn)行效果：

我那如想要改變背景色是紅色同時(shí)字體是黃色，要如何做

那就可以在后面加多一個(gè)dmeo1

代碼如下：

 1 
 2 
 3     
 4         CSS
 5         
 6     
 7         
 8             123456
 9             78910
10         
11

1 .demo{
2     background-color:red;
3 }
4 .demo1{
5     color:yellow;
6 }

運(yùn)行效果：

class選擇器多對多。

第三種選擇器叫標(biāo)簽選擇器。

標(biāo)簽選擇器直觀明了，想選擇元素的話，直接寫上標(biāo)簽名稱就好了

在css文件里面寫上div，那么在html里面的所以div標(biāo)簽都可以改變。

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>CSStitle>
 5         <link rel="stylesheet" type="text/css" href="lesson.css">
 6     <head>
 7         <body>
 8             <div>123456div>
 9             <div>78910div>
10             <div>4545div>
11             <div>743543div>
12             <div>345345div>
13             <div>34879div>        
14         body>
15 html>

1 div{
2     background-color:red;
3 }

?運(yùn)行效果：

第四種選擇器叫I通配符選擇器

通配符的表現(xiàn)形式極其的單一（*）代表全部，自己成為選擇器

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>CSStitle>
 5         <link rel="stylesheet" type="text/css" href="lesson.css">
 6     <head>
 7         <body>
 8             <span>123span>
 9             <div>abcdiv>
10             <strong>454strong>
11         body>
12 html>

1 *{
2     background-color:yellow;
3 }

運(yùn)行效果：

這時(shí)會(huì)看見頁面全黃了，為什么呢？

不是說嗎，*是代表所以全部呢

也都是標(biāo)簽，所以代表全部文檔，所以這叫通配符選擇器。

五、對比選擇器優(yōu)先級

先來對比運(yùn)行id選擇器和class選擇器的優(yōu)先級

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>CSStitle>
 5         <link rel="stylesheet" type="text/css" href="lesson.css">
 6     <head>
 7         <body>
 8             <div id="only" class="demo">123div>
 9         body>

10 html>

?css代碼：

1 #only{
2     background-color:yellow;
3 }
4 .demo{
5     background-color:red;
6 }

?運(yùn)行效果：

這里可以看出來id選擇器的優(yōu)先級更高。

再看class選擇器和標(biāo)簽選擇器對比

1 div{
2     background-color:yellow;
3 }
4 .demo{
5     background-color:red;
6 }

　運(yùn)行效果：

這里就是可以看出class選擇器優(yōu)先級高

總結(jié)：id選擇器>class選擇器>標(biāo)簽選擇器>通配符選擇器。

第五種選擇器叫I屬性選擇器

是可以通過屬性選擇的，比如有一個(gè)屬性名叫id，那么有id的屬性值的都能被選出來。

代碼如下：

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>CSStitle>
 5         <link rel="stylesheet" type="text/css" href="lesson.css">
 6     <head>
 7         <body>
 8             <div id="only" class="demo">1232div>
 9             <div id="only2" class="demo">aaa3div>
10             <div id="only3" class="demo">2334div>
11         body>     
12 html>