Teknologian jakaminen

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Johdatus CSS:ään

CSS onCSS Style Sheets(lyhenne sanoista Cascading Style Sheets) ohjaa tarkasti HTML-sivujen tyyliä graafisen tiedon näyttämiseksi paremmin tai viileän/ystävällisen interaktiivisen kokemuksen tuottamiseksi.

没有必要让所有浏览器都显示得一模一样的，好的浏览器有更好的显示，糟糕的浏览器就只有普通的显示，这才是对用户更负责任的做法。
1

CSS-tiedoston pääte on .css

Kommentti

/* 注释的内容 */
1

Kolme tapaa lisätä tyylejä

1. tyyli Sisäiset tyylit

<span style="color: red">红色文字</span>
1

2. Lisää CSS-tyylivalitsimella

https://blog.csdn.net/weixin_41192489/article/details/140226382

3. Perintö

Säilön elementit saavat säilöön lisätyt tyylit

  <div style="color: red">
    <p>我是容器内的元素，并没有直接添加样式，但也会变红！</p>
  </div>
1
2
3

• Tekstityyliattribuutit ovat kaikki perittyjä. Näitä attribuutteja ovat: color, alkaen tekstistä, alkaen rivistä ja alkaen kirjasimella-.
• Laatikko-, sijainti- ja asettelumääritteitä ei voi periä.

Kuka päättää lopullisen tyylin?

Koska elementeissä on monia tyylilähteitä, mukaan lukien selaimen oletustyylit, tyylin sisäiset tyylit, eri CSS-valitsimien lisäämät tyylit ja pääelementeistä perityt tyylit, lopullinen tyyli on se, jolla on korkein prioriteetti monista tyyleistä tyyli.

CSS-tyylien prioriteetti

https://blog.csdn.net/weixin_41192489/article/details/139720467

Tyylin perusasiat

CSS-pituusyksikkö

https://blog.csdn.net/weixin_41192489/article/details/140236423

CSS-toiminnot

https://blog.csdn.net/weixin_41192489/article/details/140318834

laatikko malli

https://blog.csdn.net/weixin_41192489/article/details/102411612

• Sekä korkeus että rivin korkeus voivat avata laatikon, mutta taustakuva ei voi avata laatikkoa.

Huomioitavaa upotetuista elementeistä

• Sisäiset elementit voivat näyttää vain sisä- ja ulkomarginaalit alussa ja lopussa, ja niitä tulee välttää niin paljon kuin mahdollista, joten älä aseta sisä- ja ulkomarginaaleja rivielementeille.

• Kun rivielementit on kääritty, reunusten näyttö on pinottu ja sekava, joten älä aseta reunuksia rivielementeille!

• Kun sinun on lisättävä reunukset/sisä- ja ulkomarginaalit upotettuun elementtiin, muunna se upotettuun laatikkoon

  display：inline-block
  1

Mitä tyylejä voidaan lisätä?

Universaali tyyli

Tyylit voidaan lisätä lähes jokaiseen html-elementtiin.

Leveys korkeus

• leveys: oletusarvo on sisällön leveys (ei laatikon leveys)
• korkeus: oletusarvo on sisällön korkeus (ei laatikon korkeus)

Seuraavan tyylin avulla voit vaihtaa elementin oletusstandardin laatikkomallin IE-laatikkomalliksi.

box-sizing:border-box;
1

tällä hetkellä

• Leveys: laatikon leveys (vasen reuna + vasen täyttö + sisällön leveys + oikea täyttö + oikea reuna)
• korkeus: laatikon korkeus (yläreuna + yläreunus + sisällön korkeus + alatäyttö + alareuna)

Pehmuste

• Negatiivisia arvoja ei tueta
• Prosenttiarvo, joko vaaka- tai pystysuora, lasketaan suhteessa leveyteen.

padding: 10px;
1

Täyte: 10px ylä-, ala-, vasen- ja oikealle

padding:10px 5px;
1

Ylä- ja alapehmusteet ovat 10px

Oikea ja vasen pehmuste ovat 5px

padding:10px 5px 15px;
1

Yläpehmuste on 10px

Oikea ja vasen pehmuste ovat 5px

Alaosan pehmuste on 15px

padding:10px 5px 15px 20px;
1

Yläpehmuste on 10px

Oikea pehmuste on 5px

Alaosan pehmuste on 15px

Vasen täyte on 20px

rajan raja

Asiaan liittyvät tyylit ovat myös

• reunalla pyöristetty raja-säde
• border-fill border-image
• ääriviivat

Katso yksityiskohdat https://blog.csdn.net/weixin_41192489/article/details/140325106

