柚子快報激活碼778899分享：37個問題快速復(fù)習(xí)CSS3

http://yzkb.51969.com/

什么是CSS?

CSS (Cascading Style Sheets) 是用于描述HTML或XML文檔樣式的語言。它控制網(wǎng)頁的布局、顏色、字體等視覺效果。

CSS文字顏色，背景色

p {

color: blue; /* 設(shè)置文字顏色為藍色 */

background-color: yellow; /* 設(shè)置背景色為黃色 */

}

常見的顏色值單詞(至少5個)

red (紅色)blue (藍色)green (綠色)yellow (黃色)black (黑色)white (白色)

CSS控制元素寬高

div {

width: 200px; /* 設(shè)置寬度為200像素 */

height: 100px; /* 設(shè)置高度為100像素 */

}

文本對齊方式

p {

text-align: center; /* 居中對齊 */

/* 其他選項: left (左對齊), right (右對齊), justify (兩端對齊) */

}

id、class選擇器

#unique-element { /* id選擇器,以#開頭 */

color: red;

}

.common-class { /* class選擇器,以.開頭 */

font-size: 16px;

}

引入CSS的三種方式及區(qū)別

a. 內(nèi)聯(lián)樣式:

This is red text.

b. 內(nèi)部樣式表:

c. 外部樣式表:

區(qū)別:

內(nèi)聯(lián)樣式: 直接應(yīng)用于單個元素,優(yōu)先級最高,但難以維護內(nèi)部樣式表: 適用于單個HTML文件,方便管理小型項目外部樣式表: 最靈活,可在多個頁面中重用,便于維護large項目

標(biāo)簽、通配符、后代、子代選擇器用法

p { color: blue; } /* 標(biāo)簽選擇器 */

* { margin: 0; } /* 通配符選擇器,選擇所有元素 */

div p { font-size: 14px; } /* 后代選擇器,選擇div內(nèi)的所有p元素 */

div > p { font-weight: bold; } /* 子代選擇器,選擇div的直接子元素p */

屬性、后面兄弟、相鄰兄弟、分組選擇器

[type="text"] { border: 1px solid gray; } /* 屬性選擇器 */

h1 ~ p { margin-top: 20px; } /* 后面兄弟選擇器,選擇h1后的所有同級p元素 */

h1 + p { font-style: italic; } /* 相鄰兄弟選擇器,選擇緊跟h1的p元素 */

h1, h2, h3 { font-family: Arial, sans-serif; } /* 分組選擇器 */

背景圖片、尺寸、位置、重復(fù)、固定

div {

background-image: url('image.jpg'); /* 設(shè)置背景圖片 */

background-size: cover; /* 調(diào)整尺寸以覆蓋整個容器 */

background-position: center; /* 居中放置 */

background-repeat: no-repeat; /* 不重復(fù) */

background-attachment: fixed; /* 固定背景 */

}

首行縮進,行高,單詞、字母間隔

p {

text-indent: 2em; /* 首行縮進2個字符 */

line-height: 1.5; /* 行高為字體大小的1.5倍 */

word-spacing: 5px; /* 單詞間隔 */

letter-spacing: 1px; /* 字母間隔 */

}

大小寫轉(zhuǎn)換、文本下中下劃線,空白處理-不許換行

.text {

text-transform: uppercase; /* 轉(zhuǎn)換為大寫 */

text-decoration: underline; /* 下劃線 */

white-space: nowrap; /* 不換行 */

}

文本陰影

h1 {

text-shadow: 2px 2px 4px #000000; /* 水平偏移 垂直偏移 模糊半徑 顏色 */

}

設(shè)置字體,字體大小,字體傾斜,字體粗細

body {

font-family: Arial, sans-serif;

font-size: 16px;

font-style: italic; /* 傾斜 */

font-weight: bold; /* 粗體 */

}

最大寬高,最小寬高

div {

max-width: 800px;

min-width: 300px;

max-height: 600px;

min-height: 200px;

}

a鏈接樣式控制

a {

color: blue;

text-decoration: none; /* 移除下劃線 */

}

a:hover {

color: red; /* 鼠標(biāo)懸停時變紅 */

}

a:visited {

color: purple; /* 訪問過的鏈接 */

}

CSS注釋如何寫

/* 這是單行注釋 */

/*

這是

多行

注釋

*/

自定義ul列表前的圖標(biāo)

ul {

list-style-type: none; /* 移除默認樣式 */

}

ul li::before {

content: "?"; /* 使用Unicode字符作為圖標(biāo) */

margin-right: 5px;

}

合并表格的邊框

table {

border-collapse: collapse;

}

td, th {

border: 1px solid black;

}

元素之間轉(zhuǎn)換,注意事項

可以使用display屬性改變元素的顯示類型:

.inline-to-block {

display: block;

}

.block-to-inline {

display: inline;

}

注意事項:

