CSS 筆記

来源:https://www.cnblogs.com/linyuan66/archive/2019/07/18/11210675.html
-Advertisement-
Play Games

@[toc] 概念 全稱 : Cascading Style Sheet 級聯樣式表 (層疊) 作用 : 定義 如何顯示 HTML 元素 出現的原因 : 解決內容與表現分離的問題 好處 : 外部樣式表 可以極大提高工作效率 優勢 內容與表現分離 (類似於 蓋房子和裝修 ) 網頁的表現統一，容易修改 ...


目錄

@

概念

全稱 : Cascading Style Sheet 級聯樣式表 (層疊)

作用 : 定義如何顯示 HTML 元素

出現的原因 : 解決內容與表現分離的問題

<table bgcolor="#FFB36D" align="center"
           border="1px" bordercolor="#3F3F3F"
           cellspacing="0"
            width="350px" height="400px">
    <tr>
        <td colspan="5" bgcolor="blue">11</td>
        <td colspan="2" rowspan="2">16</td>

    </tr>
</table>
<!-- 想要達到的效果 --> 
<table >
    <tr>
        <td >11</td>
        <td >16</td>
    </tr>
</table>

好處 : 外部樣式表可以極大提高工作效率

優勢

  • 內容與表現分離 (類似於 蓋房子和裝修 )
  • 網頁的表現統一，容易修改
  • 豐富的樣式，使得頁面佈局更加靈活
  • 減少網頁的代碼量，增加網頁的瀏覽速度，節省網路帶寬
  • 運用獨立於頁面的CSS，有利於網頁被搜索引擎收錄

用法

語法格式

選擇器{
    聲明1:值;
    聲明2:值;
}
最後一個; 可以省略,但是按照規範最好寫上

引入方式

行內引入

<h3 style="color : green ; font-size: 30px">標題3</h3>

內部樣式表

