身體{ hei"/> 身體{ hei">
搜尋

首頁 >web前端 >html教學 >HTML和CSS的一些知識點的總結

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

零下一度
零下一度原創
2017-06-25 09:39:551348瀏覽

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

  • 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
    上一篇：詳解如何垂直居中一個浮動元素下一篇：詳解如何垂直居中一個浮動元素

    相關文章

    看更多