1. 程式人生 > >CSS基礎介紹

CSS基礎介紹

在前端開發中我們瞭解到,CSS為為頁面內容更改樣式的,全稱為層疊式樣式表

在程式設計是格式為寫在title標籤下

<style type="text/css"> 描述內容 </style>

一、CSS屬性

這邊首先介紹一些CSS基礎屬性方便舉例說明更多所要用到的之後會概述

括號裡內容為在sublime中快捷鍵  簡寫+Tab鍵

1.顏色  color:red;   (c)

2.畫素 font-size:40px;  (fos)  //注意畫素單位

3.加粗:font-weight: bold;   (fwb)

正常:font-weight: normal;    (fwn)

4.字型傾斜:font-style: italic;  

正常同上

5.背景顏色:background-color: blue;  (bgc)

6.text-decoration: underline;        (tdn)

這些屬性都是慢慢記憶積累這裡介紹一些最基礎的。

二、選擇器

在我們對於一些內容更改樣式時首先要選擇到更改的地方這裡介紹了一些選擇器

1.標籤選擇器

舉例:<h1>{

巴拉巴拉

}

然後所有<h1>標籤裡的東西都變,該方法描述共性問題。

2.id選擇器

這邊不做介紹一般使用下面這個(避免與JS的一些衝突)

3.類選擇器

我們可以為標籤新增類名 class= "類名"(每一個標籤可以有多類名只能在一個class中用空格隔開表示)

在CSS中我們以  點加類名選擇

例:我們要做這樣的一個頁面

原始碼及為(省略了一些不必要的部分):

<style type="text/css">
2			.lv{
3				color:green;
4			}
5			.da{
6				font-size: 60px;
7			}
8			.xian{
9				text-decoration: underline;
10			}
11		</style>

        <p class="lv da">段落1</p>
2		<p class="lv xian">段落2</p>
3		<p class="da xian">段落3</p>

更多的是方便了一些內容的共性調整。

4.後代選擇器

後代這個概念我們首先要明瞭簡易理解為一個標籤裡所有我包裹的標籤都為我的後代

  1. <div class="div1">
  2.               <ul>
  3.                      <li>
  4.                             <p>段落</p>
  5.                             <p>段落</p>
  6.                             <p>段落</p>
  7.                      </li>
  8.               </ul>

       </div>

  1. .div1 p{
  2.                      color:red;

              }

這樣的一個描述就代表div後代中的p變成紅色,空格可多次存在,空格所接內容也可以包括類名。

5.交集選擇器

在選擇其中點表示通俗理解為誰的誰

div.div1

看到這個就表示有一個

<div class="div1"></div>

選擇器不是固定死的,通常是組合起來用,例項化時更好理解。

6.並集選擇器

表示誰和誰都是怎樣 選擇器上逗號連線

這些是一些最底層的選擇器,那麼在CSS3中還有更多更高階的選擇器供使用,這邊就不介紹的。

小編這篇所講只是一部分後面的會慢慢更新部落格介紹的(還在往後學習中)。