CSS（待新增）

weixin_34249678發表於2018-05-31
CSS

CSS（待新增）

css的相關類容比較多，準備分幾個模組寫

css簡介

什麼是css
css（cascading style sheets）是用來為網頁新增樣式的程式碼

例如：

p {
    color: red;
    width: 50px;
    border: 1px solid black;
   }

上面程式碼，p是我們選中的元素，意思我們將對p元素新增樣式，裡面的內容是我們的樣式程式碼，然後用{}包裹樣式程式碼

再舉一例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>蔡華鵬的部落格</title>
  </head>
  <body>
    <h1>css 簡介</h1>
    <p>我們怎麼學習css</p>
  </body>
<html>
/*style.css*/
h1 {
      color: red;
      }
p {
    color; blue;
   }

上面程式碼中css的功能就是<h1>標籤裡的字型顏色變成紅色，p標籤裡的字型顏色變為藍色

看看css的工作原理：
[圖片上傳失敗...(image-c0142a-1527749256671)]
參考連結

  • cssreference.io/
  • CSS reference
  • CSS basics
    我們現在知道了，什麼是css，css會有怎樣的效果以及css的工作原理，那麼我們現在需要去知道怎麼引用css，和怎麼去選擇元素，以及怎麼去運用scc

css的應用方式

外部樣式表（比較推薦）

1、通過<link>引入scc，如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>CSS</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1>Hello CSS!</h1>
</body>
</html>

2、通過@import引入樣式，放入css中（注意：不要忘記分號）

<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);
</style>

內部樣式表

將css放在頁面的<style>元素中，如：

<style>
  h1 {
        background: red;
       }

內聯樣式（不推薦，但在有些情況下很有用）

<p style="background: blue; font-size: 12px;>css hello</p>

屬性樣式（廢棄）

<img src="圖片地址" width=12 height=12>

參考連結

css選擇器

CSS 選擇器用於定位我們想要給予樣式的 HTML 元素

選擇器型別

  • 基礎選擇器
  • 組合選擇器
  • 屬性選擇器
  • 偽類選擇器
  • 偽元素選擇器

基礎選擇器

選擇器 含義
* 通用元素選擇器，匹配頁面任何元素（這也決定了我們很少用）
#id id選擇器，匹配特定id元素
.class 類選擇器，匹配class包含（不是等於）特定類元素
element 標籤選擇器

用法：

* {
  box-sizing: border-box;
}

通用選擇器，匹配頁面所有元素

<p id="notification">通知：明天放假</p>
#notification {
  font-size: 24px;
}

id選擇器，以上程式碼匹配id為notification的元素

  <li class="first done">起床</li>
  <li class="second done">刷牙</li>
  <li class="third">洗臉</li>
</ul>
.first {
  font-weight: bold;
}

.done {
  text-decoration: line-through;
}

類選擇器，一個 CSS 類可以應用到多個不同的元素，一個元素也可以應用多個不同的 CSS 類

p {
  color: red;
}

div {
  color: blue;
}

標籤選擇器，以上程式碼匹配標籤為p和標籤為div的元素

組合選擇器

選擇器 含義
E,F 多元素選擇器，用,分割，同時匹配元素E或元素F
E F 後代選擇器，用空格分離，匹配E元素所有的後代（不只是子元素，子元素向下遞迴）元素F
E>F 子元素選擇器，用>分離，匹配E元素的所有直接F元素
E+F 直接相鄰選擇器，匹配E元素之後的相鄰的同級元素
E~F 普通相鄰選擇器（弟弟選擇器），匹配E元素之後的同級元素F（無論直接相鄰於否）
.class1.class2 匹配同時擁有class1和class2的元素，連寫的時候中間沒有分隔符號,，.和#本身充當分隔符元素

屬性選擇器

選擇器 含義
E[attr] 匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div
E[attr=value 匹配屬性attr值為value的元素，div[id=text]，匹配id=text的div
E[attr~=value 匹配所有屬性attr具有多個空格分隔，其中一個值等於value的元素
E[^=value 匹配屬性attr的值以value開頭的元素
E[$=value 匹配屬性attr的值以value結尾的元素
E[*=value 匹配屬性attr的值包含value的元素
E[attr|=val]

偽類選擇器

選擇器 含義

偽元素選擇器

選擇器 含義
E::first-line 匹配E元素內容的第一行
E::first-letter 匹配E元素內容的第一個字母
E::before 在E元素之前插入生成的內容
E::after 在E元素之後插入生成的內容

css優先順序

從高到低分別是
1、在屬性後面使用!important會覆蓋頁面內任何位置定義的元素樣式
2、作為style屬性寫在元素標籤上的內聯樣式
3、id選擇器
4、類選擇器
5、偽類選擇器
6、屬性選擇器
7、標籤選擇器
8、通配選擇器
9、瀏覽器自定義

一篇漂亮的網頁，需要css去渲染它。所以要學會使用css去操作出自己需要的樣式，在學會操作樣式之前要知道一些元素的特性，方便於達到自己想要的結果

塊級元素和行內元素

  • 塊級(block-level);內聯(inline-level)
  • 塊級可以包含塊級和行內，行內只能包含文字和行內
  • 塊級佔據一整行空間，行內佔據自身寬度空間
  • 高寬設定、內外邊的差異

block-level 如：

div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th .....

inline-level

em strong span a br img button input label select textarea
code script

寬高

只對塊級元素設定生效，對行內元素設定無效

在網頁中，我們會看到有些類容被邊框包圍，那麼我們來了解一下邊框。同時，我們還可以利用邊框去做一些好看的形狀

邊框（border）

  • border-width

  • border-color

  • border-style

  • border-radius

  • border-width
    設定邊框的寬度

h1 { 
    border-width: 8px;
   }
  • border-color
    設定邊框顏色
h1 {
   border-color: red;
  }
  • border-style
    設定邊框的樣式
h1 {
   border-style: solid;     /*dotted dash*/
  }
  • border-radius
    用於給元素新增圓角
h1 {
   border-radius: 8px;
  }

邊框簡寫

.box {
      border: 5px dotted #ccc;
     }

使用邊框做三角形

<div class="triangle"></div>


.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid deepskyblue;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}

在學習後面內容時，我們要先了解一下元素的和模型結構

11945856-113a27911d5ca58c.png
盒模型

padding

  • padding代表內邊距，有四個方向的值，可以合寫，值可以是數值，也可以是百分比（相對於父容器不是本身）
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

margin

-margin代表外邊距，有四個方向的值，可以合寫，值可以是數值，也可以是百分比（相對於父容器不是本身），還可以是負值

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

margin: 0 auto
對於塊級元素設定margin: 0 auto;可達到劇中的目的

文字樣式

font

  • font-size: 字型大小
  • font-family: 字型，宋體，微軟雅黑，Arial等
  • font-weight: 文字粗度，常用的就是預設值regular和粗體bold
  • font-height: 行高，可以用作百分比，倍數或者固定尺寸
  • 以上屬性都可以繼承個子元素

文字

  • text-align: 文字對其方式left、center、right、justify
  • text-indent: 文案第一行縮排距離
  • text-decoration: none、underline、line-through、overline
  • color: 文字顏色
  • text-transform: 改變字型大小寫none、uppercase、lowercase、capitalize
  • text-spacing: 可以改變字（單詞）之間的標準間隔
  • letter-spacing: 字母間隔修改的是字元或字母之間的間隔

行內元素居中

<style>
  .box {
    text-align: center:
  }
</style>

**單行文字溢位加、、、

相關文章