2. 程式人生 > >CSS概述、CSS語法、CSS選擇器、CSS宣告

CSS概述、CSS語法、CSS選擇器、CSS宣告

阿新 • • 發佈：2018-11-07

一、HTML表單

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Insert title here</title>
  7. </head>
  8. <body>
  9. <!-- 1.表單元素
  10. 用來宣告資料提交的範圍
  11. 只有在此元素內的資料可以提交給伺服器 -->
  12. <!-- action屬性用來宣告資料提交的目標 -->
  13. <form action="http://www.baidu.com">
  14. <!-- 2.表單控制元件
  15. 用來讓使用者輸入資料的
  16. 1）input元素（9個 ），它們之間用type元素區分-->
  17. <!-- 文字框
  18. value:設定預設值 maxlength:設定最大長度 readonly:設定只讀 -->
  19. <p>
  20. 賬號:<input type="text" value="lcz" maxlength="10"/>
  21. </p>
  22. <!-- 密碼框 屬性同上 -->
  23. <p>
  24. 密碼:<input type="password">
  25. </p>
  26. <!-- 單選框 name:組名。同一組名互相排斥
  27. checked設定預設選中-->
  28. <p>
  29. 性別:
  30. <input type="radio" name="sex" checked="checked"/>男
  31. <input type="radio" name="sex"/>女
  32. </p>
  33. <!-- 多選框 checked:設定預設選中 -->
  34. <p>
  35. 興趣愛好:
  36. <input type="checkbox" checked="checked"/>音樂
  37. <input type="checkbox" checked="checked"/>看書
  38. <input type="checkbox"/>打球
  39. </p>
  40.  
  41. <!-- 檔案框 -->
  42. <p>
  43. 頭像上傳:<input type="file"/>
  44. </p>
  45.  
  46. <!-- 隱藏框 -->
  47. <p>
  48. <input type="hidden" value="abc"/>
  49. </p>
  50.  
  51. <!-- 按鈕
  52. submit：提交表單中的資料
  53. reset：將表單中的資料重置為初始值
  54. button:沒有任何功能，需通過js定義功能 -->
  55. <p>
  56. <!-- 提交按鈕 -->
  57. <input type="submit" value="註冊">
  58. <!-- 重置按鈕 -->
  59. <input type="reset" value="重置">
  60. <!-- 普通按鈕 -->
  61. <input type="button" value="按鈕">
  62. </p>
  63. <!--2)其他元素（3個） -->
  64. <!-- label：用來管理表單中的文字 id:是元素的唯一標誌，相當於元素的身份證號，任何元素都可以由id，程式設計師有義務保證元素的id不重複
  65. 可以將文字與空間繫結在一起，從而增加了控制元件的受力面積。-->
  66. <p>
  67. <input type="checkbox" id="xieyi"/>
  68. <label for="xieyi">我已閱讀並且自願遵守此協議！</label>
  69. </p>
  70. <!-- select:下拉選 selected:設定預設選中 -->
  71. <p>
  72. 城市:
  73. <select>
  74. <option>請選擇</option>
  75. <option selected="selected">北京</option>
  76. <option>上海</option>
  77. <option>廣州</option>
  78. <option>深圳</option>
  79. <option>杭州</option>
  80. </select>
  81. </p>
  82. <!-- textarea:文字域 -->
  83. <p>
  84. 簡介：<br>
  85. <textarea rows="10" cols="100">這是文字域的預設值</textarea>
  86. </p>
  87. </form>
  88. </body>
  89. </html>

二、CSS

CSS指層疊樣式表，樣式定義如何顯示HTML元素，樣式通常儲存在樣式表中。

 

三、CSS如何使用

內聯方式：樣式定義在單個的HTML元素中

內部樣式表：樣式定義在HTML頁的頭元素中

外部樣式表：將樣式定義在一個外部的CSS檔案中（.css）由HTML頁面引用樣式表文件

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>css樣式演示</title>
  7. <!-- 2.內部樣式：在head元素裡style標籤裡寫樣式，此樣式可以被當前頁面上眾多元素複用 -->
  8. <style type="text/css">
  9. /*css的註釋*/
  10. h2{color:red;}
  11. </style>
  12. <!-- 3.外部樣式：在單獨的css檔案中寫的樣式，哪個網頁引用該檔案，這個網頁就能複用這些樣式 -->
  13. <link rel="stylesheet" href="my.css">
  14. </head>
  15. <body>
  16. <!-- 1.內聯樣式：在元素的style屬性內直接寫樣式，此樣式 無法複用 -->
  17. <h1 style="color: #00bcd4;">CSS</h1>
  18. <h2>CSS有三種樣式</h2>
  19. <p>1.內聯樣式</p>
  20. <p>2.內部樣式</p>
  21. <p>3.外部樣式</p>
  22. </body>
  23. </html>

