css

番茄西紅柿發(fā)布于2019-04-23 13:25 / 2860人閱讀

摘要：一選擇器注釋注釋內(nèi)容與的結合方式的引用直接在標簽中引用在頭部采用選擇器加屬性的方式引用在文件中以后常用在頭部用選擇器加屬性引用引用標簽引用指定的文件指的是引用的類型表示引用路徑直接在標簽中引用選擇器加屬性文

　一 , css選擇器

　　1, css注釋

　　　　/*注釋內(nèi)容*/

　　2, HTML與css的結合方式 (css的引用)

　　　1 , 直接在標簽中引用;

　　　2, 在頭部采用選擇器加屬性的方式引用;

　　　3, 在css文件中(以后常用)

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d2 {color : red} 
    style>
    <link rel="stylesheet" href="引用.css"> 
head>
<body>
<div id="d1" style="color:green">直接在標簽中引用div>
<div id="d2" >選擇器加屬性div>
<div id="d3">css文件div>
body>
html>

#d3 {color:red}

　HTML用來完成頁面的整體結構框架,CSS則是對這些結構或框架進行渲染,使他們更加豐滿,JS則是讓頁面

　　更加生動,鮮活起來.

　　而css中的選擇器就是選中將要進行渲染操作HTML結構的一種方式,它的作用就是選中目標.

　　3, 基本選擇器(找標簽的基本方式)

　　　元素選擇器

　　　　根據(jù)標簽的名字找

　　　　標簽名 {屬性}　　div {}

　　　ID選擇器

　　　　#id名 {屬性}　　#d1 {}

　　　類選擇器

　　　　.類名 {屬性} 　　.c1 {}

　　　　樣式類名不要用數(shù)字開頭,有的瀏覽器不認,常用數(shù)字字母開頭 ;

　　　　標簽中的class屬性如果有多個,要用空格分開

　　　通用選擇器

　　　　* { 屬性;}　　表示操作body標簽下的所有標簽

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>找標簽方式title>
    <style>
        p {color:red} 

    style>
    <style>
        #p2 {color:green} 
    style>
    <style>
        .類選擇 {color: yellow} 
    style>

head>
<body>
<div class="類 類選擇">類樣式標識div>
<div id="p2">ID標識div>
<div class="類 類選擇">類樣式標識div>

<p>p標簽p>
<p>p標簽p>

body>
html>

　　4, 組合選擇器

　　　后代選擇器

　　　　父標簽后代標簽 {屬性} div span {}

　　　　操作父標簽嵌套下的所有與 "后代標簽" 名字相同的的后代標簽




    
    Title
    



選擇器加屬性
    兒子標簽   
    
        孫子標簽   
    

css文件

　　兒子選擇器　　父標簽>兒子標簽 {屬性}

　　對所有標簽名為 "父標簽" 嵌套下的 "兒子標簽" 進行操作.如果"兒子標簽" 下仍有嵌套的標簽,也包括




    
    Title
    



選擇器加屬性
    兒子標簽   
                      
        span孫子標簽   
        div孫子
        
    
    
        
            孫子標簽
        
    



css文件

　　毗鄰選擇器　　標簽名+標簽名(毗鄰標簽) {屬性}

　　　　選中的毗鄰標簽只能是在相鄰標簽的后面的一個,不能是前面,因為程序從上到下執(zhí)行,不會返回選中.




    
    Title
    



上面的div

        
            孫子標簽
        


下面的div

　　弟弟標簽　　標簽名~同級標簽名 {屬性}

　　　　操作標簽名后面的所有同一級的相同名稱的標簽




    
    Title
    



上面的div

        
            孫子標簽
        

緊挨著
隔一個
下面的div
隔了一個不同名的   

                           
        弟弟標簽下的兒子標簽

　　屬性選擇器　　標簽 [標簽屬性] {屬性}

　　　　只操作該標簽內(nèi) 與 [標簽屬性名=標簽屬性值] 組成的鍵值對相同的標簽




    
    Title
    



屬性標簽

    嵌套中的屬性標簽
    嵌套中的屬性標簽屬性不一樣

　　不常用選擇器

　　分組選擇器　選擇器,選擇器 {屬性}

　　當一個或多個選擇器對元素操作相同屬性時,可以把多個選擇器寫在一起,用逗號隔開.




    
    Title
    



div最外層
   
input最外層   

    input嵌套    
    input嵌套名稱不一樣

　　嵌套選擇器 (類似于后代選擇器)




    
    Title
    




    
        三層嵌套

　　偽類選擇器

　　a和input 標簽的特有操作

/* 未訪問的鏈接 */
a:link {
  color: #FF0000
}

/* 已訪問的鏈接 */
a:visited {
  color: #00FF00　　/*被操作過的對象會變色*/
} 

