走進前端——CSS(1)

前言

作者:迷途の羊 
在這里分享學習自己的經歷,希望可以幫助到初學前端的旁友
成為一個更好的前端開發者
大學在讀前端菜雞  若文中有誤，感謝指正

DAY3 CSS選擇器、樣式定義

CSS是什么？

前端開發必然少不了CSS，CSS簡單來說他是一種層疊樣式表，用于給HTML元素添加各種各樣的樣式從而使頁面展示出更好的效果同時帶給用戶更佳的體驗，

CSS使用方法

CSS有三種引入方法，每種引入方法的優先級不同，因此，在頁面中同時使用不同的引入方式時要注意其優先級，以免導致頁面中展現不出自己想要的樣式(優先級：某DOM節點同時具有兩種相同型別的樣式時就會計算其優先級，只顯示優先級最高的那個樣式)，

• 行內樣式
  行內樣式就是直接在標簽內部定義樣式，該定義樣式的方法優先級最高，

下面的例子我們安放了一個P標簽，并給P標簽修改了字體大小以及字體顏色：

    <!--行內樣式-->
    <p style="font-size: 18px;color: rgba(182, 182, 92, 0.5);">行內樣式</p>

在這個標簽中，style="“是用來定義樣式的，在”"中書寫CSS且每條陳述句之間用分號隔開(CSS語法)，

• 行內樣式
  行內樣式是我們更加常用的寫法，它寫入的地點是head標簽中的style標簽內部，是由選擇器+大括號來實作的，接下來我們實作一個簡單的語意化按鈕來鞏固之前的HTML語意化：

<!--語意化按鈕,HTML-->
    <a href="javascript:;">
        <p>button</p>
    </a>

	<style>
       /*語意化按鈕,CSS*/
       a{
            text-decoration: none;
            color: black;
        }

        p{
            border: 1px solid #ccc;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 15px;
            box-shadow: 3px 3px 10px rgb(204, 204, 255);
        }

        p:hover{
            background-color: #eee;
            box-shadow: 3px 3px 10px rgb(180, 180, 255);
        }
	</style>

最終展現效果如圖：
我們給該按鈕也設定了一個CSS滑鼠覆寫樣式，當滑鼠放入按鈕內按鈕樣式效果也會改變，如圖所示：

簡單介紹一下使用的CSS陳述句，后續文章中會詳細介紹：

text-decoration：清除a標簽下劃線樣式；color：更變字體顏色；border：給塊級元素設定邊框；
width：設定塊級元素寬；height：設定塊級元素搞；line-height：設定行高；text-align：設定內容居中方式；
border-radius：設定邊框弧度；box-shadow：設定盒子的陰影；

• 外部樣式
  外部樣式是用于引入其他css檔案中的CSS樣式的，使用方法如下，CSS書寫方式與行內樣式相同，但不需要寫style標簽，

		<!--寫在head中-->
		<link rel="stylesheet" href="./tips.css">

href=""為CSS檔案路徑，

CSS選擇器

• “ * ”通配選擇器
  通配符選擇器，寫在該選擇器內部的樣式對所有元素均生效，通常用于初始化元素樣式，最常見的初始化如下所示：

	<style>
        *{
        margin:0px;
        padding:0px;
        }
    </style>

該部分將所有元素的外邊距及內邊距初始化為0px，該選擇器的優先級最低，為0；

• 元素選擇器
  元素選擇器也可以成為標簽選擇器，它們是由標簽來開頭的，譬如：

	<style>
        a{
            text-decoration: none;
            color: black;
        }

        p{
            border: 1px solid #ccc;
        }
    </style>

其中的p、a均為元素選擇器，其優先級也較低，為1，

• class類選擇器
  類選擇器是我們很常用的，匹配方式是匹配HTML標簽中所有class為某一值的所有元素，這些元素的樣式均會受到class類選擇器樣式中的影響，譬如：

HTML：

	<a class="button-outer" href="javascript:;">
        <p class="button-inner">button</p>
    </a>

CSS：

	<style>
        .button-outer{
            text-decoration: none;
            color: black;
        }

        .button-inner{
            border: 1px solid #ccc;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 15px;
            box-shadow: 3px 3px 10px rgb(204, 204, 255);
        }

        .button-inner:hover{
            background-color: #eee;
            box-shadow: 3px 3px 10px rgb(180, 180, 255);
        }
    </style>

此處代碼效果與之前的button按鈕效果相同，注意，寫class樣式時要在class前加"."，該選擇器的優先級為10，

• id選擇器
  id選擇器和class選擇器類似，class前加"."改為#即可，同樣在HTML中標簽賦予id屬性即可，該選擇器不常用，其他使用方法和class類似，在這里不做過多展示，該選擇器優先級為100，
• 后代選擇器
  先給出一個例子：

       .div a{
           font-size: 20px;
       }

此處選擇器意義為：被類名為div的標簽包裹的所有a標簽的樣式更改為…
這樣書寫的方式即為后代選擇器，意為選擇某一元素的所有后代，

• 子元素選擇器
  子元素選擇器和后代選擇器類似，但作用范圍比后代選擇器小，先拋出一個示例：

.div>a{
           font-size: 24px;
       }

作用效果和后代選擇器相同，但子元素選擇器不可跨層作用，

• 相鄰選擇器
  選擇對應的同級元素的下一個兄弟且必須相鄰，示例：

.div+div{
           font-size: 24px;
       }

<div class="div">
        <a href="">1</a>
        <br/>
        <a href="">2</a>
        <a href=""><p>3</p></a>
    </div>
    <div>4</div>

此處選中class名為div的元素的相鄰兄弟div(HTML內容為4的元素)會更改字體大小，PS：中間不可間隔元素，

• 偽類/偽元素選擇器
  在此介紹常用的選擇器

注意：hover必須在link和visited之后才會生效，active必須在hover之后才會生效，

CSS樣式

在這里先介紹部分簡單的樣式，其他樣式后續講解：

下期內容

CSS定位(暫定)

**章末語**
前端容易入門，但是需要持續不斷的學習，更新自己的知識
千里之行，始于足下
喜歡文章的話可以動動小手點個贊和關注呀~~
長期更新......