css簡介(一)

來源:互聯網
上載者:User

本文內容是對HTML & CSSDeSign anD buiLD WebSiTeS 第10章的小結。

一條CSS的規則由兩部分組成selector{declaration},一個declaration是一個property:value;的組合。可以有多個selector有一樣的declaration,他們之間用逗號分開。

h1,h2,h3 {font-family:Arial; color:yellow;}

css寫好了,如何讓它顯示出效果呢?

有兩種,一種是external的一種是internal的,也就是一種是css放在單獨的檔案通過link來引入,另外一種是css的代碼直接嵌入在html中,

external: 必須放在head的節點下面才有用,這個也是可以理解的,畢竟要在body引入之前就要知道這些樣式,

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

internal:

    <style type="text/css">      body {          font-family: arial;          background-color: rgb(185,179,175);}      h1 {          color: rgb(255,255,255);}    </style>

selector可以有好多種:

a)全域的 *{}, 表示對當前頁面的所有的element都有效果。

b)element的name,比如h1, h2,h3 {}

c)class, element的class,這裡要有點號,.note{}    或者  p.note{}, 這兩個的區別是,前面的是對所有的class是note的節點都有用,後面的只對name是p的節點下的class是note的有用。

d)id,element的id,這裡是以#符號開始的,想起來和jquery很類似,#introduction{}

e)還有一種是位置相關的selector,

child: li>a{}

descendant:
p a{}

adjacent sibing: 
h1+p{}

general sibing:
h1~p{}

這麼多selector如果有衝突,一般是更具體的代替更一般的全域的規則,另外還有一種辦法,就是  !important

p b {color: blue !important;} 

property 同樣也有好多種,這個在下一篇裡介紹。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.