/* 鼠標移動到鏈接上 */
a:hover {
  color: #FF00FF
} 

/* 選定的鏈接 */ 
a:active {
  color: #0000FF   /*光標點擊會標色,移走則選中*/
}

/*input輸入框獲取焦點時樣式(獲取光標)*/
input:focus {
  outline: none;
  background-color: #eee; / background-color:rgba(10,100,101,0.2);(背景也可以用rgba,被透明化.騷操作.)
}

　　偽元素選擇器

　　　first-letter　　標簽:first-letter {屬性}

　　　常用來給標簽內(nèi)的第一個元素設置格式:


"zh-CN">

    "UTF-8">
    Title
    



"d1">
  我是好人

　　before　　標簽:before {屬性; }

　　在標簽內(nèi)的元素前進行操作

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d1:before {
        content:"*";
        color:red;
        }
　　　　

    style>
head>

<body>
<div id="d1">
  我是好人
div>

body>
html>

　　after　　標簽:after {屬性;}

　　　　在標簽的元素之后進行操作,插入內(nèi)容

    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d1:before {
        content:"*";
        color:red;
        }
        #d1:after {
        content:"[*]";
        color:green;
        }
    style>
head>

<body>
<div id="d1">
  我是好人
div>

body>
html>

css選擇器的優(yōu)先級

　　選擇器相同時,后面的標簽優(yōu)先級高(后面的覆蓋前面的)

　　選擇器不同時:

　　繼承的權重為 0　(指嵌套在父標簽內(nèi)的標簽)

　　注意:內(nèi)聯(lián)樣式是指,直接在標簽內(nèi)通過style進行屬性操作例:

紅色

　　在計算選擇器優(yōu)先級時,先看選擇器的優(yōu)先級,優(yōu)先級別更高的選擇器,優(yōu)先級更高,在優(yōu)先級別相同時

　　權重和大的,優(yōu)先級別更高.

　　此外 ,還可以通過添加import方式來強制讓樣式生效,不推薦使用,若過多使用,回事樣式文件混亂不易維護(在

　　屬性后加 !import;)

css屬性相關

　　高和寬

　　只有塊級標簽才能設置(行內(nèi)標簽只能依靠行元內(nèi)元素的寬和高,塊級標簽可以獨占一行,因此可以設置.)

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div {
            height :200px;
            weight:205px;
            background-color:red;
            }
        span {
            height :200px;
            weight:205px;
            background-color:green;
            }   
    style>
head>

<body>
<div id="d1">
  我是好人
div>
<span>
    我也是好人
span>

body>
html>

　　字體屬性

　　　　font-family可以把多個字體名稱作為一個回退系統(tǒng)來保存.如果瀏覽器不支持第一個字體,則會嘗試下

　　　　一個.瀏覽器會使用它可識別的第一個值.(若全都不支持,則會選擇瀏覽器系統(tǒng)默認字體)

body {
    font-family:微軟雅黑,宋體,Arial}

　　字體大小　　font-size

p {
    font-size:15px;
    }

　　如果設置成inherit表示繼承父元素的字體大小值.

　　字重(粗細)

    <title>Titletitle>
    <style>
        div {
            font-weight:bold;   
            height :200px;
            weight:205px;
            background-color:red;
            }
    style>
head>

<body>
<div id="d1">
  我是好人
div>

body>
html>

　　文本顏色

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div {
            font-weight:bold;
            color:red;  
            }
        span {
            background-color:red;
            color:#FFFFFF;  
　　　　　　　}

    style>
head>

<body>
<div id="d1">
    我是好人
div>
<span>
    我也是好人
span>
<div id="d2">
    彼此彼此
div>

body>
html>

　　color :rgba(255,255,255,0.4)　　a指的是透明度比率,取值范圍是0~1 ,是在rgb上進行屬性設置.

　文字屬性

　　文字對齊

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div {
            font-weight:bold;
            text-align:center;
            color:red;}
        span {
            background-color:red;
            text-align:right;　　
            color:#FFFFFF;}
        #d2 {
            text-align:right;
            color:rgba(0,255,0,0.7);}
    style>
head>

<body>
<div id="d1">
    我是好人
div>
<span>
    我也是好人
span>
<div id="d2">
    彼此彼此
div>

body>
html>

　　文字裝飾

　　注意:none指的是消去下劃線 ; line-through 穿過元素,類似于刪除形式 ; overline 在元素上方劃線.

　　首行縮進　　text-indent

　　將段落的第一行縮進單位是像素

p {
    text-indent:32px
    }

背景屬性

