關於CSS的我的理解

時間 2019-12-09

標籤關於 css 我的理解欄目 CSS 简体版

原文原文鏈接

CSS的我的理解

1、概念

層疊樣式表，主要由屬性和屬性值（value）組成。（雖然HTML、CSS對代碼大小寫不敏感，可是屬性和屬性值對代碼大小寫是敏感的）css

2、工做方式

1.工做原理

由瀏覽器將CSS和html分別轉化爲文檔對象，組合爲DOM文檔對象模型，標記語言中的每一個元素、屬性、文字片斷都是DOM樹中的一個節點，再由瀏覽器轉換顯示。html

2.如何應用

（1）內聯樣式

優先級最高，但因爲會形成代碼冗餘及代碼更新任務龐大，通常不採用。瀏覽器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

（2）內部樣式表

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

（3）外部樣式表

單獨創建一個.css文檔
易於代碼更新，減小代碼冗餘。做爲新手，這一點也是必需要作到的。佈局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

3、語法內容

1.css聲明

格式：「property : value」
屬性（property）與屬性值（value）單詞拼寫採用美式標準。flex

2.css聲明塊

格式：「{property : value; property : value;}」
「;」的丟失最易致使錯誤。spa

3.css選擇器和規則

格式：「selector {property : value; property : value;}」code

（1）層疊（cascade）

1）簡單選擇器

元素選擇器 p
類選擇器 .class
ID選擇器 #id
通用選擇器 *
而且選擇器 p.class#id
並列選擇器 p,.class,#idorm

2）層次選擇器

後代選擇器 parent son，使用空格分割兩個選擇器
子代選擇器 parent>son，使用>分割兩個選擇器
下一個兄弟選擇器 selector+selector，使用+分割兩個選擇器
以後全部兄弟選擇器 selector~selector，使用~分割兩個選擇器htm

3）屬性選擇器（form表單多用）

selector[property]
selector[property=value]
selector[property*=value]
selector[property^=value]
selector[property$=value]
selector[property~=value]對象

4）僞類選擇器

子元素
:first-child
:nth-child()
:first-of-type
狀態
:hover
:active
(順序LVHA:link visited hover active)
:focus

5）僞元素選擇器

::after 經常使用於清除浮動
::before
::first-letter
::first-line

6）特性值：

！important（改變了CSS方式，儘可能繞開！）
放在一段style中（1000）
id（100）
.class或僞類或屬性選擇器（10）
元素選擇器或僞元素選擇器（1）
後者覆蓋前者（按照順序）

（2）繼承

這裏很少敘述…………

4.佈局

（1）正常佈局流

1）div行及元素
2）span塊級元素

（2）浮動佈局

float:left;
float:right;
clear:both;（清除左右浮動，該元素會換行）

*塊級元素一旦浮動以後:
1）脫離了當前文檔流，對父級元素失去了支撐的做用，後面的非浮動元素會插入到浮動元素的下面。
2）浮動元素的寬高默認由其內容所決定，可是咱們能夠爲其指定寬高。
3）當浮動元素沒法承載子元素的時候，子元素會在下一行顯示。
4）浮動元素的margin沒法合併。

*浮動引起的問題:
1）子元素浮動會失去對父元素的支撐
解決方案：在全部子元素的末尾添加一個空元素，該空元素須clear:both;
2）若是爲子元素的寬度指定絕對值，而且子元素具備邊框，在縮放瀏覽器的時候會錯位
解決方案：

1.box-sizing:border-box;
2..right {margin-left:100px;}

（3）定位佈局

1）靜態定位
2）相對定位

相對於該元素原先位置進行移動

relative:
top
right
bottom
left

3）絕對定位

相對於該元素最近的定位父元素位置進行移動

absolute:
top
right
bottom
left

4）固定定位

fixed

（4）伸縮盒佈局

display:flex;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。