<hred>
    <style type="text/css">
        h1{
            color : red;
        }
        h2{
            color: blue;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <h1>標題1</h1>
    <h2>標題2</h2>
</body>

外部樣式表

<link rel="stylesheet" href="style.css" type="text/css">

三種方式優先順序

就近原則

行內優先順序 > 內部樣式優先順序 > 外部樣式優先順序

外部樣式的好處

  • 可以真正做到內容和表現分離
  • 做到代碼的重覆使用
  • 外部樣式的優先順序 比較低 , 可以設計通用的樣式

案例

<h3>望廬山瀑布</h3>
<p>日照香爐生紫煙，</p>
<p>遙看瀑布掛前川。</p>
<p>飛流直下三千尺，</p>
<p>疑是銀河落九天。</p>

選擇器

基本選擇器

標簽

p{color:red}

類

<p class="green">日照香爐生紫煙，</p>
.green{color:green}

id

<p id="pid">日照香爐生紫煙，</p>
#pid{color:green}

通用選擇器 *

  • 對比三個選擇器

標簽選擇器直接應用於HTML標簽

類選擇器可在頁面中多次使用 ,一個標簽可以同時添加多個類

ID選擇器在同一個頁面中只能使用一次

  • 優先順序

Id選擇器 > 類選擇器 > 標簽選擇器

三種選擇器的順序 不遵循就近原則

CSS3 高級選擇器

案例的初始化

<body>
    <div> 11111
        <p class="son">4444</p>
    </div>
    <br>
    <div>2222
        <p class="son">5555</p>
    </div>
    <br>
    <div> 3333
        <p class="son">6666</p>
    </div>

    <p >6666</p>
    <p >6666</p>
</body>
<style>
    div{
        width: 100px;
        height: 100px;
    }
    p{
        width: 50px;
        height: 50px;
    }
</style>

層次選擇器

/* body p 後代元素選擇器  包括兒子 兒子的兒子 ... */
/* body>p 子代選擇器 只有直接子標簽 */
/* div+p 相鄰兄弟 緊挨著div的p 標簽 兩個標簽是同級關係*/
/* div~p 通用兄弟 緊挨著div 之後的所有p 標簽 兩個標簽是同級關係*/

結構偽類選擇器

案例初始化

<body>
    <p>111</p>
    <p>222</p>
    <p>333</p>
    <ul>
        <li>
            <p>444</p>
        </li>
        <li>
            <p>555</p>
        </li>
        <li>
            <p>666</p>
        </li>
    </ul>
</body>
/* ul li:first-child ul標簽中第一個子元素li 要求li必須出現在ul的第一個子元素位置*/
/* ul li:last-child ul標簽中最後一個子元素li*/
/* li p:nth-child(1) li 標簽中第一個出現的p標簽
      p:nth-child(1) 如果不設置父元素 在整個網頁中 p第一次作為子元素出現的位置*/

/*  p:first-of-type  選擇父元素內第一次出現的p標簽 ,並不要求p在父元素的第一個位置
    p:last-of-type
    p:nth-of-type(n)*/

屬性選擇器

用戶 <input type="text" name="username"> <br><br>
密碼 <input type="password" name="userpassword">  <br><br>
郵箱 <input type="email" name="email">    <br><br>
電話 <input type="text">  <br><br>
地址 <input type="text">  <br><br>
 input[name] 選中擁有name屬性的標簽
 input[name="email"] 選中 name屬性 為email 的標簽
 input[name^="user"] 選中 name屬性 以user為開頭的 的標簽
 E[attr$=val]        選中 屬性 以val結尾的 的標簽E
 E[attr*=val]        選中 屬性 包含val的 的標簽E

其他選擇器

<p>111</p>
<p class="red">222</p>
<p>333</p>
<h1 class="red">hhhh</h1>
<h1>hhhh</h1>
<h1>hhhh</h1>
  • 分組(取並集)
p,h1 (逗號連接)所有的p 和所有的 h1都可以使用該樣式
  • 取交集
p.red (中間沒有任何空隙)當標簽為p 並且class屬性為red的時候才滿足條件
  • 超鏈接偽類
a:link      預設狀態
a:hover     滑鼠指向
a:active    滑鼠按下(不鬆手)
a:visited   滑鼠抬起(訪問過後)
問題: a:visited  放到最後  滑鼠指向hover失效問題, 
    只需要把 a:visited 移到滑鼠指向hover之前

☆選擇器權重

選擇器              權重
!important      Infinity
行間樣式        1000
id              100
class/屬性/偽類     10
標簽/偽元素         1
通配符              0

CSS樣式

背景

常用屬性

background 簡寫屬性，作用是將背景屬性設置在一個聲明中。 
background-attachment (scroll , fixed)背景圖像是否固定或者隨著頁面的其餘部分滾動。 
background-color 設置元素的背景顏色。 
background-image (url(""))把圖像設置為背景。 
background-position (設置不重覆 值可以是單詞,像素,百分比 )設置背景圖像的起始位置。 
background-repeat (repeat,no-repeat,repeat-x,repeat-y)設置背景圖像是否及如何重覆。

CSS 3屬性

background-size
可能的值
length 第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為 auto(自動)
percentage 相對於背景定位區域的百分比。第一個值設置寬度，第二個值設置的高度
cover   此時會保持圖像的縱橫比並將圖像縮放成將完全覆蓋背景定位區域的最小大小。
contain 此時會保持圖像的縱橫比並將圖像縮放成將適合背景定位區域的最大大小。

簡寫屬性

 background : skyblue no-repeat url("2.jpg") center center ;

CSS3 漸變色

線性漸變

線性漸變 Linear Gradients  向下/向上/向左/向右/對角方向
background: linear-gradient(direction 方向, color-stop1, color-stop2, ...);
direction 方向 可以是自定義角度 45deg  90deg
漸變色 支持透明度
background: linear-gradient(90deg ,rgba(0,0,255,0),rgba(0,0,255,1));

徑向漸變

徑向漸變（Radial Gradients）- 由它們的中心定義
background: radial-gradient(red, green, blue); /* 標準的語法 */

// 設置 正圓形 circle  橢圓ellipse
background: radial-gradient(circle, red, yellow, green); /* 標準的語法 */

字體

  • font 簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中。
  • font-family 設置字體系列。
  • font-size 設置字體的尺寸。
  • font-style 設置字體風格。
  • font-weight 設置字體粗細 ()
font-style
normal
italic
font-weight
bold 定義粗體字元。 
bolder 定義更粗的字元。 
lighter  定義更細的字元
100 - 900
簡寫屬性
可以按順序設置如下屬性：
font-style 
font-weight 
font-size/line-height 
font-family 
font:italic bolder 40px  宋體;

文本

  • color 設置文本顏色
  • line-height 設置行高。
  • text-align 對齊元素中的文本。
  • text-decoration 向文本添加修飾。
  • text-indent 縮進元素中文本的首行。
span 只是作為一個容器存在  
text-indent  縮進
2em 當前文本的 大小單位
text-decoration 裝飾
none 預設。定義標準的文本。 
underline 定義文本下的一條線。 
overline 定義文本上的一條線。 
line-through

CSS3 特性

text-shadow 文本陰影
text-shadow:10px 10px 1px blue;
水平陰影，垂直陰影，模糊的距離，以及陰影的顏色：

列表

list-style 簡寫屬性。用於把所有用於列表的屬性設置於一個聲明中。
list-style-image 將圖象設置為列表項標誌。
list-style-position 設置列表中列表項標誌的位置。
list-style-type 設置列表項標誌的類型。 
list-style-position 演示 給li添加背景顏色
    
inside 列表項目標記放置在文本以內，且環繞文本根據標記對齊。 
outside 預設值。保持標記位於文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊。 
list-style: circle inside  url("a.png");

表格

  • border-collapse 設置是否把表格邊框合併為單一的邊框。
  • border-spacing 設置分隔單元格邊框的距離。
  • caption-side 設置表格標題的位置。
  • empty-cells 設置是否顯示表格中的空單元格。
  • table-layout 設置顯示單元、行和列的演算法。

盒子模型

div 標簽

沒有大小, 沒有顏色 一個盒子

邊框

  • border-color
border-color : red blue green pink;
/* 從上開始  順時針 上 右 下 左 
如果只有三/兩個顏色 red blue green 對邊相同
如果只有一個顏色 四個邊全相同

  • border-width

  • border-style

    style 選項
    none 沒有邊框
    hidden 隱藏邊框
    dotted 點狀線
    dashed 虛線
    double 雙線
    solid 實體線

    簡寫屬性

    border:blue 2px solid;  /* (順序可調整)

外邊距

margin 盒子與盒子(沒有包含關係)之間的邊距

如何快速創建 帶有類名或id名的div塊
margin-top / right / bottom / left

細節問題

外邊距合併

<div class="a"></div>
<div class="b"></div>

 .a,.b{
     width: 100px;
     height: 100px;
     border : 2px solid blue;

 }
 .a{
     margin-bottom: 100px;
 }
 .b{
     margin-top: 100px;
 }

取a-b 之間間距較大的值

網頁居中對齊

margin:0 auto;

內邊距

padding

內填充會擴充盒子的大小

盒子模型總尺寸=border+padding+margin+內容寬度

CSS3 新屬性

box-sizing

box-sizing
content-box 預設值, 填充會擴容盒子大小
border-box 不會擴容盒子大小

圓角邊框 border-radius

.a{
    width: 200px;
    height: 200px;
    border:2px double red;
    border-radius: 50% ;
    background: radial-gradient(circle, red, yellow, green);
}

製作特殊圖形

// 上半圓
.b{
    width: 400px;
    height: 200px;
    border:2px double red;
    border-radius: 200px 200px 0 0 ;
    background-color: blue;
}
// 左半圓
 .c{
    width: 200px;
    height: 400px;
    border:2px double red;
    background-color: green;
    border-radius:200px 0 0 200px;
}
1/4 圓
.d{
    width: 200px;
    height: 200px;
    border:2px double red;
    background-color: green;
    border-radius:200px 0 0;
}

box-shadow 盒子陰影

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平陰影的位置。允許負值。 
v-shadow 必需。垂直陰影的位置。允許負值。 
blur 可選。模糊距離。 
spread 可選。陰影的尺寸。 
color 可選。陰影的顏色。
inset 可選。將外部陰影 (outset) 改為內部陰影。 
 .dv{
    width: 100px;
    height: 100px;
    border-radius:50% ;
    border:1px solid green;
    background-color: skyblue;
    box-shadow:9px 3px 1px #888;
}

浮動

網站佈局

標準文檔流

指元素根據塊元素或行內元素的特性按從上到下，從左到右的方式自然排列。這也是元素預設的排列方式

分類

塊級元素 (block)

舉例 h系列 p 段落 div table 表格 ul ol 列表

行級元素 (inline )

a 超鏈接 span 字體標簽

行內塊元素 (inline-block)

區別
block - 標簽前後都有換行符(預設元素獨占一行)
inline - 標簽按照從左到右的順序
inline-block

區別一：

塊級：塊級元素會獨占一行，預設情況下寬度自動填滿其父元素寬度

行內：行內元素不會獨占一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。

區別二：

塊級：塊級元素可以設置寬高

行內：行內元素不可以設置寬高

區別三：

塊級：display:block;

行內：display:inline; inline-block

可以通過修改display屬性來切換塊級元素和行內元素。

區別四：

塊級：塊級元素可以設置margin，padding

行內：行內元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。

dispaly 切換元素的行塊屬性

block inline inline-block none

display: none

和 visibility: hidden 的區別

是否隱藏原元素的位置

製作QQ會員導航

float

作用 讓塊級元素橫向顯示

語法: float : left / right

特點

  • 脫離文檔流 , (文檔流 按照從上到下, 從左到右) 橫排顯示
  • 圖層會向上, 發生遮蓋現象
  • 原來的位置沒有了
  • 文字一定不會被遮蓋

應用場景

  • 網站佈局
  • 文本繞圖

inline-block和float的區別

display:inline-block

可以讓元素排在一行，並且支持寬度和高度，代碼實現起來方便

位置方向不可控制，會解析空格

IE 6、IE 7上不支持

float

可以讓元素排在一行並且支持寬度和高度，可以決定排列方向

float 浮動以後元素脫離文檔流，會對周圍元素產生影響，必須在它的父級上添加清除浮動的樣式

清除浮動元素影響

設置屬性 clear

/* 給收到影響的元素添加屬性 */
clear: both;

引用第三標簽法

在影響的元素之前添加額外標簽
<div class="clear"></div>

父元素邊框塌陷問題

<div class="father">
     <div class="son1"></div>
     <div class="son2"></div>
     <div class="son3"></div>
 </div>
 
.father{
    border: 2px solid red;
}
.son1,.son2,.son3{
    width: 200px;
    height: 200px;
    background-color: green;
    float: left;
    margin-left: 10px;
}

解決方式1

// 使用額外標簽法 
<div class="clear"></div>

解決方式2

給父元素設置高度

解決方式3

overflow:hidden

解決方式4

// 父級添加偽類after
.clear:after{
    content: '';          /*在clear類後面添加內容為空*/
    display: block;      /*把添加的內容轉化為塊元素*/
    clear: both;         /*清除這個元素兩邊的浮動*/
}

overflow

當子元素溢出父級容器的時候 , 父級元素定義如何顯示

hidden scroll auto

定位

語法 position

  • static 預設值 以標準文檔流的方式顯示
  • relative 相對定位
  • absolute 絕對定位
  • fixed 固定位置

相對定位

相對自身原來位置進行偏移

作用

1- 主要用於位置的微調

2- 和絕對定位搭配使用

值允許為負值

兩個特點

1- 移動的位置是相對於它原來的位置進行移動
2- 不會脫離文檔流而存在,會保留原來的位置, 不會對其他元素產生影響
3- 圖層會上升

絕對定位

作用 給圖標 或者 廣告進行 全局定位

特點

1- (如果已經存在已定位的父元素)移動的位置是相對於父元素
2- (如果已經不存在已定位的父元素)移動的位置是相對於瀏覽器視窗
3- 脫標, 脫離標準文檔流,不會保留原來的位置

子絕父相

子元素是絕對定位 , 需要把父元素設置為相對定位, 如此一來,子元素的定位位置就是基於父元素的

固定定位

fixed 
一般在網頁中被用在視窗左右兩邊的固定廣告、返回頂部圖標、吸頂導航欄等

z-index屬性

值越大 , 可見度越高

行高

行高 文本在自身的行高中是上下居中的

把單行文本的行高設置為容器的高度, 文本就會在容器中上下居中

如果是多行文本, 需要詳細計算 文本的總行高為多少, 和父容器相對位置, 設置padding值


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ElasticStack學習（九）：深入ElasticSearch搜索之詞項、全文本、結構化搜索及相關性算分
    一、基於詞項與全文的搜索 1、詞項 Term（詞項）是表達語意的最小單位，搜索和利用統計語言模型進行自然語言處理都需要處理Term。 Term的使用說明： 1）Term Level Query：Term Query、Range Query、Exists Query、Prefix Query、Wild ...
  • mysql(5.6及以下)解析json
    轉自：https://blog.csdn.net/weixin_33979203/article/details/87621768 改進，再找不到key，返回''值，之前的是在找不到的情況下，查找到第一的值。 ...
  • Eclipse使用jdbc連接MySql資料庫報：java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)
    在使用eclipse連接mysql資料庫時報異常： java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES) at com.mysql.jdbc.SQLError.createSQLE ...
  • Flutter學習筆記（8）--Dart面向對象
    Dart作為高級語言，支持面向對象的很多特性，並且支持基於mixin的繼承方式，基於mixin的繼承方式是指：一個類可以繼承自多個父類，相當於其他語言里的多繼承。所有的類都有同一個基類Object，這和特性類似於Java語言，Java所有的類也都是繼承自Object，也就是說一切皆對象。 ...
  • 史上最全面 Android逆向培訓之__Xposed使用
    剛招來個Android，幹了半個月辭職了，他走之後，成堆的bug被測了出來，都是這個新人代碼都沒看懂就開始改的一塌糊塗，還給提交了。實在是讓人頭疼，清理了一個月多月才把他半個月寫的bug清理個差不多。實在是得不償失。有了這個前車之鑒，不得不重視新人的崗前培訓，畢竟面試找個來了就能上手的實在是太難了。 ...
  • 記錄Android開發中遇到的坑
    1. 出現錯誤提示：Intel HAXM is required to run this AVD,VT-x is disabled in BIOS的解決辦法。 點擊SDK圖標，安裝Intel x86 Emulator Accelerator (HAXM installer)。 在sdk路徑下，找到e ...
  • iOS常用演算法之單鏈表查找倒數第n個節點(圖解)
    拿到題目, 首先要先瞭解鏈表數據結構, 如下圖: 常規思路: 利用數組, 遍歷整個單鏈表, 將每個節點裝入數組中, 最終拿到數組根據索引(數組長度-1-n)就得到了倒數第n個元素. 簡單思路: 假設總長度為n, 倒數第k個對應正數第n-k-1, 那麼第一個指針移動k-1次, 第二個指針保持在head ...
  • 記一次微信小程式的開發
    使用工具： 1.微信Web開發者工具 2.Visual Studio 2019 前端採用color UI，後端採用c# .net 過程中的幾個重點點記錄 1.color UI使用 下載colorUI以後 將icon.wxss、colorui.wxss拷貝至項目根目錄 在app.wxss中導入文件 @ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類