2. 程式人生 > >集腋成裘-03-css基礎-02

集腋成裘-03-css基礎-02

阿新 • • 發佈：2018-05-01
lap 一起 背景 eight 生活 輸入關鍵字 發生 ddb 大於

　　1.1 三種寫法

　　內嵌式:樣式只作用於當前文件,沒有真正實現結構表現分離

　　外鏈式:作用範圍是當前站點,真正實現了內容與表現分離

　　行內樣式:僅限於當前標簽,結構混在一起

　　1.2 標簽分類

　　　　1.2.1 塊元素

　　　　　　代表標簽:Div;p;ul;li

　　　　　　特點:獨占一行;可設置寬高;子元素的寬高默認為父元素的寬高　　　　　　

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="
 
text/css">
        div{
            width:200px;
            height:200px;
            background-color: blue
        }
         p{
             background-color: red;
         }
    </style>
</head>
<body>
    <div>
        div元素是塊元素
        <p>p元素的默認寬高等於父級的寬度</p>
    </div>
    <p>p元素也是默認瀏覽器寬度</p>
</body>
</html>
塊元素

技術分享圖片

　　　　1.2.2 行內樣式

　　　　　　代表標簽:span;a;strong;

　　　　　　特點:一行顯示;不可設置寬高;　　　　　　

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span{
            width:200px;
            height:200px;
            background
 
-color: blue
        }
         a{
             width:200px;
            height:200px;
             background-color: red;
         }
    </style>
</head>
<body>
    <span>
        我是span標簽中的元素<a href="#">a標簽</a>
    </span>
     
    <span>
        不能設置寬高
    </span>
    <a href="#">
        不能設置寬高
    </a>
</body>
</html>
行內元素

技術分享圖片

　　　　1.2.3 行內塊

　　　　　　代表標簽:input;img;

　　　　　　特點:一行顯示;可設置寬高;

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        input{
            width:200px;
            height:200px;
            background-color: blue
        }
        img{
             width:200px;
            height:200px;
             background-color: red;
             vertical-align: top;             
         }
    </style>
</head>
<body>
    <input type="text" name="" value="我是input標簽中的元素">
        
    </span>
     
     <img src="1.png" alt="">
</body>
</html>
行內塊

技術分享圖片

1.3 互相轉換

　　1.3.1 塊=>行內

　　display:inline;

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            background-color: blue;
            
        }
         p{
             background-color: red;
             display:inline;
         }
    </style>
</head>
<body>
    <div>
        div元素是塊元素
        <p>p元素的默認寬高等於父級的寬度</p>
    </div>
    <p>p元素也是默認瀏覽器寬度</p>
</body>
</html>
塊轉化為行內

技術分享圖片　　1.3.2 行內=>塊

　　display: block;

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span{
            width:200px;
            height:200px;
            background-color: blue;
            display: block;
        }
         a{
             width:200px;
            height:200px;
             background-color: red;
         }
    </style>
</head>
<body>
    <span>
        我是span標簽中的元素<a href="#">a標簽</a>
    </span>
     
    <span>
        不能設置寬高
    </span>
    <a href="#">
        不能設置寬高
    </a>
</body>
</html>
行內轉化為塊

技術分享圖片

　　1.3.3 =>行內塊

　　display:inline-block;

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width:400px;
            height:400px;
            background-color: blue;
            
        }
         p{
             width:200px;
            height:200px;
             background-color: red;
             display:inline-block;
         }
    </style>
</head>
<body>
    <div>
        div元素是塊元素
        <p>p元素的默認寬高等於父級的寬度</p>
    </div>
    <p>p元素也是默認瀏覽器寬度</p>
</body>
</html>
塊轉化為行內塊 技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span{
            width:400px;
            height:400px;
            background-color: blue;
            display:inline-block;
        }
         a{
             width:200px;
            height:200px;
             background-color: red;
             display:inline-block;
         }
    </style>
</head>
<body>
    <span>
        我是span標簽中的元素<a href="#">a標簽</a>
    </span>
     
    <span>
        不能設置寬高
    </span>
    <a href="#">
        不能設置寬高
    </a>
</body>
</html>
行內轉化為行內塊

技術分享圖片技術分享圖片

1.4 樣式表的屬性