marginaali

https://blog.csdn.net/weixin_41192489/article/details/115140348

ylivuoto ylivuoto

• näkyvä [Oletusarvo] Kaikki ylimääräinen sisältö näytetään leikkaamatta tai lisäämättä vierityspalkkeja.
• piilotettu: Piilota vierityspalkki ja älä näytä sisältöä, joka ylittää objektin koon, mutta sitä voidaan silti vierittää.
• auto: Jos sisältö ei ylitä, vierityspalkkia ei näytetä, jos sisältö ylittää, vierityspalkki tulee näkyviin.
• scroll: Windows-alustalla vierityspalkit näkyvät aina riippumatta siitä, ylittääkö sisältö rajan. Mac-alustalla se on sama kuin auto-attribuutti.

Säilöt, joiden ylivuotoarvot ovat automaattinen ja vieritys, ovat rullattavia säiliöitä (säilöt, joissa on vierityspalkit). rullasäiliön pohjapehmuste.

läpinäkyvyys

Attribuutin arvo vaihtelee välillä 0,0 (täysin läpinäkyvä) 1,0:aan (täysin läpinäkymätön), jos se ylittää alueen rajan 0 - 1, lopullinen laskettu arvo on raja-arvo.

    opacity: -1;    /* 解析为 0, 完全透明 */
    opacity: 2;     /* 解析为 1, 完全不透明 */
1
2

tausta tausta

https://blog.csdn.net/weixin_41192489/article/details/140301618

shadowbox-varjo

Varjo ei muuta laatikon kokoa eikä vaikuta sen sisarelementtien asetteluun. Voit myös asettaa useita reunusvarjoja parempien tehosteiden saavuttamiseksi ja kolmiulotteisen tehosteen parantamiseksi.

box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色（默认值为color的颜色值）  内/外阴影
1

• Horisontaalinen siirtymä: Positiivinen arvo oikealle, negatiivinen arvo vasemmalle.
• Pystysuuntainen siirtymä: positiiviset arvot alaspäin ja negatiiviset arvot ylöspäin.
• Sumennuksen taso: ei voi olla negatiivinen
• Sisä-/ulkovarjo - sisäpuoli on sisävarjo, ei kirjoitettu ulkovarjoksi

box-shadow: 15px 21px 48px -2px #666;
1

Yleisesti käytetyt varjot

box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);
1

Katso lisää käyttöä
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

• [Käytännöllinen] Syöttöruudun automaattisen täytön taustavärin korvaaminen

  input:-webkit-autofill {
      -webkit-box-shadow: inset 0 0 0 1000px #fff;
      background-color: transparent;
  }
  1
  2
  3
  4

• [Käytännöllinen] Muokkaa painikkeiden painalluksen värejä erissä

  button:active {
      box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
  }
  1
  2
  3

• 【Todellinen taistelu】Aloittelijan opas maskausvaikutukseen

  .guide {
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75);
      border-radius: 50%;
  }
  1
  2
  3
  4

clip clip-path

https://blog.csdn.net/weixin_41192489/article/details/121341551

• [Käytännön] leikepolku toteuttaa PPT:n kaltaisen siirtymän animaation
  https://www.zhangxinxu.com/wordpress/2019/05/css-transfer-animation

muunnosmuunnos

https://blog.csdn.net/weixin_41192489/article/details/140314866

zoomaus

Firefox-selain ei tue sitä Sillä voi olla seuraavat attribuuttiarvot.

• Prosenttiarvo.zoom:50%, mikä tarkoittaa kutistumista puoleen alkuperäisestä koosta.
• numeerinen arvo.zoom:0.5, mikä tarkoittaa kutistumista puoleen alkuperäisestä koosta.
• normalAvainsanat.zoom:normalVastaazoom:1, on oletusarvo.
• resetAvainsanat.zoom:reset , joka osoittaa, että kun käyttäjä painaa Ctrl ja − tai Ctrl ja + zoomata asiakirjaa, elementtejä ei pienennetä tai suurenneta vastaavasti. Tämän avainsanan yhteensopivuus on kuitenkin huono, ja sitä tukee vain Safari-selain.

Zoom- ja scale()-funktioiden vertailu