/*背景顏色*/
background-color: red;
/*背景圖片*/
background-image: url(1.jpg);
/*
 背景重復
 repeat(默認):背景圖片平鋪排滿整個網(wǎng)頁
 repeat-x：背景圖片只在水平方向上平鋪
 repeat-y：背景圖片只在垂直方向上平鋪
 no-repeat：背景圖片不平鋪
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/

　　鼠標滾動背景不動的例子

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滾動背景圖示例title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center;
            background-attachment: fixed;　　
        }
        .d1 {
            height: 500px;
            b.ackground-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    style>
head>
<body>
    <div class="d1">div>
    <div class="box">div>
    <div class="d2">div>
    <div class="d3">div>
body>
html>

邊框　　

　　邊框屬性

border-width
border-style
border-color

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;

　　通常使用簡寫方式：

#i1 {
  border: 2px solid red;
}

　　邊框樣式:

　　border-radius

　　用這個屬性能實現(xiàn)圓角邊框的效果.

　　將border-radius設置為長或高的一半即可得到一個圓形.

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>圓形title>
    <style>
        div {
            width:150px;
            height:150px;
            border:5px solid green;
            border-radius: 50%;
        }
    style>
head>
<body>
<div class="d1">

div>

body>
html>

　　display屬性　　用于控制HTML元素的顯示效果.

　　display:block　　可以讓行級標簽擁有塊級標簽的特性,如:寬度高度等.

　　display:inline-block 既可以在一行顯示,又擁有寬度和高度.

盒子模型

　　content 指的是內(nèi)容本身的長寬 ; padding指的是內(nèi)容與邊框之間的區(qū)域 ,也可以叫內(nèi)邊距 ;

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>圓形title>
    <style>
        div {
            width:150px;
            height:150px;
            border:5px solid green;
            border-radius: 50%;
            margin:20px;
            padding-right:30px;
            padding-left
                 
                                                                                                                    
                         云服務器
                                             
                         GPU云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               css引入css
                                                                                                           css
                                                                                                           _CSS
                                                                                                           css88

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1855.html

[譯]148個資源讓你成為CSS專家

摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關于基礎特性，一份關于布局。核心第一篇一份來自的基礎參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎指南，包含使用的好處介紹個方法快速寫成高質(zhì)量的寫出高效的一些提示。迄今為止，我已經(jīng)收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設計脫穎而出。 CSS3 資源 20個學習CSS3的有用資源 C...

impig33 2019-08-29 11:10 評論0 收藏0
簡單易懂的CSS Modules

摘要：結果是選手獲勝，名為的元素，最終的值為。而合理的命名約定，的確是組織代碼的有效策略。它們會再由轉換為適當?shù)慕M合。雖然本文為了嚴謹，結果寫了相當長的篇幅，但希望你讀過之后，還能覺得是簡單易懂的。不要誤會，CSS Modules可不是在說css模塊化這個好像在某些地方見過的詞，它其實是特指一種近期才出現(xiàn)的技術手段。什么技術手段呢？請待后文說明。層疊樣式表我們知道，css的全名叫做層...

chunquedong 2019-08-30 12:58 評論0 收藏0
CSS Modules實踐

摘要：能最大化地結合現(xiàn)有生態(tài)預處理器后處理器等和模塊化能力，幾乎零學習成本。編碼相關的所有樣式上例中打印的結果是注意到是按照自動生成的名。實踐手動引用渲染結果使用可以實現(xiàn)使用屬性自動加載模塊。文章同步于Github Pines-Cheng/blog 隨著前端這幾年的風生水起，CSS作為前端的三劍客之一，各種技術方案也是層出不窮。從CSS prepocessor（SASS、LESS、Styl...

hankkin 2019-08-29 13:00 評論0 收藏0
【譯】編寫更好的CSS必備的40個工具

摘要：一個叫的人用純重繪并模擬了種不同的移動設備包括可以給你的網(wǎng)站添加不相關的獨立組件的一個庫。每一個組件都是針對移動設備定制的，并且它有很多你在傳統(tǒng)的框架中看不到的功能。如果你用開發(fā)移動優(yōu)先的網(wǎng)站，并想要網(wǎng)站正常運行在低版本的上，可以考慮。眾所周知，CSS是非常棒的，它使網(wǎng)站看起來很漂亮，可以為網(wǎng)站添加動畫，并讓呈現(xiàn)和內(nèi)容分離。去了解CSS的一切是非常難做到的，它只會變得更加困難,因為我...

moven_j 2019-08-28 18:09 評論0 收藏0
SegmentFault 技術周刊 Vol.38 - 神奇的 CSS

摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現(xiàn)出多種樣式?？梢宰寣傩缘淖兓^程持續(xù)一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 評論0 收藏0
CSS Modules詳解及React中實踐

摘要：上例中打印的結果是對中的名都做了處理，使用對象來保存原和混淆后的對應關系。結合實踐在處直接使用中名即可。如因為只會轉變類選擇器，所以這里的屬性選擇器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端領域中進化最慢的一塊。由于 ES2015/201...

wemall 2019-08-30 15:45 評論0 收藏0