　　1.4.1 層疊性 :當元素之間的樣式發生沖突時,按照瀏覽器的解析順序,後續的樣式會覆蓋掉原有的樣式.

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    
        .div1{
            color:red;
        }
        .div2{
            color:blue;
        }
    </style>
</head>
<body>
    <div class="div1 div2">
     我是div中元素
    </div>
</body>
</html>
層疊性

技術分享圖片

　　1.4.2 繼承性:包含關系,子元素中的某些元素會繼承父元素的樣式

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     p{
            
            font-style: italic;
              
        }
        div{
            font:italic 700 16px/40px 微軟雅黑 ;
            color:red;
             
        }
    </style>
</head>
<body>
    <div>
        我是另一個div中元素
        <p>我是div中的p標簽我是紅色</p>
    </div>
</body>
</html>
繼承性

技術分享圖片

　　1.4.3 優先級

　　默認(繼承)<標簽<類<id<行內<!important

　　0　　　　< 10<100<1000<1000+

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #p2{
            color:green;
        }
        #p{
            color:pink;
        }
        .p{
            color:orange;
        }
       p{         
              color:blue;
        }
        div{
             color: red;
        }
        .p2{
            color:orange !important;
        }
    </style>
</head>
<body>
    <div >
        我默認是黑色;        
        <p>我是默認是繼承div的黑色</p>
        <p>標簽權重大於繼承</p>
        <p class="p">類的權重大於標簽</p>
        <p class="p" id="p">id權重大於類</p>
        <p class="p" id="p2" style="color:yellow">行內權重大於id</p>
    </div>
    <div class="father">
        <p class="p2">最厲害得是!important</p>
    </div>
</body>
</html>
優先級

技術分享圖片

　　權重的疊加

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         
        .father,.p2{
            color:red;
        }
        div,.p{
            color:orange;
        }
     
    </style>
</head>
<body>
     
    <div class="father">
        <p class="p2">紅色表示連個類的疊加</p>
    </div>
</body>
</html>
權重的疊加

技術分享圖片

1.5 鏈接偽類

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
         a:link{
             color:red;
            text-decoration: none;
         }
         /*訪問之後的狀態*/
         a:visited{
             color:yellow;
         }
         /*鼠標放上的狀態*/
         a:hover{
             color:orange;
         }
         /*激活狀態*/
         a:active{
             color:pink;
         }
    </style>
</head>
<body>
    <div class="content">
         <a href="#">鏈接</a>
    </div>
</body>
</html>
鏈接偽類