• zoomAttribuutin skaalauksen keskikoordinaatti on suhteessa elementin vasempaan yläkulmaan, eikä sitä voi muokata.transformmuuntamassascale()Toiminnon skaalauksen oletuskeskikoordinaatti on elementin keskipiste.
• Zoom-attribuutin skaalaus muuttaa elementin käyttämää kokotilaa reaaliajassa ja käynnistää uudelleenpiirtämisen ja uudelleenlaskennan. Tästä syystä zoomausattribuutin skaalaus on huonompi kuin scale()-funktion.
• Zoom-attribuutin käyttäminen elementtiin ei luo peräkkäistä kontekstia, ei vaikuta kiinteiden elementtien sijoitteluun eikä ylivuoto-attribuutilla absoluuttisesti sijoitettujen elementtien ylivuodon piilottamiseen, eikä se muuta absoluuttisesti sijoitettujen elementtien sisältävää lohkoa.

maski maski

https://blog.csdn.net/weixin_41192489/article/details/121158821

gradienttigradientti

https://blog.csdn.net/weixin_41192489/article/details/140316024

Ainutlaatuisia tyylejä erityyppisille elementeille

teksti

https://blog.csdn.net/weixin_41192489/article/details/140264311

Hyperlinkki

Pseudoluokkatyylit - on kirjoitettava seuraavassa kiinteässä järjestyksessä:

