HTML/CSS初步了解

miracledan 發布于2019-04-23 11:41 / 3255人閱讀

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

一、CSS是什么？

　　它是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。

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

HTML	CSS	javaScript
結構	樣式	行為

要分清楚他們分別負責什么。

二、CSS是干什么的？

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

三、引入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>

運行效果：

　　2、頁面級CSS

　　先來初步了解一下，頁面級就是在head里面寫一個標簽叫

 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文件(重點)

　是最高大上，最實用，在開發中經常用到的

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

　那如何如何將css文件和html聯合起來呢？

　用link標簽：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] 在{}之前的部分就是“選擇器”。 “選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素 ? 基本語法：　

第一種選擇器叫ID選擇器

在div里面寫一個id，通過這個id就能找到這個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;
}

提示：一個元素只能有一個id值，一個id值只能對應一個元素

簡單說就是一點id的命名，只能有一個。

第二種選擇器叫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選擇器差不多以點（.）開頭，后面寫class值

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

提示：如果我用兩個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;
}

運行效果：

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

那就可以在后面加多一個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 }

運行效果：

class選擇器多對多。

第三種選擇器叫標簽選擇器。

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

在css文件里面寫上div，那么在html里面的所以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>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 }

?運行效果：

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

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

 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 }

運行效果：

這時會看見頁面全黃了，為什么呢？

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

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

五、對比選擇器優先級

先來對比運行id選擇器和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 id="only" class="demo">123div>
 9         body>

10 html>

?css代碼：

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

?運行效果：

這里可以看出來id選擇器的優先級更高。

再看class選擇器和標簽選擇器對比

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

　運行效果：

這里就是可以看出class選擇器優先級高

總結：id選擇器>class選擇器>標簽選擇器>通配符選擇器。

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

是可以通過屬性選擇的，比如有一個屬性名叫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>

css代碼：

[id]{
    background-color:yellow;
}

運行效果：

云服務器 GPU云服務器人工智能初步 hadoop初步學習 html css HTML+CSS

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1014.html

前端構建的初步嘗試

摘要：前言這篇文章的主要目的是告訴大家構建工具可以做那些事情大家不必去深入研究這個東西最基本的是有個概念什么是前端構建在平時我們瀏覽一些大型的站點會發現其中的一些經過壓縮去掉了空白符注釋經過了混淆和壓縮一些引用的文件的鏈接會加上奇怪的字串文件例如前言這篇文章的主要目的是告訴大家,構建工具可以做那些事情.大家不必去深入研究這個東西.最基本的是有個概念. 什么是前端構建? 在平時我們瀏覽一些...

Keven 2019-08-01 15:38 評論0 收藏0
CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
關于Html+css階段學習總結

摘要：再之后，通過專業老師的指導，開始進行前端知識的全面及系統性的學習。而這篇文章便是對這次學習的一次階段性總結。的學習并不是太難，也可以說是很容易，但千里之行，這才剛剛開始，熟練的掌握，還需要不斷的練習。一、學習經歷進入大學不久，就加入了社團，從而對前端有了一個初步的了解，之后也做過一些學校的官網，積累了一些微小的經驗。到了大二的時候，學校開設了專門的html+css課程，從中也學到...

CoXie 2019-08-30 14:21 評論0 收藏0
關于Html+css階段學習總結

摘要：再之后，通過專業老師的指導，開始進行前端知識的全面及系統性的學習。而這篇文章便是對這次學習的一次階段性總結。的學習并不是太難，也可以說是很容易，但千里之行，這才剛剛開始，熟練的掌握，還需要不斷的練習。一、學習經歷進入大學不久，就加入了社團，從而對前端有了一個初步的了解，之后也做過一些學校的官網，積累了一些微小的經驗。到了大二的時候，學校開設了專門的html+css課程，從中也學到...

Rindia 2019-08-02 10:06 評論0 收藏0
前端常用技術概述--Less、typescript與webpack

摘要：前言講起前端，我們就不能不講與，在這兩種技術廣泛應用的今天，他們的擴展也是層出不窮，的擴展有等，的超集有等。如下注意你的樣式文件一定要在引入前先引入。截止目前，已經發布了最新的版本。前言：講起前端，我們就不能不講CSS與Javascript，在這兩種技術廣泛應用的今天，他們的擴展也是層出不窮，css的擴展有Less、Sass、Stylus等，js的超集有Typescript等。今天我們就簡...

番茄西紅柿 2019-04-23 11:55 評論0 收藏0