四、CSS規則特性

繼承性：父元素的宣告可以被子元素繼承，如字型、顏色等。

層疊性：同一個元素若存在多個css規則，對於不衝突的宣告可以疊加

優先順序：同一個元素若存在多個css規則，對於衝突的宣告以優先順序高著為準。

 

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>css優先順序演示</title>
  7. <style type="text/css">
  8. /*1.繼承性：父元素的樣式可以被子元素繼承（顏色、字型）*/
  9. body{
  10. font-family:"楷體","微軟雅黑";
  11. }
  12.  
  13. /*2.層疊性：給一個元素設定不同的宣告，其效果會疊加*/
  14. h1{
  15. color:red;
  16. }
  17. h1{
  18. font-size:50px;
  19. }
  20. /*3.優先順序:給同一個元素設定相同的宣告，效果以後者為準，即就近原則*/
  21. h2{
  22. color:green;
  23. }
  24. /*.....*/
  25. h2{
  26. color:yellow;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <h1>HELLO WORLD!</h1>
  32. <h2>你好，世界！</h2>
  33. </body>
  34. </html>

五、CSS選擇器

元素選擇器：通過元素名來選擇css作用的目標 比如<p>、<h1>等

類選擇器：允許以一種獨立於文件元素的方式來指定樣式 語法為:.className{}

id選擇器：選擇id等於某值的唯一元素。以一種獨立於文件元素的方式來指定樣式，它僅作用於id屬性的值*/

選擇器組：寫出一組選擇器選中每個選擇器所對應目標的並集

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>選擇器演示</title>
  7. <style type="text/css">
  8. /*2.類選擇器：選擇class等於某值的所有元素，class是程式設計師根據邏輯自己給元素增加的分類*/
  9. .day{
  10. color: blue;
  11. }
  12. /*3.id選擇器：選擇id等於某值的唯一元素。以一種獨立於文件元素的方式來指定樣式，它僅作用於id屬性的值*/
  13. #fighting{
  14. color:red;
  15. }
  16. /*4.選擇器組：寫出一組選擇器選中每個選擇器所對應目標的並集*/
  17. .day,#fighting{
  18. font-weight: bold;
  19. }
  20. /*5.派生選擇器*/
  21. /*5.1選擇某元素的子孫*/
  22. #p5 b{
  23. color:red;
  24. }
  25. /*5.2選擇某元素的兒子*/
  26. #p5>b{
  27. font-size: 30px;
  28. }
  29.  
  30. /*6.偽類選擇器：根據元素的狀態選擇選擇器*/
  31. /*6.1選擇未訪問過的超連結*/
  32. a:link{
  33. color:green;
  34. }
  35. /*6.2選擇已訪問過的超連結*/
  36. a:visited {
  37. color: red;
  38. }
  39. /*6.3選擇啟用態（正在點）的按鈕*/
  40. #i1:active{
  41. background-color: blue;
  42. }
  43. /*6.4選擇有焦點的文字框、密碼框、文字域*/
  44. #i2:focus {
  45. background-color: green;
  46. }
  47. /*6.5選擇滑鼠懸停態（觸碰）的圖片*/
  48. img:hover{
  49. width: 250px;
  50. height: 250px;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <p class="day">昨天又是忙碌的一天</p>
  56. <p>今天也是忙碌的一天</p>
  57. <p class="day">後天又是忙碌的一天</p>
  58. <p id="fighting">不管怎麼樣，生活還得繼續呀</p>
  59.  
  60. <p id="p5">
  61. 北京市<u>海淀區<b>200號5號樓</b></u><b>5號房</b>
  62. </p>
  63.  
  64. <p>
  65. <a href="http://www.baidu.com">百度</a>
  66. <a href="http://www.taobao.com">淘寶</a>
  67. <a href="http://error.com">錯誤的網站</a>
  68. </p>
  69.  
  70. <p>
  71. <input type="button" value="按鈕" id="i1">
  72. </p>
  73.  
  74. <p>
  75. <input type="text" id="i2">
  76. </p>
  77.  
  78. <p>
  79. <img alt="" src="../images/lcz.jpg">
  80. </p>
  81. </body>
  82. </html>

邊框：

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Insert title here</title>
  7. </head>
  8. <style type="text/css">
  9. /*1.四個邊設定相同的邊框*/
  10. p{
  11. border:1px dashed red;
  12. }
  13. /*2.單個邊設定邊框*/
  14. /*left/right/top/bottom*/
  15. h1{
  16. border-left: 10px solid blue;
  17. }
  18. /*3.塊元素一般寬度預設是100%，高度為自適應，內容越多，它越高。當給他固定高度時，可能會導致內容溢位，*/
  19. p{
  20. width: 300px;
  21. height: 60px;
  22. /*溢位時的處理*/
  23. overflow:auto;
  24. }
  25. </style>
  26. <body>
  27. <h1>李白</h1>
  28. <p>
  29. 李白（701年－762年） ，字太白，號青蓮居士，又號“謫仙人”，是唐代偉大的浪漫主義詩人，
  30. 被後人譽為“詩仙”，與杜甫並稱為“李杜”，為了與另兩位詩人李商隱與杜牧即“小李杜”區別，
  31. 杜甫與李白又合稱“大李杜”。據《新唐書》記載，李白為興聖皇帝（涼武昭王李暠）九世孫，
  32. 與李唐諸王同宗。其人爽朗大方，愛飲酒作詩，喜交友。
  33. </p>
  34. </body>
  35. </html>

邊距：

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Insert title here</title>
  7. <style type="text/css">
  8. div{
  9. border:1px solid red;
  10. width:100px;
  11. height:100px;
  12. }
  13. /*1.四個邊設定相同的邊距()*/
  14. #d1{
  15. padding:20px;
  16. margin:30px;
  17. }
  18. /*2.四個邊設定不同的邊距（上右下左）*/
  19. #d2{
  20. padding:10px 20px 30px 40px;
  21. margin:40px 30px 20px 10px
  22. }
  23. /*3.單個邊設定邊距
  24. left/right/top/bottom*/
  25. #d3{
  26. padding-left: 20px;
  27. margin-bottom: 40px;
  28. }
  29. /*4.對邊設定相同的邊距*/
  30. /*先上下 後左右*/
  31. #d4{
  32. padding:20px 40px;
  33. margin:30px 10px;
  34. }
  35. /*5.對邊設定邊距的特例*/
  36. /*在設定外邊距時，若左右外邊距值為auto，則該元素水平居中*/
  37. #d5{
  38. margin:20px auto;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div id="d0">d0</div>
  44. <div id="d1">d1</div>
  45. <div id="d2">d2</div>
  46. <div id="d3">d3</div>
  47. <div id="d4">d4</div>
  48. <div id="d5">d5</div>
  49. </body>
  50. </html>

