Web基礎 CSS基礎簡單内容 -＞（個人學習記錄筆記）

CSS
- css的作用
- css的基本文法
- 1. CSS的引入方式
  - 1.1 行内式
  - 1.2 内嵌式（内部樣式）
  - 1.3 外鍊式
  - 1.4 css引入方式選擇
- 2. CSS選擇器
  - 2.1 css 選擇器的定義
  - 2.2 css 選擇器的種類
  - 2.3 标簽選擇器
  - 2.4 類選擇器
  - 2.5 層級選擇器(後代選擇器)
  - 2.6 id選擇器
  - 2.7 組選擇器
  - 2.8 僞類選擇器
  - 2.9 小結
- 3. css 屬性
  - 3.1 布局常用樣式屬性
  - 3.2 文本常用樣式屬性
  - 3.3 布局常用樣式屬性示例代碼
  - 3.4 文本常用樣式屬性示例
- 4. css 元素溢出
  - 4.1 什麼是 css 元素溢出
  - 4.2 示例代碼
- 5. css 顯示特性
  - 5.1 display 屬性的使用
  - 5.2 示例代碼
- 6. 盒子模型
  - 6.1 盒子模型的介紹
  - 6.2 盒子模型相關樣式屬性

1.美化界面，比如：設定标簽文字大小、顔色、字型加粗等樣式。

2.控制頁面布局，比如：設定浮動、定位等樣式。

選擇器{

樣式标簽

}

樣式規則:

屬性名1：屬性值1；

屬性名2：屬性值2；·

屬性名3：屬性值3；

...

選擇器：是用來選擇标簽的，選出來以後給标簽加樣式。

代碼示例：

div{
	width:100px;
	height:100px;
	background:gold;
}

css樣式表可以由一個或者多個選擇器組成

說明：

css是由兩主要的部分構成：選擇器和一條或多條樣式規則，注規則需要放到大括号裡。

小結

css是層疊樣式表，他是用來美化網頁和控制頁面布局的

定義css的文法格式是：選擇器{樣式規則}

直接在标簽的style屬性中添加css樣式

<div style="width:100px; height:100px; background:red ">hello</div>

優點：友善、直覺。

缺點：缺乏可重用性。

在<head>标簽内加入 <style> 标簽，在<style>标簽中編寫css代碼。

<head>
    <style type="test/css">
        h3{
            color: red;
        }
    </style>
</head>

優點：在同一個頁面内部便于複用和維護。

缺點：在多個頁面之間的可重用性不夠高。

将css代碼寫在一個單獨的.css檔案中，
在<head> 标簽中使用<link> 标簽直接引入該檔案到頁面中。

示例代碼：

<link rel="stylesheet" type="text/css" href="css/main.css">

優點：使得css樣式與html分離，便于整個頁面系統的規劃和維護，可重用性高。

缺點：css代碼由于分離到單獨的css檔案，容易出現css代碼過于集中，若維護不

當則極容易造成混亂。

1.行内式幾乎不用

2.内嵌式在學習css樣式的階段使用

3.外鍊式在公司開發的階段使用，可以對css樣式和html頁面分别進行開發。

