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

CSS

02.CSS基础笔记及导入

發布時間：2023/12/4 CSS 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 02.CSS基础笔记及导入小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS是什么

CSS（Cascading?Style?Sheet，層疊樣式表)定義如何顯示HTML元素。

當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。

CSS樣式

CSS引入HTML

內部樣式與外部樣式

<!DOCTYPE> <html> <head><meta charset="utf-8" /><title>內部樣式表和外部樣式表</title><style type="text/css">p{color: blue;}</style><link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body><p>我是p段落</p><div>我是div</div><ol><li>1111</li><li>2222</li></ol> </html>

行內樣式

<p style="color: red">Hello world.</p>

基本選擇器

元素選擇器

p {color: "red";}

ID選擇器

#i1 {background-color: red; }

類選擇器

.c1 {font-size: 14px; } p.c1 {color: red; }

注意：

樣式類名不要用數字開頭（有的瀏覽器不認）。

標簽中的class屬性如果有多個，要用空格分隔。

通用選擇器

* {color: white; }

組合選擇器

后代選擇器

/*li內部的a標簽設置字體顏色---指所有a*/ li a {color: green; }

兒子選擇器

/*選擇所有父級是 <div> 元素的 <p> 元素*/ div>p {font-family: "Arial Black", arial-black, cursive; }

毗鄰選擇器

/*選擇所有緊接著<div>元素之后的<p>元素*/ div+p {margin: 5px; }

弟弟選擇器

/*i1后面所有的兄弟p標簽*/ #i1~p {border: 2px solid royalblue; }

屬性選擇器

/*用于選取帶有指定屬性的元素。*/ p[title] {color: red; } /*用于選取帶有指定屬性和值的元素。*/ p[title="213"] {color: green; }/*找到所有title屬性以hello開頭的元素*/ [title^="hello"] {color: red; }/*找到所有title屬性以hello結尾的元素*/ [title$="hello"] {color: yellow; }/*找到所有title屬性中包含（字符串包含）hello的元素*/ [title*="hello"] {color: red; }/*找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素：*/ [title~="hello"] {color: green; }

分組和嵌套

分組

當多個元素的樣式相同的時候，我們沒有必要重復地為每個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。?

例如：

div, p {color: red; }

上面的代碼為div標簽和p標簽統一設置字體為紅色。

通常，我們會分兩行來寫，更清晰:

div, p {color: red; }

嵌套

多種選擇器可以混合起來使用，比如：.c1類內部所有p標簽設置字體顏色為紅色。

.c1 p {color: red; }

?

字體屬性

文字字體

font-family可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。

簡單實例：

body {font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif }

字體大小

p {font-size: 14px; }

文本顏色

顏色屬性被用來設置文字的顏色。

顏色是通過CSS最經常的指定：

十六進制值 - 如:?＃FF0000
一個RGB值 - 如:?RGB(255,0,0)
顏色的名稱 - 如: ?red

還有rgba(255,0,0,0.3)，第四個值為alpha, 指定了色彩的透明度/不透明度，它的范圍為0.0到1.0之間。

背景屬性

/*背景顏色*/ background-color: red; /*背景圖片*/ background-image: url('1.jpg'); /*背景重復repeat(默認):背景圖片平鋪排滿整個網頁repeat-x：背景圖片只在水平方向上平鋪repeat-y：背景圖片只在垂直方向上平鋪no-repeat：背景圖片不平鋪 */ background-repeat: no-repeat; /*背景位置*/ background-position: right top; /*background-position: 200px 200px;*/

支持簡寫：

background:#ffffff url('1.png') no-repeat right top;

使用背景圖片的一個常見案例就是很多網站會把很多小圖標放在一張圖片上，然后根據位置去顯示圖片。減少頻繁的圖片請求。

?

display屬性

用于控制HTML元素的顯示效果。

值	意義
display:"none"	HTML文檔中元素存在，但是在瀏覽器中不顯示。一般用于配合JavaScript代碼使用。
display:"block"	默認占滿整個頁面寬度，如果設置了指定寬度，則會用margin填充剩下的部分。
display:"inline"	按行內元素顯示，此時再設置元素的width、height、margin-top、margin-bottom和float屬性都不會有什么影響。
display:"inline-block"	使元素同時具有行內元素和塊級元素的特點。

display:"none"與visibility:hidden的區別：

visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。

display:none: 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。

選擇器補充

偽類選擇器

/* 未訪問的鏈接 */ a:link {color: #FF0000 }/* 已訪問的鏈接 */ a:visited {color: #00FF00 } /* 鼠標移動到鏈接上 */ a:hover {color: #FF00FF } /* 選定的鏈接 */ a:active {color: #0000FF }/*input輸入框獲取焦點時樣式*/ input:focus {outline: none;background-color: #eee; }

偽元素選擇器

first-letter

常用的給首字母設置特殊樣式：

p:first-letter {font-size: 48px;color: red; }

before

/*在每個<p>元素之前插入內容*/ p:before {content:"*";color:red; }

after

/*在每個<p>元素之后插入內容*/ p:after {content:"[?]";color:blue; }

before和after多用于清除浮動。

摘抄自：https://www.cnblogs.com/liwenzhou/p/7999532.html

總結

以上是生活随笔為你收集整理的02.CSS基础笔记及导入的全部內容，希望文章能夠幫你解決所遇到的問題。

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