最後，如果有想一起學習web前端，HTML5及JavaScript的可以來一下我的前端群733581373，好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的炫酷特效，及前端直播課程學習

 

如果想看到更加系統的文章和學習方法經驗可以關注的微訊號：‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’可以領取一套完整的學習視訊

相關推薦

css基礎語法一（選擇器與css導入方式）

數字 mic link html clas ref height font 兼容 頁面中，所有的CSS代碼，需要寫入到<style></style>標簽中。style標簽的type屬性應該選擇text/css，但是type屬性可以省略。 CS

CSS概述、CSS語法、CSS選擇器、CSS宣告

一、HTML表單   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</ti

python--前端之CSS（css頁面引入方法、選擇器之基本選擇器、組合選擇器）

gin 如果 優點 選擇器 alt 前端 設置字體 行高 常用 CSS產生背景： 為了讓網頁元素的樣式更加豐富，也為了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。 有了CSS，ht

css選擇器(1)——元素選擇器、類名和id選擇器

span pan 包含 最重要的 通過 font 給定 情況 但是 css的主要優點之一就是它能很容易地向所有同類型的元素應用一組樣式。當然它是通過選擇器來實現這一點的。 基本規則結構： 語法= 選擇器 +聲明塊 1.元素選擇器——直接使用html元素名，指向文檔元素

css基礎及其例項：常用選擇器、顏色五中寫法、字型樣式、自定義字型、盒模型及其樣式設定