代碼測試

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式 -->
    <style>
        /* css裡邊的注釋 ctrl + / */
        /* 選擇器， css樣式表可以由很多選擇器組成，選擇器就是用來選擇标簽給标簽添加樣式 */
        a{
            color: green;
        }

        div{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <!-- 行内式 -->
    <p style="color: red;">我是一個段落标簽</p>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.baidu.com">谷歌</a>
    <div>哈哈</div>
</body>
</html>

css 選擇器是用來選擇标簽的，選出來以後給标簽加樣式。

标簽選擇器
類選擇器
層級選擇器(後代選擇器)
id選擇器
組選擇器
僞類選擇器

根據标簽來選擇标簽，以标簽開頭，此種選擇器影響範圍大，一般用來做一些通用設定。

示例代碼

<style type="text/css">
    p{
        color: red;
    }
</style>

<div>hello</div>
<p>hello</p>

根據類名來選擇标簽，以 . 開頭, 一個類選擇器可應用于多個标簽上，一個标簽上也可以使用多個類選擇器，多個類選擇器需要使用空格分割，應用靈活，可複用，是css中應用最多的一種選擇器。

<style type="text/css">
    .blue{color:blue}
    .big{font-size:20px}
    .box{width:100px;height:100px;background:gold} 
</style>

<div class="blue">這是一個div</div>
<h3 class="blue big box">這是一個标題</h3>
<p class="blue box">這是一個段落</p>

根據層級關系選擇後代标簽，以選擇器1 選擇器2開頭，主要應用在标簽嵌套的結構中，減少命名。

<style type="text/css">
    div p{
        color: red;
    }
    .con{width:300px;height:80px;background:green}
    .con span{color:red}
    .con .pink{color:pink}
    .con .gold{color:gold}    
</style>

<div>
    <p>hello</p>
</div>

<div class="con">
    <span>哈哈</span>
    <a href="#" class="pink">百度</a>
    <a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>

注意點: 這個層級關系不一定是父子關系，也有可能是祖孫關系，隻要有後代關系都适用于這個層級選擇器

根據id選擇标簽，以#開頭, 元素的id名稱不能重複，是以id選擇器隻能對應于頁面上一個元素，不能複用，id名一般給程式使用，是以不推薦使用id作為選擇器。

<style type="text/css">
    #box{color:red} 
</style>

<p id="box">這是一個段落标簽</p>   <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->
<p>這是第二個段落标簽</p> <!-- 無法應用以上樣式，每個标簽隻能有唯一的id名 -->
<p>這是第三個段落标簽</p> <!-- 無法應用以上樣式，每個标簽隻能有唯一的id名  -->

注意點: 雖然給其它标簽設定id=“box”也可以設定樣式，但是不推薦這樣做，因為id是唯一的，以後js通過id隻能擷取一個唯一的标簽對象。

根據組合的選擇器選擇不同的标簽，以 , 分割開, 如果有公共的樣式設定，可以使用組選擇器。

<style type="text/css">
    .box1,.box2,.box3{width:100px;height:100px}
    .box1{background:red}
    .box2{background:pink}
    .box2{background:gold}
</style>

<div class="box1">這是第一個div</div>
<div class="box2">這是第二個div</div>
<div class="box3">這是第三個div</div>

用于向選擇器添加特殊的效果, 以 : 分割開, 當使用者和網站互動的時候改變顯示效果可以使用僞類選擇器

<style type="text/css">
    .box1{width:100px;height:100px;background:gold;}
    .box1:hover{width:300px;}
</style>

<div class="box1">這是第一個div</div>

css 選擇器就是用來選擇标簽設定樣式的
常用的 css 選擇器有六種，分别是:

4. id選擇器

我們知道 css 作用是美化 HTML 網頁和控制頁面布局的,接下來我們來學習一下經常使用一些樣式屬性。

width 設定元素(标簽)的寬度，如：width:100px;
height 設定元素(标簽)的高度，如：height:200px;
background 設定元素背景色或者背景圖檔，如：background:gold; 設定元素的背景色, background: url(images/logo.png); 設定元素的背景圖檔。no-repeat 不重複拉伸
border 設定元素四周的邊框，如：border:1px solid black; 設定元素四周邊框是1像素寬的黑色實線
以上也可以拆分成四個邊的寫法，分别設定四個邊的：
border-top 設定頂邊邊框，如：border-top:10px solid red;
border-left 設定左邊邊框，如：border-left:10px solid blue;
border-right 設定右邊邊框，如：border-right:10px solid green;
border-bottom 設定底邊邊框，如：border-bottom:10px solid pink;
padding 設定元素包含的内容和元素邊框的距離，也叫内邊距，如padding:20px;padding是同時設定4個邊的，也可以像border一樣拆分成分别設定四個邊:padding-top、padding-left、padding-right、padding-bottom。
margin 設定元素和外界的距離，也叫外邊距，如margin:20px;margin是同時設定4個邊的，也可以像border一樣拆分成分别設定四個邊:margin-top、margin-left、margin-right、margin-bottom。
float 設定元素浮動，浮動可以讓塊元素排列在一行，浮動分為左浮動：float:left; 右浮動：float:right;

color 設定文字的顔色，如： color:red;
font-size 設定文字的大小，如：font-size:12px;
font-family 設定文字的字型，如：font-family:'微軟雅黑';為了避免中文字不相容，一般寫成：font-family:'Microsoft Yahei';
font-weight 設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗
line-height 設定文字的行高，如：line-height:24px; 表示文字高度加上文字上下的間距是24px，也就是每一行占有的高度是24px
text-decoration 設定文字的下劃線，如：text-decoration:none; 将文字下劃線去掉
text-align 設定文字水準對齊方式，如text-align:center 設定文字水準居中
text-indent 設定文字首行縮進，如：text-indent:24px; 設定文字首行縮進24px

<style>

    .box1{
        width: 200px; 
        height: 200px; 
        background:yellow; 
        border: 1px solid black;
    }

    .box2{
        /* 這裡是注釋内容 */
        /* 設定寬度 */
        width: 100px;
        /* 設定高度 */
        height: 100px;
        /* 設定背景色 */
        background: red;
        /* 設定四邊邊框 */
        /* border: 10px solid black; */
        border-top: 10px solid black;
        border-left: 10px solid black;
        border-right: 10px solid black;
        border-bottom: 10px solid black;
        /* 設定内邊距， 内容到邊框的距離，如果設定四邊是上右下左 */
        /* padding: 10px;   */
        padding-left: 10px;
        padding-top: 10px;
        /* 設定外邊距，設定元素邊框到外界元素邊框的距離 */
        margin: 10px;
        /* margin-top: 10px;
        margin-left: 10px; */
        float: left;
    }

    .box3{
        width: 48px; 
        height: 48px; 
        background:pink; 
        border: 1px solid black;
        /*讓div在一行顯示，可以用浮動*/
        float: left;
    }

</style>
<!-- div>div*2  建立一個父div裡面建立兩個子div-->
<div class="box1">
    <div class="box2">
        padding 設定元素包含的内容和元素邊框的距離
    </div>
    <div class="box3">
    </div>
</div>

<style>
    p{
       /* 設定字型大小  浏覽器預設是 16px */
       font-size:20px;
       /* 設定字型 */
       font-family: "Microsoft YaHei"; 
       /* 設定字型加粗 */
       font-weight: bold;
       /* 設定字型顔色 */
       color: red;
       /* 增加掉下劃線  還有中劃線 line-through 
       上劃線overline */
       text-decoration: underline;
       /* 設定行高  可以讓文字垂直方向居中*/
       line-height: 100px;
       /* 設定背景色 */
       background: green;
       /* 設定文字居中 */
       /* text-align: center; */
       /* 文本縮進 */
       text-indent: 40px;
    }

    a{
        /* 去掉下劃線 */
        text-decoration: none;
    }
</style>

<a href="#">連接配接标簽</a>
<p>
    你好，世界!
</p>

當子元素(标簽)的尺寸超過父元素(标簽)的尺寸時，此時需要設定父元素顯示溢出的子元素的方式，設定的方法是通過overflow屬性來完成。

overflow的設定項：

visible 預設值, 顯示子标簽溢出部分。
hidden 隐藏子标簽溢出部分。
auto 如果子标簽溢出，則可以滾動檢視其餘的内容。

<style>
    .box1{
        width: 100px;
        height: 200px;
        background: red;
        /* 在父級上設定子元素溢出的部分如何顯示 */
        /* overflow: hidden; */
        overflow: auto;
    }
    .box2{
        width: 50px;
        height: 300px;
        background: yellow;
    }
</style>

<div class="box1">
    <div class="box2">hello</div>
</div>

display 屬性是用來設定元素的類型及隐藏的，常用的屬性有：

none 元素隐藏且不占位置
inline 元素以行内元素顯示
block 元素以塊元素顯示

<style>
    .box{
        /* 将塊元素轉化為行内元素 
	設定div可以和其它元素在一行顯示，以後就不能設定寬高*/
/*以後既設定div的寬高又設定在一行顯示，可以通過浮動來完成*/
        display:inline;
    } 

    .link01{
        /* 将行内元素轉化為塊元素 設定标簽自己單獨占一行，不和其它标簽在一行 */
        display:block;
        background: red;

    }

    .con{
        width:200px;
        height:200px;
        background:gold;

        /* 将元素隐藏 标簽再次顯示可以設定成block，删除display這個樣式屬性 div 預設block 自己霸占一行*/
        display:none;
    }

</style>

<div class="con"></div>
<div class="box">這是第一個div</div>
<div class="box">這是第二個div</div>
<a href="#" class="link01">這是第一個連結</a>
<a href="#" class="link01">這是第二個連結</a>

說明:

行内元素不能設定寬高，塊元素或者行内塊元素可以設定寬高。

所謂的盒子模型就是把HTML頁面的元素看作一個矩形盒子，矩形盒子是由内容(content)、内邊距(padding)、邊框(border)、外邊距(margin)四部分組成。

盒子模型示意圖如下：

盒子的内容寬度(width)，注意：不是盒子的寬度
盒子的内容高度(height)，注意：不是盒子的高度
盒子的邊框(border)
盒子内的内容和邊框之間的間距(padding)
盒子與盒子之間的間距(margin)

設定寬高：

設定盒子的寬高，此寬高是指盒子内容的寬高，不是盒子整體寬高

width:200px;  /* 設定盒子的寬度，此寬度是指盒子内容的寬度，不是盒子整體	寬度(難點) */ 
height:200px; /* 設定盒子的高度，此高度是指盒子内容的高度，不是盒子整體	高度(難點) */

設定邊框:

設定一邊的邊框，比如頂部邊框，可以按如下設定：

border-top:10px solid red;

其中10px表示線框的粗細；solid表示線性；red表示邊框的顔色

設定其它三個邊的方法和上面一樣，把上面的'top'換成'left'就是設定左邊，換成'right'就是設定右邊，換成'bottom'就是設定底邊。

四個邊如果設定一樣，可以将四個邊的設定合并成一句：

border:10px solid red;

設定内間距padding

設定盒子四邊的内間距，可設定如下：

padding-top：20px;     /* 設定頂部内間距20px */ 
padding-left:30px;     /* 設定左邊内間距30px */ 
padding-right:40px;    /* 設定右邊内間距40px */ 
padding-bottom:50px;   /* 設定底部内間距50px */

上面的設定可以簡寫如下：

padding：20px 40px 50px 30px; /* 
	四個值按照順時針方向，分别			設定的是 上 右 下 左  
	四個方向的内邊距值。 */

padding後面還可以跟3個值，2個值和1個值，它們分别設定的項目如下：

padding：20px 40px 50px; /* 設定頂部内邊距為20px，左右内邊距為40px，底部内邊距為50px */ 
padding：20px 40px; /* 設定上下内邊距為20px，左右内邊距為40px*/ 
padding：20px; /* 設定四邊内邊距為20px */

設定外間距margin

外邊距的設定方法和padding的設定方法相同，将上面設定項中的'padding'換成'margin'就是外邊距設定方法。

盒子的真實尺寸

盒子的width和height值固定時，如果盒子增加border和padding，盒子整體的尺寸會變大，是以盒子的真實尺寸為：

盒子寬度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

Web基礎 CSS基礎簡單内容 -＞（個人學習記錄筆記）

繼續閱讀

前端和背景是如何互動的？

怎樣使用SpringMVC控制頁面

Spring MVC 接收多個實體參數

CSS中僞類和僞元素的差別

Vue項目 - 單檔案元件和Vue中的路由

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題