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

CSS

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

發布時間：2023/12/2 CSS 65 豆豆

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

語法:

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

注釋:/* */

選擇器:

1. id選擇器,class選擇器

2. 組和選擇

3. 屬性選擇

創建:

外部樣式表

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

內部樣式表

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

內聯樣式

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

多重樣式優先級

(內聯樣式）Inline style > （內部樣式）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(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。擴展內邊距
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。

邊框屬性:

邊框輪廓:

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)特性：

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

內聯元素(inline)特性：

和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的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

內聯元素主要有：

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

可變元素(根據上下文關系確定該元素是塊元素還是內聯元素)：

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

CSS中塊級、內聯元素的應用：

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

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

display:block -- 顯示為塊級元素
display:inline -- 顯示為內聯元素
display:inline-block -- 顯示為內聯塊元素，表現為同行顯示并可修改寬高內外邊距等屬性

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

定位:

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。