首頁 > web前端 > css教學 > 主體

CSS基礎知識(總結)

WBOY
發布: 2018-09-27 15:10:01
原創
1881 人瀏覽過

本章來跟大家介紹css一些基礎知識(總結),有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

css基本結構

CSS基礎知識(總結)

css的四個引入方式

1、行內式:是在標記的style屬性中設定css樣式。這種方式沒有顯示css的優勢,不建議使用

2、嵌入式:嵌入式是將css樣式樣式集中寫在網頁的標籤對的標籤對中

231 、連結式:將一個.css檔案引入html檔案(建議)

4、導入式:將一個獨立的.css文件引入html文件中,導入式使用css規則引入外部css文件,

    此種方法有缺點,瀏覽器會先載入html頁面,然後載入css樣式,所以網速較慢或網頁較大,客戶會出現先出現網頁,最後出現樣式

css選擇器

CSS基礎知識(總結)

1、類別選擇器 p>

(1)語法: .類別名稱{樣式屬性:值;}

(2)元素使用class="類別名稱"來使用這個樣式

2、id選擇器

(1)語法:#id名{樣式屬性:值;}

(2)元素使用id= "id名"來使用這個樣式

3、標籤選擇器 strong>

(1)語法:標籤名稱{樣式屬性:值;}

(2)頁面中所有的該標籤都是這個樣式

4.通用選擇器

(1)語法: *{樣式屬性:值;}

(2)頁中所有的元素都是這個樣式

選擇器的優先權

    css具有繼承的屬性,它是依賴祖先-後代的關係的。繼承是一種機制,它允許樣式不僅可以應用於某個特定的元素,還可以應用於它的後代。例如一個body定義了的顏色值也會應用在段落的文字中。一般內部優先外部,後面優先前面。

    所謂css優先權,即指css樣式在瀏覽器中被解析的先後順序。樣式表中的特殊性描述了不同規則的相對權重,它的基本規則是:

1.內嵌樣式表的權值最高              ------------1000;

2.統計選擇子中的id屬性個數。 #id ------------100

3 .統計選擇符中的class屬性個數。 .class ----------10

4.統計選擇符中的html標籤名個數。 p ----------------1

依這些規則將數字串逐位相加,就得到最終的權重,然後在比較取捨時按照從左到右的順序逐位比較。

css屬性操作

顏色:color

水平對齊方式:text-align

背景屬性

background-color: cornflowerblue
 
background-image: url('1.jpg');
 
background-repeat: no-repeat;(repeat:平铺满)
 
background-position: right top(20px 20px)
登入後複製

以上程式碼一般寫一行

background:#ffffff url('CSS基礎知識(總結)') no-repeat right top;
登入後複製
登入後複製
登入後複製


background:#ffffff url('CSS基礎知識(總結)') no-repeat right top;
登入後複製
登入後複製
登入後複製


background:#ffffff url('CSS基礎知識(總結)') no-repeat right top;
登入後複製
登入後複製
登入後複製

邊框屬性

border-style: solid;
border-color: chartreuse;
border-width: 20px;
登入後複製

以上代碼一般簡寫為

border: 30px rebeccapurple solid;
登入後複製

邊框也可以只設定單邊框

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
登入後複製

列表屬性

list-style-type         设置列表项标志的类型。
list-style-image    将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
登入後複製

list-style : 簡寫屬性,用於將所有用於列表的屬性設為一個聲明中。

ul
  {
  list-style:square inside url('/i/arrow.gif');
  }
登入後複製

其他屬性

/*
font-size: 10px;   字体的大小
line-height: 200px;   文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
vertical-align:-4px  设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效

font-family: 'lucida bright'  字体
font-weight: lighter/bold/border/ 字体粗细
font-style: oblique 字体样式(如斜体)
text-indent: 150px;      首行缩进150px
letter-spacing: 10px;  字母间距
word-spacing: 20px;  单词间距

text-transform: capitalize/uppercase/lowercase ; 文本转换,用于所有字句变成大写或小写字母,或每个单词的首字母大写
*/
登入後複製

text-decoration 屬性用來設定或刪除文字的裝飾。主要用來刪除連結的底線

text-decoration:none
登入後複製

結語

    最近在學習html的內容,大概有了一個簡單的了解。 css的基本語法和結構大概了解了,還需要在後面的學習中多多實踐和應用。以上是css基本內容的總結

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板