<html lang="en"><head>    <meta charset="UTF-8">    <title>css樣式</title>    <style> 

呆呆鍵盤手11.13號學到的有關文字css、偽類選擇器、浮動的內容

1.文字css 　　<ins></ins>下劃線標記 　　<del></del>刪除線標記 　　文字對齊：text-align-left/center/right 　　文字首行縮排：text-indent    單位px em 　　

前端學習第55天 css三種引用、‘引用的優先順序’、基本選擇器、屬性、display

一、css三種引用 1、什麼是css CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。 當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文件進行格式化（渲染）。 2、三種引用 （1）行間式 行內式是在標記的style屬性中設定C

css交集選擇器、並集選擇器、兄弟選擇器

一，交集選擇器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15-css交集選擇器.

CSS後代選擇器、子元素選擇器、相鄰兄弟選擇器

後代選擇器 後代選擇器（descendant selector）又稱為包含選擇器。 後臺選擇器可以選擇作為某元素後代的元素。 例子：如果只希望h1元素中的em元素應用樣式，可以這樣寫：em元素：強調文字 h1 em {color:red;} <h1>Thi

背景、邊框、列表和複雜選擇器、css優先順序和權重計算！

邊框和背景屬性 邊框內容簡要 問題 解決方案 為元素邊框新增屬性 使用border-width、border-style、border-color屬性 為元素盒子的某一條邊應用屬性 使用border-top-wid

css使用方法和選擇器、優先級別和權值

1、類選擇器<p class="spesial one">類選擇器</p>。。。。。。.spesial{color: blue;} 2、id選擇器<h1 id="two">css選擇器</h1>。。。。#two{color: blue}  id是唯一的 3、*{

【選擇器小結】正則表示式、XPath選擇器、CSS選擇器小結和使用場景

$&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&

css選擇器 +、>、~

1、 >   #a>p{}　 // 使用 > 號，讓選擇器選擇id="a"的所有子類（直接子類） 2、+ h1+p，選擇緊接在另一個元素後的元素，而且二者有相同的父元素。只會選擇第一個相鄰的匹配元素。 3、~ #b~p，匹配所有在#b元素之

css派生選擇器、id選擇器、類選擇器、屬性選擇器

1.派生選擇器 也叫上下文選擇器，可以根據上下文關係來定義樣式。無需為特別為元素設定id 或者class，使程式碼更簡單。 例如.希望列表中的，<strong>變成斜體。 li strong { font-style: italic; font-weight:

第二天筆記-選擇器（標籤選擇器、類選擇器、css命名規範、谷歌案例、多類名選擇器、id選擇器、萬用字元選擇器、偽類選擇器）

四、選擇器 要想將CSS樣式應用於持定的HTML元素，首先需要找到該目標元素。在CSS中，執行這一任務的樣式規則部分則成為選擇器（選擇符）。 （一）標籤選擇器（元素選擇器） 標籤選擇器是隻用於HTML標籤名作為選擇器，按標籤名分類，為頁面中某一類標籤指定統

CSS優先順序、CSS選擇器、解決衝突——繼承與層疊

2014年10月12日 11:09:20 一紙畫扇 閱讀數：3660 標籤： css

CSS基礎知識一（CSS的應用方式、CSS選擇器、選擇器的宣告、文字CSS效果、）

一、CSS在網頁中的應用方式： 1、  行業樣式：（把css樣式寫入html中----不推薦使用） 例如：<p style=”font-size:12px;” >網頁</p> 2、  內嵌樣式：（在<head></head>

HTML &CSS之複合選擇器中的交集選擇器、並集選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器、屬性選擇器

複合選擇器是通過基本選擇器進行組合後構成的，常用的複合選擇器有：交集選擇器、並集選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器和屬性選擇器等。 1. 交集選擇器 交集選擇器由兩個選擇器直接構成

【CSS 學習】CSS 選擇器、選擇器的優先順序和權重

基本選擇器選擇器名 稱實 例描 述版 本*通用選擇器（Universal selectors）*匹配所有的元素2.1E標籤選擇器（Type selectors）p匹配所有的 <p>1.class類選擇器（Class selectors）.nav匹配所有 class

CSS 選擇器、jQuery選擇器大全

CSS 選擇器 jQuery選擇器大全 一、基本選擇器 1. id選擇器（指定id元素）id選擇器返單個元素） $('#one').css('background', '#000');