社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
一個完整的頁面由三個部分構成：
行内元素和块级元素
最基本的开发，首先必须创建的项目结构
关于继承
当文本超度固定宽度的处理方法：
区分伪类和伪元素
首頁 web前端 html教學 HTML和CSS的一些知識點的總結

HTML和CSS的一些知識點的總結

零下一度
零下一度
Jun 25, 2017 am 09:39 AM
css html 知識點

一個完整的頁面由三個部分構成：

  • html：超文本標記語言

    • 透過語意化標籤，建置頁面"結構"

  • css:層疊樣式表

    • #負責頁面"樣式"，美化頁面的

  • js:輕量級的腳本語言；互動指的是兩個地方（行為）

    • ##前端自己在頁面上寫的"動效"

    • 前後台的"資料互動"

      結構，樣式，和行為三者結合

css的引入方式

  1. #嵌入式；(內嵌式)

    <style>
    body{
        height:100%;
        background-color: red;
    }
</style>
    登入後複製
  2. 行內樣式

    <body style="height:100%; background: #333333">
    登入後複製
  3. 外鍊式（真正的開發，用的都是外鏈）

    <link rel="stylesheet" href="style.css?1.1.11"/>
    登入後複製
css的優先權

  • 行內>內嵌>外鏈

css常見屬性和樣式

  • 當設定錯誤的時候，在chrome的控制台，會有黃色的嘆號，進行提示

  • color：顏色值；顏色有三種表示方法


    快捷鍵：c+tab

    • #用英文：red

    • rgb(255,0,0)

    • #fff

  • font-size:字體大小

    • 快捷鍵：fsz30->font -size:30px


      font:400 14px/28px "宋體";

    ##background:新增背景

  • 圖片默認是橫向重複與縱向重複

    • 位置：

      • 橫向位置：left center right

      • 縱向位置：top center bottom

    綜合寫法：
  • background: url("images/bg2.png") no-repeat left center red;

      • background-image:url("圖片位址")

      • background-repeat:no-repeat ; /repeat-x;/repeat-y

      • background-position:0 0

      • background-color:red

    #字體是否傾斜

      • font-style:italic 傾斜/ normal 正常

    下劃線與刪除線

    • text-decoration: line-through; 刪除線

    • text-decoration: none; 移除底線

    • text-decoration: underline;新增底線

    • #css中的選擇器：

    1.標籤選擇器：div p ul li dt dd em i u del strong b input label from table

      • 缺點：只能進行共性的操作，無法個性操作

    2.class選擇器

    • 3.id：

    • .class名稱

      ,同一個頁面能有無數個相同的class名稱

    • #id名

      ，同一個頁面只能有一個ID名稱； （ID名稱是不能重複的）

      • 在真正的開發過程中，class是用來設定樣式的，id是用來取得元素
    • <div class="div1 div2 div3" id="div1"></div>
      登入後複製

    4.後代選擇器：div p(把div容器下，子子孫孫的p元素都選擇上了)

    • 5.子選擇器： div > p(選擇div容器下的兒子)；相容於IE7+

    • 6.交集選擇器: div.div1

    • 7.並集選擇器：div,p

    • 8.通配符*：代表所有的元素

    • 9.序選擇器：相容IE8+

      • div > p:first-child

      • #div > p:last-child

    10.下一個兄弟選擇器ul li+li{} 相容IE7+

    • #開發常用的瀏覽器

    chrome

    • IE7~11

    • #firefox

    • CSS的繼承性與層疊性

    以font開頭的屬性都能夠繼承；line-height

    • #color可以繼承

    • text開頭的也可以繼承，例如text-align

    • css權重

    !important權重無窮大；（少用為好）

    • id的權重大於class的權重

    • css盒子模型

    css盒子模型由5部分：

      • 內容的寬高+padding+border+margin

    單行文字的居中：height = line- height

    • 多行文字的居中，padding和line-height

    • padding：

    • padding是内边距

    • padding的颜色和内容的颜色一致；background-color填充的是border以内的颜色

    • padding是复合值
      padding:30px; ->pl30; pt30;pr30;pb30
      padding:20px 30px; ->上下为20px 左右30px
      padding:10px 20px 30px; -> 上10px 左右20px 下30px
      padding:10px 20px 30px 10px; 上 右 下 左

      如果现设置padding:30px
      再设置padding-left:10px
      请问最后的值各是多少？
      左10px; 其他都是30px

  • margin：外边框

  • border:

    • border:1px solid #000;

    • border-width

    • border-style：solid（实体）,dashed（虚线）,dotted（点）

    • border-color

