前端學習-css(一)

時間 2019-11-18

標籤前端學習 css 欄目 CSS 简体版

原文原文鏈接

1、CSS介紹css

　　一、什麼是CSShtml

　　CSS（Cascading Style Sheet,層疊樣式表）定義如何顯示HTML元素，給HTML設置樣式，讓他更加美觀。瀏覽器

　　當瀏覽器讀到一個樣式表，他就會按照這個樣式表來對文檔進行格式化（渲染）字體

　　二、CSS語法3d

　　　　css實例htm

　　　　每一個CSS樣式由兩個部分組成：選擇器和聲明。聲明有包括屬性和屬性值。每一個聲明以後用分號結束。blog

　　三、CSS註釋utf-8

　　/*這是註釋*/文檔

2、CSS的幾種引入方式字符串

　　一、行內樣式

　　行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用

　　二、內部樣式

　　嵌入式是將css樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式以下：

<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
         p{
               background-color: #2b99ff
        }
     </style>
</head>

　　三、外部樣式

　　外部樣式就是將CSS寫在一個單獨的文件中，而後在頁面進行引入便可。推薦使用此方式

<link href="mystyle.css" rel="stylesheet" type="text/css"/>  #如今寫的這個.css文件是和你的html是一個目錄下，若是不是一個目錄，href裏面記得寫上這個.css文件的路徑

p {color:blue;}
/*註釋*/

註釋通常都使用來描述後面這段css代碼是給頁面上哪個板塊用的
/*標題樣式*/
xxxxx

/*我的中心設置*/

3、CSS選擇器（如何找到對應的標籤）

　　一、基本選擇器

　　● 元素選擇器（標籤名）　

p {color: "red";}

　　● ID選擇器　

#il {    #號表示id屬性，後面的il表示id屬性的值
    background-color: red;    #背景色，color：red是字體顏色
}

　　● 類選擇器

.c1 {  .表示class屬性，c1表示class的值
  font-size: 14px;
}
p.c1 {  找到全部p標籤裏面含有class屬性的值爲c1的p標籤，注意他倆之間沒有空格昂
  color: red;
}

　　注意：　　

　　　　　　樣式類名不要用數字開頭（有的瀏覽器不認）。

　　　　　　標籤中的class屬性若是有多個，要用空格分隔。

　　● 通用選擇器

* {  *表示全部的標籤
  color: white;
}

　　二、組合選擇器

　　● 後代選擇器（子子孫孫）

/*li內部的a標籤設置字體顏色*/
li a {
  color: green;
}

　　● 兒子選擇器（只找兒子）

/*選擇全部父級是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

　　● 毗鄰選擇器

/*選擇全部緊接着<div>元素以後的<p>元素*/
div+p {
  margin: 5px;
}

　　● 弟弟選擇器

/*i1後面全部的兄弟p標籤*/
#i1~p {
  border: 2px solid royalblue;
}

找id爲d2的div標籤下的兄弟標籤中的p標籤，往下找

　　三、屬性選擇器　

/*用於選取帶有指定屬性的元素。*/
p[title] {
  color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
  color: green;
}

　　經過屬性或屬性的值來查找，這個屬性是咱們自定義的，不是id啊class啊這種html自帶的屬性

　　每一個標籤裏面均可以可一個title屬性，這個屬性就是鼠標移動到這個標籤上，就顯示出一個title的值，還有

下面這些不太差僱傭的正則寫法，屬性值以什麼開頭，什麼結尾。

/*找到全部title屬性以hello開頭的元素*/
[title^="hello"] {
  color: red;
}

/*找到全部title屬性以hello結尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到全部title屬性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到全部title屬性(有多個值或值以空格分割)中有一個值爲hello的元素：*/
[title~="hello"] {
  color: green;
}

　　看示例：title*='hello'

看示例：title~=’hello‘

　　　　上面這個屬性選擇器不經常使用，簡單瞭解一下就好了。