css簡單樣式

2021-08-21 06:03:50 字數 1975 閱讀 7478

<p

style=

"color:yellow;">

一段文字

p>

選擇器:

內部樣式 外聯樣式

建立.css檔案
層疊優先順序 :內聯》內部》外部

<style>

/*元素選擇器*/

p

/*類選擇器*/

.first/*id

選擇器*/

#sec

style>

id

選擇器命名是唯一的

奇偶選擇器
odd  even
.first:nth-child(odd)

style>

.text
尺寸相關屬性

.text.text{
盒子模型
外邊距
內邊距
邊框
父子元素之間留白,用父元素的padding,兄弟之間留白用margin
塊級元素的居中:margin:oauto。
display
顯示模式布局,display
**中空格和回車會被當做字元顯示在頁面上
基線對齊
對齊方式是在父元素中設定
float
clear

:both消除浮動對兄弟元素的影響

overflow

:hidden 本意是超出部分隱藏 在這裡我們用作用清楚對浮動元素產生的影響

定位:

相對定位relative

相對於原來的位置進行定位

絕對定位:absolute

相對於最近乙個擁有定位屬性(除static以外)父類元素定位,父相子絕,脫離原有的文件流(原來的位置不見了)

固定定位:fixed

相對於瀏覽器視窗定位,脫離原有的文件流(原來的位置不見了)

不可繼承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

所有元素可繼承:visibility和cursor。

內聯元素可繼承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

終端塊狀元素可繼承:text-indent和text-align。

列表元素可繼承:list-style、list-style-type、list-style-position、list-style-image。

css的簡單樣式

text align center 文字居中 line height 行高 background url 路徑 no repeat 不重複 0px 20 設定樣式 text indent 文字縮排 1em 表示乙個字。a 表示有無下劃線 hover 表示滑鼠懸停的時候 font family 黑體 ...

CSS樣式的簡單使用

css樣式的簡單使用 在做專案時,有時做用到一行分幾列顯示內容,用datalist繫結,可以實現。但有時因我們不是設計師,有的 不利於我們在itemtemplate中繫結內容.用ul li 再加上css控制,就可以實現一行多列的情景,但這時不能在datalist的 itemtemplate中繫結 l...

CSS簡單樣式練習(五)

執行效果 源 1 doctype html 2 html lang zh 3 head 4 meta charset utf 8 5 title 春天 title 6 style type text css 78 1314body 1819 title 2425 container 2930 tex...