行内元素和块级元素

  • p标签虽然是文本标签，但是它可以当容器来使用，p标签内一定不能放div; p段落也是块元素，他独占一行

  • 文本元素：p span a i em u b strong img

  • 容器级：div li dt dd h级（不建议）

  • 除了p，所有的文本元素，都是行内元素

  • 所有容器级别的元素，都是块元素

  • 块和行内元素的相互转化

    • display：inline; //行内

    • display:inline-block;//行内块

    • display：block; //块

  • 关于定位：大部分情况，建议的是:父相子绝（父亲：相对定位，儿子：绝对定位）

  • 关于脱离文档流的方法

  • 浮动 float:left; float:right;

  • 绝对定位 position:absolute;

  • 固定定位 position:fixed;

  • 重点：1）父相子绝 2）行内元素一点脱离文档流，就可以设置宽高了；

  • 注意：行内元素，一旦脱离文档流，虽然能设置宽高，但是，如果不设置宽的话，会默认跟内容一样宽；而块级元素，如果不设置宽度的话，默认跟父级一样块，没有父级的话，默认跟屏幕一样宽

  • 清除浮动

    • 固定高度height:xxxpx;
      缺点：如果作为产品列表的容器展示，我们无法知道容器的具体高度

    • overflow:hidden

    • clear:both
      缺点：可以解决浮动引起的文档流错乱问题，但是上面浮动元素的父容器该没有高度还没有高度

    • 伪类清除浮动

      ul::after{
display: block;
height:0;
content: '';
clear: both;
}
      登入後複製

  1. 溢出隐藏

  2. 清除浮动
    缺点：如果父容器比较小，子容器比较大；父容器如果通过overflow:hidden来清除浮动的话，子容器就看不到了

  • 透明度处理

    • rgba() 背景透明，文字不透明；

    • opacity:0 背景透明，文字也透明；

      opacity:0.1;/*不兼容IE7浏览器*/
filter:alpha(opacity=10);
      登入後複製

    最基本的开发，首先必须创建的项目结构

    • images文件夹：放切好的图片

    • css文件夹：放置css文件：index.css

    • index.html文件

    关于继承

    • 宽度继承：如果没有父级，块元素的宽度默认跟可视区一样宽；如果有父级的情况下，默认跟父级宽度一样宽(宽度可以继承，但高度无法继承;)

    • font可以继承

    • color可以继承：当遇到a标签的时候， color无效；

    • line-height可以继承

    当文本超度固定宽度的处理方法：

    • 单行文本出超固定宽度出现省略号的写法：

      white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
      登入後複製

    • 英文不折行的问题处理： word-wrap:break-word;

    • 出现滚动条的写法overflow-y:scroll;

    区分伪类和伪元素

    • 伪元素：用:和::都可以，现在建议用::

    • 伪类：给当前选择器添加动效，只能用:

    以上是HTML和CSS的一些知識點的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

    本網站聲明
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序，用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    Video Face Swap

    Video Face Swap

    使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

    顯示更多

    熱門文章

    <🎜>：種植花園 - 完整的突變指南
    4 週前 By DDD
    <🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
    1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
    北端：融合系統，解釋
    1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
    Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤
    4 週前 By 尊渡假赌尊渡假赌尊渡假赌
    克萊爾·默默德（Clair Obscur）：Expedition 33 UE-Sandfall遊戲崩潰？ 3種方法！
    2 週前 By DDD
    顯示更多

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版，非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    顯示更多

    熱門話題

    Java教學
    1677
    14
    CakePHP 教程
    1431
    52
    Laravel 教程
    1334
    25
    PHP教程
    1280
    29
    C# 教程
    1257
    24
    顯示更多
    Related knowledge
    vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

    在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

    了解HTML，CSS和JavaScript：初學者指南 了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

    WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

    HTML，CSS和JavaScript的角色：核心職責 HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

    HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

    React在HTML中的作用：增強用戶體驗 React在HTML中的作用：增強用戶體驗 Apr 09, 2025 am 12:11 AM

    React通過JSX與HTML結合，提升用戶體驗。 1)JSX嵌入HTML，使開發更直觀。 2)虛擬DOM機制優化性能，減少DOM操作。 3)組件化管理UI，提高可維護性。 4)狀態管理和事件處理增強交互性。

    HTML：結構，CSS：樣式，JavaScript：行為 HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

    HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

    HTML的未來：網絡設計的發展和趨勢 HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

    HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

    HTML：建立網頁的結構 HTML：建立網頁的結構 Apr 14, 2025 am 12:14 AM

    HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

    解決 Craft CMS 中的緩存問題：使用 wiejeben/craft-laravel-mix 插件 解決 Craft CMS 中的緩存問題：使用 wiejeben/craft-laravel-mix 插件 Apr 18, 2025 am 09:24 AM

    在使用CraftCMS開發網站時，常常會遇到資源文件緩存的問題，特別是當你頻繁更新CSS和JavaScript文件時，舊版本的文件可能仍然被瀏覽器緩存，導致用戶無法及時看到最新的更改。這個問題不僅影響用戶體驗，還會增加開發和調試的難度。最近，我在項目中遇到了類似的困擾，經過一番探索，我找到了wiejeben/craft-laravel-mix這個插件，它完美地解決了我的緩存問題。

    See all articles