技術分享圖片

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .nav{
            height: 60px;
            background-color: #aaa;
            text-align: center;
        }
        a:link{
            color:red;
            text-decoration: none;
        }
        /*訪問之後的狀態*/
        a:visited{
            color:yellow;
        }
        /*鼠標放上的狀態*/
        a:hover{
            background-color: #eee;
            color: #F14400;
        }
        /*激活狀態*/
        a:active{
            color:pink;
        }
        a{
            display: inline-block;
            width:100px;
            height: 60px;
        }
        a.public{
            font-weight: 700;
            color: #F14400;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#"    class="public">天貓</a>
        <a href="#"    class="public">聚劃算</a>
        <a href="#"    class="public">超市</a>
        <a href="#"    class="public">頭條</a>
        <a href="#">阿裏旅行</a>
        <a href="#">電器城</a>
        <a href="#">淘搶購</a>
        <a href="#">蘇寧易購</a>
        <a href="#">智能生活</a>
    </div>
</body>
</html>
小練習

技術分享圖片

1.6 背景屬性

　　　　/*背景顏色*/
　　　　background-color:red;
　　　　/*背景圖片*/
　　　　background-image:url("");
　　　　/*背景平鋪*/
　　　　background-repeat:repeat | no-repeat | repeat-x | repeat-y;
　　　　/*背景定位*/
　　　　background-position: left | right | center | top | bottom

　　　　/*背景滾動*/

　　　　Background -attachment scroll | fixed;

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            height:500px;
            /*背景顏色*/
            background-color:red;
            /*背景圖片*/
            background-image:url("1.png");
            /*背景平鋪*/
            background-repeat:no-repeat;
            /*背景定位*/
            background-position:center;
            /*背景滾動*/
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div class="box">
         
    </div>

        <div Style="height:1000px;background-color:blue">
         
    </div>
</body>
</html>
背景顏色

技術分享圖片

　　　　1.6.2 背景屬性的連寫

　　　　background: red url("1.png") no-repeat center scroll;

　　　　1.6.3 練習　　　　

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        input{
            width:200px;
            height: 20px;
            background: url("search.png") no-repeat right center;
        }
    </style>
</head>
<body>
    <input type="text" value="請輸入關鍵字">
</body>
</html>
練習1

技術分享圖片

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
         li{

             list-style: none;
             background: url("li.gif") no-repeat left center;
             text-indent: 1em;
         }

    </style>
</head>
<body>
    <div class="nav">
         <ul>
             <li><a href="#">阿裏旅行</a></li>
             <li><a href="#">電器城</a></li>
             <li><a href="#">淘搶購</a></li>
             <li><a href="#">蘇寧易購</a></li>
             <li><a href="#">智能生活</a></li>
         </ul> 
        
    </div>
</body>
</html>
練習2

技術分享圖片

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        a{
            display: inline-block;
            width: 67px;
            height: 32px;
            background: url("shoppingCar.png");
        }
        a:hover{
            background: url("shoppingCar.png") bottom;
        }

    </style>
</head>
<body>
    <div class="nav">
        <a href="#"></a>
    </div>
</body>
</html>
練習3

技術分享圖片技術分享圖片

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        a{
            display: inline-block;
            width: 120px;
            height: 58px;
            text-align: center;
            text-decoration: none;
            color:white;
            line-height: 50px;
        }
        .one{
            background: url("images/bg1.png");
        }
        .one:hover{
            background: url("images/bg5.png");
        }
        .two{
            background: url("images/bg2.png");
        }
        .three{
            background: url("images/bg3.png");
        }
        .four{
            background: url("images/bg4.png");
        }
         

    </style>
</head>
<body>
     <a href="#" class="one">五彩導航</a>
     <a href="#" class="two">五彩導航</a>
     <a href="#" class="three">五彩導航</a>
     <a href="#" class="four">五彩導航</a>
</body>
</html>
練習3

技術分享圖片

集腋成裘-03-css基礎-02

相關推薦

集腋成裘-03-css基礎-02

lap 一起 背景 eight 生活 輸入關鍵字 發生 ddb 大於 　　1.1 三種寫法 　　內嵌式:樣式只作用於當前文件,沒有真正實現結構表現分離 　　外鏈式:作用範圍是當前站點,真正實現了內容與表現分離 　　行內樣式:僅限於當前標簽,結構混在一起 　　1.2 標簽分類

【前端】CSS基礎02-萬用字元,id,類選擇器

1:萬用字元選擇器和ID選擇器的使用: 2:類選擇器的使用,CSS類選擇器的選擇符號是"."  3:綜合demo 4:複合選擇器 4.1(既...又...)不常用 4.2 後

前端開發之CSS基礎知識02

類選擇器 bsp top osi 文本 層疊 das chm rgba 重要： 行內元素中只能容納文本或其他的行內元素 a標簽例外 文字類型的塊標簽，不要放其他塊元素 如 P H1 CSS規範： .demo {} 空格 font-size: 12px; 空格 .

CSS【03】：CSS 基礎選擇器與三種引入方式

基礎選擇器 選擇器：css 選擇 html 標籤的一個工具，是將 css 與 html 建立起聯絡，那麼 css 就可以控制 html 樣式 選擇器其實就是給 html 標籤起名字 標籤選擇器 作用：根據指定的標籤名稱，在當前介面中找到所有該名稱的標籤，然後設定屬性 格式： 標籤

前端基礎02 CSS

family utf-8 Language lin -html 前端基礎 ria 嵌入 組合選擇器 CSS的幾種引入方式 行內樣式 行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。 <p style="color: red">Hello wor

Java知識系統回顧整理01基礎03變量02基本變量類型

真假 var oid boolean long 參考 mil 賦值 htm 一、變量類型分類 一個變量的類型，決定了該變量可以包含什麽樣的值。? Java中有八種基本類型，都是Java語言預先定義好的，並且是關鍵字。? 這八種基本類型分別是：? 整型 （4種）

第五天-css基礎（浮動 網頁布局 定位方式，清除定位）

gin 相對 hid col 絕對定位 左右 color 問題 oot 基礎知識-css第五天，今天學習了css主要知識浮動，和定位，都是關於網頁布局的。這個2塊知識用好了，後期做好看的動畫，布局就不成問題了。 浮動left 浮動的框可以向左或是向右移動，直到它的邊緣碰到包

第七天-css基礎（行高，盒子模型，邊距）

昨天 固定 整理 .com add 多行 png 居中 lin 摘要: 基礎知識-css第七天，昨天因為同學的婚禮，所以沒有整理，今天繼續，今天是css基礎的最後一天，知識點不多也不難，主要是後期多練習，鞏固前面學習的知識。還有2個案例的時候視頻，下周學習。下周也要開啟js

CSS基礎知識結構

css基礎 class tex XML ges run 標記語言 targe aid CSS：Cascading Style Sheets的簡寫，層疊樣式表。 2017-05-20 HTML是網頁頁面的結構、CSS是頁面的布局、JavaScript是頁面的交互行為。 CS

Css 基礎知識（一）

mes 層疊 width 布局 增加 rgb 文本 用法 並集 1、Css概念 CSS 指層疊樣式表 (Cascading Style Sheets)(級聯樣式表)，Css是用來美化html標簽的，相當於頁面化妝。 ◆樣式表書寫位置 2、 選擇器 2.1、寫法 選擇器是選

python之 前端HTML/CSS基礎知識學習筆記

引號 編寫 css基礎 通用 浮動 我們 公司地址 將不 多行 1. 文件結構： HTML文件的固定結構： <html> <head>...</head> <body>...&l

CSS基礎

性問題 padding 發生 屬性 right 失效 問題 ota size 　　1、選擇器 css的選擇器很多種，常用的有類選擇器、標簽選擇器、ID選擇器、後代選擇器、群組選擇器、偽類選擇器（befor/after）、兄弟選擇器(+~)、屬性選擇器等等。 　　

HTML/CSS 知識點02 （轉）

標記 內邊距 -m 美化 設置 ng- 兩個 clas 黃色 一個完整的頁面由三部分構成： html：超文本標記語言 通過語義化標簽，搭建頁面"結構" css:層疊樣式表 負責頁面"樣式"，美化頁面的 js:輕量級的腳本語言；交互指的是兩個地方（行為） 前

CSS基礎知識2

empty int align import 文件中 lean tex 文檔 nbsp 1 基本規範1.1 文件命名規範基本樣式：base.css全局樣式：global.css框架布局：layout.css字體樣式：font.css鏈接樣式：link.css打印樣式：pri

CSS基礎知識1

htm 知識 中文 tle 添加 variant 20px 樣式 lin CSS (Cascading Style Sheets) 用於渲染HTML元素標簽的樣式. 1. CSS 可以通過以下方式添加到HTML中:內聯樣式- 在HTML元素中使用"style" 屬性內部樣式

css基礎知識的復習總結（二）

文本 pin zoom clear head 導航 設置 mage 之間 文檔流、浮動、清除浮動、overflow、定位 1.文檔流 css文檔流，標準流是什麽？ 元素自上而下，自左而右，塊元素獨占一行，行內元素在一行上顯示，碰到父集元素的邊框換行。

css基礎知識的復習總結（三）

網頁 元素 ati 塊元素 isp 方式 一半 浮動 .cn 1.定位的盒子居中顯示 案例一：（定位的盒子居中顯示） 預期效果 實現步驟： 設置父盒子為相對定位 設置子盒子left值為父盒子寬度一半設置子盒子左邊距為自己寬度一半 總結：margin:0 auto 只能讓在

CSS 基礎知識

text 文件 展示 property 站點 height 基礎 以及 規則 CSS 實例(CSS聲明總是以分號(;)結束，聲明組以大括號({})括起來:) CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明: 選擇器通常是您需要改變樣式的 HTML 元素。 每

css基礎-1

css基礎 最好的 eight margin 下拉 顏色 屏幕 元素 聲明 css簡介 一、CSS 指層疊樣式表 樣式定義如何顯示 HTML 元素 樣式通常存儲在樣式表中 把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題 外部樣式表可以極大提高

CSS基礎知識

meta 使用方法 link chan col shee 指定 機械 特殊 CSS作用： 外觀美化，布局，定位 CSS的幾種選擇器： 1標簽選擇器： <head> <meta charset="UTF-8"> <style>