Cara memahami prapemproses CSS, pascapemproses dan pemilih

Artikel ini membawakan anda pengetahuan yang berkaitan tentang prapemproses, pascapemproses dan pemilih dalam CSS saya harap ia akan membantu anda.

prapemproses css

prapemproses css: menambahkan beberapa pengaturcaraan pada CSS menggunakan ciri bahasa pengaturcaraan khusus, menggunakan CSS sebagai sasaran untuk menjana fail, dan kemudian pembangun hanya perlu menggunakan bahasa ini untuk kerja pengekodan.

Masalah dengan css:

• Sintaks tidak cukup berkuasa Contohnya, ia tidak boleh bersarang, yang membawa kepada keperluan untuk menulis banyak pemilih berulang dalam pembangunan modular ;

• Tiada mekanisme penggunaan semula gaya pembolehubah dan munasabah, jadi nilai atribut yang berkaitan secara logik mesti dikeluarkan berulang kali dalam bentuk literal, menjadikannya sukar untuk dikekalkan.

• Oleh itu, prapemproses diperlukan untuk menyediakan mekanisme penggunaan semula lapisan gaya yang tiada dalam CSS, mengurangkan kod berlebihan dan meningkatkan kebolehselenggaraan kod gaya.

Tiga pemproses arus perdana semasa ialah Less, Sass dan Stylus

Perbandingan Sass, LESS dan Stylus

Pemasangan
1. Pemasangan sass

Pasang pertama ruby ​​Adalah disyorkan untuk memasangnya pada pemacu C Semasa proses pemasangan, pilih "Tambahkan Ruby executable ke PATH anda"

Selepas ruby ​​​​dipasang dengan jayanya, mulakan panel kawalan Ruby Command, masukkan arahan

  gem install sass

dan tekan Enter, Sass akan dipasang secara automatik

2

Terdapat dua jenis: pemasangan sisi klien dan sisi pelayan.

a. Pelanggan

hanya perlu memuat turun fail skrip Javascript "less.js" di tapak web rasmi, dan kemudian menambah kod berikut pada HTML di mana kita perlu memperkenalkan LESS fail sumber:

<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less">
<script src="文件路径/less.js" type="text/javascript"></script>

b.

Pasang nod pertama Selepas pemasangan berjaya, mulakan panel kawalan arahan nod, masukkan arahan

dan tekan Enter, kurang akan dipasang secara automatik

  $ npm install less

3.Pemasangan Stylus

Pemasangan Stylus sangat serupa dengan pemasangan LESS pada bahagian pelayan Install Node dahulu. Masukkan arahan dalam panel kawalan Perintah Node:

Selepas menekan Enter, stylus akan dipasang secara automatik

 $ npm install stylus

Sass, LESS dan Stylus akan ditukar menjadi fail css

1.sass

Mula-mula buat fail Sass dalam projek Dalam contoh ini, namakannya "style.scss" dan letakkannya dalam gaya projek yang sepadan

Mula. Panel kawalan Perintah Ruby, cari fail Sass yang perlu diterjemahkan

, dan masukkan arahan berikut dalam direktori yang sepadan:

akan menjana fail "style.css" automatik , dan Kemas kini fail gaya CSS yang sepadan secara automatik

sass style.scss style.css
sass --watch style.scss:style.css

2 Kurang (faham)

diterjemahkan melalui arahannya sendiri dalam persekitaran Node JS yang dipasang.

Arahan di atas akan menghantar CSS yang disusun kepada stdout, anda boleh menyimpannya ke fail:

 $ lessc style.less

3.Stylus (faham)

$ lessc style.less > style.css

Stylus boleh laksana, jadi Stylus boleh menukar dirinya kepada CSS. Stylus boleh membaca output daripada "stdin" kepada "stdout", jadi Stylus boleh menterjemah fail sumber seperti ini:

Stylus juga seperti Sass, menerima terjemahan kedua-dua fail tunggal dan keseluruhan direktori. Contohnya, direktori bernama "css" akan menyusun dan mengeluarkan fail ".css" dalam direktori yang sama.

$ stylus –compress  <some.styl> some.css

Arahan berikut akan dikeluarkan kepada "./public/stylesheets":

