入門級了解CSS知識體系-css教學-PHP中文網

CSS 系統" >CSS 系統

首頁

web前端

css教學

入門級了解CSS知識體系

奋力向前

Jul 09, 2021 pm 01:50 PM

css

給分享CSS體系圖，很有用，大家收藏吧，下面這篇文章帶來大家了解CSS入門知識。

入門級了解CSS知識體系

CSS 系統

css 大致了解如下就可以：

入門級了解CSS知識體系

CSS3

#Cascading Style Sheet層疊級聯樣式表

#字體，顏色，邊距，高度，寬度，背景圖片，網頁定位,網頁浮動…

css選擇器(重點)

美化網頁(文字，陰影，超鏈接，列表，漸變)

盒子模型

浮動，定位

網頁動畫

css的優勢；

##1、內容和表現分離

2、網頁結構表現統一,可以實現重複使用

3、樣式十分的豐富

4、建議使用獨立於html的css檔案

#5 、利用SEO容易被搜尋引擎收錄!

一、選擇器

1.選擇頁面上的某一個或某一種元素

#標籤選擇器
類別選擇器
id選擇器
層次選擇器
後代選擇器：在某個元素的後面

body p{
      background: #c56b22;
  }

登入後複製

2.子選擇器##

/*子选择器，只选择向下一代*/
body>p{
      background: deepskyblue;
  }

登入後複製

3.相鄰兄弟選擇器

/*相邻兄弟选择器，只有一个，向下*/
  .active + p{
      background: orange;
  }

登入後複製

4.通用選擇器

/*通用兄弟选择器，当前选中元素的向下的所有元素*/
  .active~p{
      background: aquamarine;
  }

登入後複製

二、偽類選擇器

/*ul的第一个子元素*/
ul li:first-child{
    background: #c56b22;
}
/*ul的最后一个子元素*/
ul li:last-child{
    background: aqua;
}

/*选中p1,定位到父元素，选择当前的第一个元素
选择当前p元素的符集元素，选择符父级素的第一个，并且是当前元素才生效
*/
p:nth-child(1){
    background: antiquewhite;
}
/*选中父元素，下的p元素的第二个，按类型*/
p:nth-of-type(2) {
    background: #b04a6f;
        }

登入後複製

#三、美化網頁

1、字型樣式

<!--
font-family:字体
font-size:字体大小  px代表像素，em代表一个字的缩进大小
font-weight:字体粗细 最大800，相当于bolder
color:字体颜色
-->
<style>
    body{
        font-family: Arial;
    }
    h1{
        font-size: 40px;
    }
    p[class=p1]{
        font-weight: bold;
        color: #b04a6f;
    }
</style>


<style>
    /*字体风格*/
    /*斜体 加粗 大小 字体*/
    p{
        font:oblique bold 20px Arial;
    }
</style>

登入後複製

2、文字樣式##顏色

color rgb rgba

文字對齊方式 text-align=center
#首行縮排text-indent:2em
行高line-height:
裝飾text-decoration:
文字圖片水平對齊：/middle
/vertical-align: middle;

3、陰影

<style>
    #price{
        /*阴影颜色，水平偏移，垂直偏移，垂直半径*/
        text-shadow: #c5527d 5px -5px 1px;
    }
</style>

<body>
<p id="price">
    ¥30
</p>
</body>

登入後複製

4、超連結偽類別

<style>
    /*默认的颜色*/
    a{
        text-decoration: none;
        color: #000000;
    }
    /*鼠标悬浮的颜色*/
    a:hover{
        color: #c56b22;
        font-size: 20px;
    }
    /*鼠标按住的颜色*/
    a:active{
        color: #c5527d;
    }
    /*鼠标未点击链接的颜色*/
    /*a:link{*/
    /*    color: gray;*/
    /*}*/
    /*!*链接已访问状态*!*/
    /*a:visited{*/
    /*    color: #66ccff;*/
    /*}*/
</style>

<body>
<a href="#">
    <img src="/static/imghw/default1.png"  data-src="images/1.jpg"  class="lazy"   alt="图片加载失败">
</a>
<p>
    <a href="#">《从0到1开启商业与未来的秘密》</a>
</p>
<p>
    作者：[美]<a href="#"> 彼得·蒂尔，布莱克·马斯特斯（Blake Masters）</a>著，
    <a href="#">高玉芳</a> 译
</p>
</body>

登入後複製

#5、列表

1）背景

背景顏色

背景圖片

<style>
    div{
        width: 800px;
        height: 500px;
        border: 1px solid #fcb4dc;
        /*默认全部平铺*/
        background-image: url("image/1.jpg");
    }
    .div1{
        background-repeat: repeat-x;
    }
    .div2{
        background-repeat: repeat-y;
    }
    .div3{
        background-repeat: no-repeat;
    }
</style>

登入後複製

.title{
    font-size: 18px;
    /*font: oblique bold 20px/30px Arial;*/
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*background: #fcb4dc;*/
    /*颜色、图片、位置、平铺方式*/
    background: #fcb4dc url("../image/d.jpeg") 250px 4px no-repeat;
}

ul li{
    /*行高*/
    height: 30px;
    list-style: none;
    text-indent: 1em;
    /*background: url("../image/r.jpeg") 200px 1px no-repeat;*/
    background-image: url("../image/r.jpeg");
    background-repeat: no-repeat;
    background-position: 200px 1px;
}

登入後複製

2）漸進

background-color: #A9C9FF;
background-image: linear-gradient(60deg, #A9C9FF 0%, #FFBBEC 100%);

登入後複製

3）盒子模型

#邊框

內外邊距
#圓角邊框
陰影

/*
clear:right;    右侧不允许又浮动元素
clear:lerf;     左侧不允许有浮动元素
clear:both;     两侧不允许有浮动元素
clear:none;
*/

登入後複製

解決方法：

增加父級元素的高度

#father{
 border:1px #000 solid;
 height:800px}

登入後複製

增加一個空的p標籤，清除浮動

<p class="clear"></p>

登入後複製

.clear{
    clear:both;
    margin:0;
    padding:0;}

登入後複製

overflow

#在父级元素中添加一个 overflow:hodden;

登入後複製

父類別加入一個偽類別

#father:after{
 content:&#39;&#39;;
 display:block;
 clear:both;}

登入後複製

#浮動起來的話會脫離標準文件流，所以要解決父級邊框塌陷的問題

#6、定位

相對定位
相對於原來的位置進行指定偏移，相對定位的話，它任然在標準文件流中!原來位置會被保留
position:relative

top:-20px;
left:20px;
bottom:-10px;
right:20px;

登入後複製

絕對定位
##position:absolute

定位:基于xxx定位，.上下左右~
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移~
3、在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移,绝对定位的话，它不在标准文档流中，原来的位置不会被保留

登入後複製

已固定定位

######position:fixed###############z-index###層級，預設是0，最高無限#########

/*背景透明度,或者使用rgba，早期版本filter:alpha(opacity=50)*/
opacity:0.5
/*filter:alpha(opacity=50)*/

登入後複製

###推薦學習：###CSS影片教學#######

以上是入門級了解CSS知識體系的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7799

Java教學

1644

CakePHP 教程

1402

Laravel 教程

1299

PHP教程

1234

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

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

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

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

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

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

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。