• :link "Linkki": ennen kuin hyperlinkkiä napsautetaan - koskee kaikkia href-attribuutteja sisältäviä hyperlinkkejä (ankkureita lukuun ottamatta) - voidaan jättää pois, lyhennetty a-tunnisteessa
• :vieraillut "Vierailtu": kun linkissä on vieraillut - se voidaan jättää pois, lyhennetty a-tunnisteessa
• :hover "hover": kun hiiri asetetaan etiketin päälle
• :active "Aktivoi": Kun hiiri napsauttaa etikettiä, mutta ei päästä irti.

    /*让超链接点击之前是红色*/
    a:link{
        color:red;
    }

    /*让超链接点击之后是绿色*/
    a:visited{
        color:orange;
    }

    /*鼠标悬停，放到标签上的时候*/
    a:hover{
        color:green;
    }

    /*鼠标点击链接，但是不松手的时候*/
    a:active{
        color:black;
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

kuva

Kuvan suodatinsuodatin

https://www.runoob.com/cssref/css3-pr-filter.html

kuvake

• Ota käyttöön responsiiviset kuvakkeet fonttipainolla
  Kun fonttikoko on suurempi, kuvakkeen fontti on yksityiskohtaisempi, ja kun fonttikoko on pienempi, kuvakkeen fontti on yksinkertaisempi.
  https://demo.cssworld.cn/8/5-1.php

• css-kuvakkeiden yhdistäminen - ClipPath Sprites -tekniikka
  https://blog.csdn.net/weixin_41192489/article/details/121242735

arkki

Korosta rivit hiirellä

/*鼠标悬停时，让当前行显示#868686这种灰色*/
table tr:hover{
      background: #868686;
}
1
2
3
4

vuorottelevat väririvit

Vuorottelevat värit tietorivien välillä voivat vähentää käyttäjän lukuväsymystä.

table tr:nth-child(odd){
   background:#fff
}
table tr:nth-child(even){
   background:blue
}
1
2
3
4
5
6

rullaa

hiiren kursori

kohdistin

Kohdistimen väri caret-color
Aseta syöttöruudun lisäyskohdistimen väri (IE- ja Edge-selaimet eivät vielä tue)

input {
    caret-color: red;
}
1
2
3

Näytä ja piilota liittyvät tyylit

Kun ei ole olemassa seuraavia tyylejä, jotka voivat piilottaa elementtejä, elementit näytetään (jotkut eivät näy vain siksi, että kaskadi on peitetty):

• display: none [Yleisesti käytetty] Piilotetut elementit, eivät vie tilaa, lataavat resursseja ja DOM on käytettävissä (piilotettujen lisääminen html-tunnisteeseen muuttaa tagin näytön tilaan ei mitään)
• visibility: hidden Piilotetut elementit ovat paikoillaan, resurssit ladataan ja DOM on käytettävissä
  • Jos yläelementti asettaa visibility:hidden, myös alielementit ovat näkymättömiä (perintö)
  • Jos visibility:visible on asetettu lapsielementille, alielementti näytetään uudelleen.
• opacity: 0 Elementti on näkymätön, ottaa aseman ja sitä voidaan napsauttaa tai valita.
• clip: rect(0 0 0 0) Elementti on näkymätön, sitä ei voi napsauttaa, se ei vie tilaa, mutta siihen pääsee näppäimistöllä
• Negatiiviset z-indeksiarvot piilottavat elementin Elementti on näkymätön eikä sitä voi napsauttaa, mutta se vie tilaa ja on käytettävissä näppäimistöltä.

  .lower {
  　position: relative;
  　z-index: -1;
  }
  1
  2
  3
  4

Paikasta riippuvat tyylit

Elementin sijainti sivulla määräytyy useiden tyylien mukaan, mukaan lukien sijoittelu, näyttö, float, marginaali jne.

Kun sijainti, näyttö ja kelluvuus ovat samaan aikaan, elementin lopullinen näyttövaikutus määräytyy alla olevassa linkissä kuvatun logiikan mukaisesti.

https://blog.csdn.net/weixin_41192489/article/details/119009647

aseman asema

https://blog.csdn.net/weixin_41192489/article/details/140242430

asettelunäyttö

https://blog.csdn.net/weixin_41192489/article/details/140250775

marginaali

https://blog.csdn.net/weixin_41192489/article/details/115140348

Tasaus

https://blog.csdn.net/weixin_41192489/article/details/140255028

CSS z-indeksi

https://blog.csdn.net/weixin_41192489/article/details/140297366

Vuorovaikutukseen liittyvät tyylit

Tasainen vierityskäyttäytyminen: tasainen

https://blog.csdn.net/weixin_41192489/article/details/121365831

venyttää kokoa

https://blog.csdn.net/weixin_41192489/article/details/121396794

Laitteen mukauttamiseen liittyvät tyylit

Mediakyselyt @media

https://blog.csdn.net/weixin_41192489/article/details/126028971

[Käytännön] Mobiilipäätelaitteiden sovitusratkaisut (kolme tyyppiä)

https://blog.csdn.net/weixin_41192489/article/details/120999355

Muokatut CSS-tyylit (CSS-muuttujat/muokatut ominaisuudet)

https://blog.csdn.net/weixin_41192489/article/details/140317369

Paranna CSS-kirjoituksen tehokkuutta

CSS-esiprosessori

CSS-esiprosessori on erikoistunut ohjelmointikieli, jota käytetään lisäämään joitain ohjelmointiominaisuuksia CSS:ään (CSS ei itsessään ole ohjelmointikieli). Selaimen yhteensopivuusongelmia ei tarvitse ottaa huomioon, koska CSS-esiprosessori lopulta kokoaa ja tulostaa vakio-CSS-tyylejä. Voit käyttää perusohjelmointitaitoja, kuten muuttujia, yksinkertaisia ​​loogisia päätelmiä ja toimintoja CSS-esiprosessorissa.

Yleisiä CSS-esiprosessoreja ovat Sass (Scss), Less ja Stylus.
(SASS on nimetty uudelleen SCSS:ksi versiosta 3.0 lähtien)

• Scss käytännön opetusohjelma
  https://blog.csdn.net/weixin_41192489/article/details/134313564

CSS-kehys

• UnoCSS:n käytännön opetusohjelma
  https://blog.csdn.net/weixin_41192489/article/details/140034188

CSS-koodauskäytännöt

• Palauta selaimen oletustyylit
• Yritä välttää tyylin käyttöä
• Yksiköt voidaan jättää pois vain, jos määritteen arvo on nolla
• Arvo on yleensä parillinen luku, kuten 6px 5px:n sijaan (etenkin rivin korkeus ja kirjasinkoko, jotta varmistetaan, että niiden ero on jaollinen kahdella, jolloin fontti on rivin keskellä)
• Luokan nimen tulee olla semanttinen, jotta voit yhdellä silmäyksellä tunnistaa, mihin elementtiin luokan nimi vaikuttaa / luokan nimen aikaansaamaan tyyliefektiin.

/* 给左侧的盒子定义的样式 */
.leftBox{
}
/* 给内部为菜单的盒子定义的样式 */
.menuBox{
}
/* 将子元素排列为一行的样式 */
.row{
   display:flex
}
/* 设置颜色为红色 */
.red{
  color:red
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Suositellut tekstityylit

• Käytä fonttikokoa: keskikokoinen tekstisäiliöille (kun selaimen oletuskokoa muutetaan, tekstiä voidaan suurentaa tai pienentää vastaavasti)
• Tekstisäiliössä oleva teksti suhteellisilla yksiköillä - prosentti tai em
• Käytä em tekstin marginaalien yksikkönä

Tehokas animaatio

CSS-animaatioiden kolme elementtiä viittaavat absoluuttiseen paikannukseen, opasiteetti-attribuuttiin ja muunnosmääritteeseen. Siksi sama animaatiotehoste saavutetaan ensin muunnosattribuutilla. Esimerkiksi elementtien liikeanimaatioissa tulisi käyttää muunnosattribuuttia marginaaliattribuutin sijaan.