改變display可能會影響布局inline元素變?yōu)閎lock后可以設(shè)置寬高block元素變?yōu)閕nline后會失去寬高設(shè)置

重置CSS樣式

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

什么是精靈圖,怎么用

精靈圖(CSS Sprites)是將多個小圖標(biāo)合并成一張大圖,通過background-position來顯示所需部分:

.icon {

width: 20px;

height: 20px;

background-image: url('sprites.png');

background-repeat: no-repeat;

}

.icon-home {

background-position: 0 0;

}

.icon-email {

background-position: -20px 0;

}

什么是盒子模型,組成是怎樣的

盒子模型描述了HTML元素如何在頁面上顯示。它由以下部分組成:

Content: 內(nèi)容區(qū)域Padding: 內(nèi)邊距Border: 邊框Margin: 外邊距

盒子模型分類

標(biāo)準(zhǔn)盒模型: width和height只包括contentIE盒模型(怪異盒模型): width和height包括content, padding和border

可以通過box-sizing屬性控制:

.box {

box-sizing: content-box; /* 標(biāo)準(zhǔn)盒模型 */

/* box-sizing: border-box; */ /* IE盒模型 */

}

margin重疊現(xiàn)象、塊元素居中

margin重疊: 當(dāng)兩個垂直外邊距相遇時,它們會合并成一個外邊距,值為較大的那個。

塊元素居中:

.center-block {

width: 300px;

margin: 0 auto;

}

隱藏元素的3種方式,區(qū)別

.hidden1 { display: none; } /* 完全隱藏,不占空間 */

.hidden2 { visibility: hidden; } /* 隱藏,但仍占空間 */

.hidden3 { opacity: 0; } /* 透明,但仍占空間且可交互 */

什么是偽元素

偽元素用于創(chuàng)建不存在于DOM中的元素,如::before和::after:

p::first-letter {

font-size: 2em;

}

如何使元素浮動,浮動有什么作用

.float-left {

float: left;

}

浮動可以使元素脫離正常文檔流,實現(xiàn)文字環(huán)繞或創(chuàng)建多列布局。

浮動的起始位置,對自身的影響

浮動元素的起始位置是其在正常文檔流中的位置。浮動會使元素:

脫離正常文檔流向左或向右移動,直到碰到容器邊緣或另一個浮動元素變?yōu)閴K級元素(可設(shè)置寬高)

什么是浮動塌陷,如何解決

浮動塌陷是指當(dāng)容器內(nèi)所有子元素都浮動時,容器高度塌陷為0。解決方法:

.clearfix::after {

content: "";

display: table;

clear: both;

}

什么是定位,有什么用

定位用于控制元素在頁面上的精確位置。它可以創(chuàng)建復(fù)雜的布局,如固定導(dǎo)航欄、懸浮元素等。

定位方式有哪些,各有什么特點

.static { position: static; } /* 默認定位,按正常文檔流排列 */

.relative {

position: relative; /* 相對定位,相對于自身原本位置 */

top: 10px;

left: 20px;

}

.absolute {

position: absolute; /* 絕對定位,相對于最近的非static祖先元素 */

top: 0;

right: 0;

}

.fixed {

position: fixed; /* 固定定位,相對于瀏覽器窗口 */

bottom: 20px;

right: 20px;

}

.sticky {

position: sticky; /* 粘性定位,在指定閾值前為相對定位,之后為固定定位 */

top: 10px;

}

圓角控制,圓,橢圓實現(xiàn)

.rounded {

border-radius: 10px; /* 普通圓角 */

}

.circle {

width: 100px;

height: 100px;

border-radius: 50%; /* 圓形 */

}

.ellipse {

width: 200px;

height: 100px;

border-radius: 50%; /* 橢圓 */

}

hover制作下拉菜單思路

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.dropdown:hover .dropdown-content {

display: block;

}

鼠標(biāo)變成手型

.clickable {

cursor: pointer;

}

顏色表示的4種辦法

.color-examples {

color: red; /* 顏色名稱 */

background-color: #00ff00; /* 十六進制 */

border-color: rgb(0, 0, 255); /* RGB */

outline-color: rgba(255, 0, 0, 0.5); /* RGBA (帶透明度) */

}

CSS優(yōu)先級如何判斷

CSS優(yōu)先級從高到低:

!important內(nèi)聯(lián)樣式ID選擇器類選擇器、屬性選擇器、偽類元素選擇器、偽元素通配符選擇器

如果優(yōu)先級相同,后面的規(guī)則會覆蓋前面的規(guī)則。

示例:

#header { color: blue; } /* 優(yōu)先級高 */

.header { color: red; } /* 優(yōu)先級低 */

這里#header的優(yōu)先級更高,因此文本會是藍色。

柚子快報激活碼778899分享：37個問題快速復(fù)習(xí)CSS3

http://yzkb.51969.com/

相關(guān)閱讀