$ stylus css

Anda juga boleh menterjemah berbilang fail pada masa yang sama:

 $ stylus css –out public/stylesheets

Jika penyemak imbas anda telah memasang Firebug, anda boleh menggunakan sambungan FireStylus.

$ stylus one.styl two.styl

$ stylus –firebug

<path>

Pemprosesan pembolehubah

Kurang: kaedah pemprosesan berubah – pemuatan malas, pengiraan semua Kurang pembolehubah, Ia adalah berdasarkan nilai yang ditentukan terakhir bagi pembolehubah ini.

Kurang

Output:

@size: 10px;.box { width: @size; } @size: 20px; 
.ball { width: @size; }

Stylus

.box { width: 20px; } .ball { width: 20px; }

Output:

size = 10px
.box
  width: sizesize = 20px
.ball
  width: size

Sass The kaedah pemprosesan pembolehubah adalah sama seperti Stylus, dan nilai pembolehubah dikira berdasarkan takrifan terkini terkini apabila keluaran. Ini sebenarnya mewakili dua konsep: Less lebih cenderung untuk menjadi deklaratif dan dekat dengan CSS, dan proses pengiraan melemahkan pemasaan panggilan manakala Sass dan Stylus lebih cenderung kepada imperatif;

.box {  width: 10px;}.ball {  width: 20px;}

Jika anda memperkenalkan perpustakaan gaya pihak ketiga dalam Less, anda boleh menukar gaya dengan mengkonfigurasi semula pembolehubah

Kelebihan: stylus dan sass kurang terdedah kepada konflik nama pembolehubah dengan berbilang pihak ketiga perpustakaan mempengaruhi, kerana pembolehubah tidak boleh mempengaruhi gaya output sebelum mentakrifkannya

css pasca-pemproses

Pautan rujukan

css pasca-pemproses memproses css dan Akhir sekali, css prapemproses dijana, yang tergolong dalam pengertian luas prapemproses css

Contoh: alat pemampatan css (clean-css), Autoprefixer (berdasarkan data sokongan penyemak imbas pada Bolehkah Saya Gunakan, pemprosesan automatik Isu keserasian)

< . hampir dengan piawaian masa hadapan Css

Kelemahan: keupayaan pemprosesan logik terhad

Contoh rangka kerja

PostCss:是一个基于JS插件的转换样式的工具。PostCSS插件可以像预处理器，它们可以优化和Autoprefix代码；可以添加未来语法；可以添加变量和逻辑；可以提供完整的网格系统；可以提供编码的快捷方式等等

优点：

• 多样化的功能插件，创建了一个生态的插件系统
• 根据你需要的特性进行模块化
• 快速编译
• 创建自己的插件，且具可访问性
• 可以像普通的CSS一样使用它
• 不依赖于任何预处理器就具备创建一个库的能力
• 可以与许多流行工具构建无缝部署

font-family

font-family用来规定元素的字体系列。

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

font-family 定义的原则：

• 通常会先进行英文字体的声明，选择最优的英文字体，这样不会影响到中文字体的选择，中文字体声明则紧随其次。
• 兼顾多操作系统，不同系统下的字体表示：

• 当使用一些非常新的字体时，要考虑向下兼容，兼顾到一些极旧的操作系统，可以使用字体族系列 serif 和sans-serif 结尾。为低级系统提供fallback方案

css选择器

参考链接

选择器

分类：基础选择器、组合选择器、属性选择器、伪类选择器和伪元素等

基础选择器：

id选择器（#footer），匹配所有id属性等于footer的元素。
类选择器（.info），匹配所有class属性中包含info的元素。
通用选择器（*），匹配任何元素。
标签选择器（E），匹配所有使用E标签的元素。
同级元素选择器（E~F ），匹配任何在E元素之后的同级F元素(CSS3)。

属性选择器:(E表示元素，attr表示属性，val表示属性的值。)

 E[attr]选择器,匹配所有具有attr属性的E元素，不考虑它的值。
 E[attr=val]匹配所有attr属性值为val的E元素。
 E[attr~=val]匹配具有attr属性且属性值用空格分隔的字符列表。
 E[attr|=val]匹配具有attr属性且属性值为用连接符（-）分隔的字符串，并以val开头的E元素。
 E[attr^="val"],属性attr的值以"val"开头的元素（CSS3）。
 E[attr$=“val”],属性attr的值以"val"结尾的元素（CSS3）。
 E[attr*="val"],属性attr的值包含"val"字符串的元素（CSS3）。

