當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

css中设置br标签之后的样式_CSS学习

發(fā)布時間：2023/12/2 CSS 64 豆豆

生活随笔收集整理的這篇文章主要介紹了 css中设置br标签之后的样式_CSS学习小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

語法:

選擇器,聲明(由一個屬性和一個值)

注釋:/* */

選擇器:

1. id選擇器,class選擇器

2. 組和選擇

3. 屬性選擇

創(chuàng)建:

外部樣式表

html <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

內(nèi)部樣式表

html <head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

內(nèi)聯(lián)樣式

html <p style="color:sienna;margin-left:20px">這是一個段落。</p>

多重樣式優(yōu)先級

(內(nèi)聯(lián)樣式）Inline style > （內(nèi)部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認樣式

背景:

background-color
background-image
background-repeat
background-attachment
background-position

文本:

字體:

鏈接:

a:link - 正常，未訪問過的鏈接
a:visited - 用戶已訪問過的鏈接
a:hover - 當用戶鼠標放在鏈接上時
a:active - 鏈接被點擊的那一刻

列表:

盒子模型:

Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。擴展內(nèi)邊距
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

邊框?qū)傩?

邊框輪廓:

margin(外邊距):

padding（填充）:

分組和嵌套選擇器:?

/*分組*/ h1,h2,p {color:green; } /*嵌套*/ p {color:blue;text-align:center; } .marked {background-color:red; } .marked p {color:white; } p.marked{text-decoration:underline; }

尺寸:

塊級元素(block)特性：

總是獨占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;

內(nèi)聯(lián)元素(inline)特性：

和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是里面文字或圖片的大小;

塊級元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

內(nèi)聯(lián)元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可變元素(根據(jù)上下文關(guān)系確定該元素是塊元素還是內(nèi)聯(lián)元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中塊級、內(nèi)聯(lián)元素的應(yīng)用：

利用CSS我們可以擺脫上面表格里HTML標簽歸類的限制，自由地在不同標簽/元素上應(yīng)用我們需要的屬性。

主要用的CSS樣式有以下三個：

display:block -- 顯示為塊級元素
display:inline -- 顯示為內(nèi)聯(lián)元素
display:inline-block -- 顯示為內(nèi)聯(lián)塊元素，表現(xiàn)為同行顯示并可修改寬高內(nèi)外邊距等屬性

我們常將<ul>元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了。

定位:

relative：定位是相對于自身位置定位（設(shè)置偏移量的時候，會相對于自身所在的位置偏移）。設(shè)置了 relative 的元素仍然處在文檔流中，元素的寬高不變，設(shè)置偏移量也不會影響其他元素的位置。最外層容器設(shè)置為 relative 定位，在沒有設(shè)置寬度的情況下，寬度是整個瀏覽器的寬度。

absolute：定位是相對于離元素最近的設(shè)置了絕對或相對定位的父元素決定的，如果沒有父元素設(shè)置絕對或相對定位，則元素相對于根元素即 html 元素定位。設(shè)置了 absolute 的元素脫了了文檔流，元素在沒有設(shè)置寬度的情況下，寬度由元素里面的內(nèi)容決定。脫離后原來的位置相當于是空的，下面的元素會來占據(jù)位置。

總結(jié)

以上是生活随笔為你收集整理的css中设置br标签之后的样式_CSS学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。