组合选择器

  多元素选择器（E, F），同时匹配多有E元素或F元素。
  后代选择器（E F），匹配所有属于E元素后代的F元素，E和F之间用空格分隔。
  子元素选择器（E > F）， 匹配所有E元素的子元素F。
  相邻选择器（E + F），匹配所有紧随E元素之后的同级元素F。

伪类选择器:

   E:link, 匹配所有未被点击的链接.
   E:visited, 匹配所有已被点击的链接。
   E:active, 匹配鼠标已经将其按下，还没释放的E元素。
   E:hover, 匹配鼠标悬停其上的E元素。
   E:focus, 匹配获得当前焦点的E元素。

结构性伪类：E:nth-child(n), 匹配其父元素的第n个子元素，第一个编号为1。

！important属性

1、用于解决IE对某些CSS规范有偏差的情况.
比如在IE中的效果总是和其他的浏览器如firefox,opera等相差2px,导致页面布局有错位， 这是因为IE对盒之间距离的解释的bug造成的，针对这种情况我们就可以利用!important来帮助解决。

.myclass{ margin-left:20px!important; margin-left:40px;}

只有当同时出现两个同名的样式时，才可以这样用，此时IE浏览器是识别的
2、如果有定义了一个样式A，比如font-size,你不打算让以后也叫样式A的覆盖掉这个font-size,也可以用 !important . 而如果新样式也用了!important 则还是会强制覆盖掉

.A{ font-size:12px !important;}.A{ font-size:14px;   //不会生效
}.A{ font-size:14px !important; //生效
}

优先级

！important >id选择器>class、属性、伪类选择器>标签选择器

权值越大优先级越高，权值相同，后定义的优先级较高，

浏览器查找元素是从右到左查找的，好处是为了快速过滤掉一些无关紧要的样式规则和元素

例如：p#pBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class=’red’的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为pBox的p元素，如果都存在则匹配上。

属性继承

CSS属性继承：外层元素的样式，会被内层元素进行继承。多个外层元素的样式，最终都会“叠加”到内层元素上。

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

CSS文本属性都会被继承的：
color、 font-size、font-family、font-style、 font-weight
text-align、text-decoration、text-indent、letter-spacing、line-height
提示：中的CSS属性，会被所有的子元素继承。

优先级就近原则，同权重的情况下样式定义最近者为标准，载入样式以最后载入的定位为准

ID选择器和Class选择器的区别

ID选择器：每个元素只能有一个ID，每个页面只能有一个元素使用该ID

class选择器：多个元素可以共用相同类，一个元素可以有多个类

Prinsip gambar sprite

Prinsip: Gabungkan ikon kecil menjadi satu gambar besar, dan tetapkan imej latar belakang kepada css awam elemen sebagai gambar komposit, supaya setiap elemen akan berdasarkan ini Imej komposit ialah latar belakang, dan halaman hanya memuatkan satu imej komposit, dan kemudian memperhalusi kedudukan latar belakang setiap elemen secara individu. Gabungkan berbilang permintaan menjadi satu.

kedudukan latar belakang

Tetapkan kedudukan permulaan imej latar belakang.

Atribut kedudukan latar belakang menetapkan kedudukan imej asal latar belakang (ditakrifkan oleh imej latar belakang), yang bermaksud bahawa prasyarat untuk menggunakan atribut ini ialah imej latar belakang imej asal latar belakang mesti ditetapkan.

Nilai atribut kedudukan latar belakang:

• Nilai arah: arah paksi-x: kiri | arah paksi-y: tengah atas| 🎜> Gunakan peratusan untuk menetapkan nilai atribut dan tentukan kedudukan permulaan imej dengan mengambil panjang dan lebar bekasnya sendiri tolak panjang dan lebar imej didarab dengan peratusan.
• Nilai:

Atas ialah kandungan terperinci Cara memahami prapemproses CSS, pascapemproses dan pemilih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!