Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 样式表模块化：让CSS更简洁高效
Blogger Information
Blog 6
fans 0
comment 0
visits 5583
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
样式表模块化：让CSS更简洁高效
觅小趣
Original
578 people have browsed it

文档插入样式表的三种办法

  • 外部样式表(引入）css样式表，必须放置在head文档中。
    -语法格式
    1. <head>
    2. <link rel="stylesheet" type="text/css" href="mystyle.css">
    3. </head>
  • 内部样式表：在head中使用<style></style>标签。
    1. <head>
    2. <style>
    3. hr {color:sienna;}
    4. p {margin-left:20px;}
    5. body {background-color:pink;}
    6. </style>
    7. </head>
  • 行内样式（在行内使用style属性，针对当前元素进行样式定义）
    -语法格式：<p style="color:pink;font-size:20>value</p>

CSS模块化编程

  • 尽可能的将头部、尾部等复用率较高的进行剥离

-语法格式：@import url(value)

  • 将公共样式进行分离，并创建一些独立的样式保存
  • 使用@import指定引入到指定的css标签中

选择器

简单选择器

  1. 标签选择器，返回一组
    1. li{
    2.  background-color:red;
    3. }
  2. 类选择器，返回一组,
    1. li[class="name"]{
    2.  background-color:pink;
    3. }
    可简化为
    1. .name{
    2.  backgorund-color:pink
    3. }
  3. id选择器（理论上返回一个）
    1. li[id="name"]｛
    2.  background-color:pink;
    3. ｝
    可简化为：
    1. #name{
    2.  background-color:pink;
    3. }

    上下文选择器

    因为html是一个结构化文档：每一个元素，在文档中有准确的位置，可以根据元素的上下文进行选择。
  4. 后代选择器，选中所有层级 [空格]
    1. ul li{
    2.  color:pink;
    3. }
  5. 子元素选择器：仅选择父子层元素 [>]
    1. body>ul>li{
    2.  margin-top:5px;
    3. }
  6. 同级相邻选择器（仅选中与之相邻的第一个兄弟元素）[+]
    1. .name + li {
    2.  color:pink;
    3. }
  7. 同级所有选择器（选择相邻后面的所有的兄弟元素）[~]
    1. .name ~ li {
    2.  background-color:white;
    3. }

    伪类选择器

    状态伪类|结构伪类
  8. 结构伪类-匹配任意伪类的元素，使用方法
    语法结构:nth-of-type(an+b)（an为起点，b为偏移量，n从0开始取值）

常规写法：

  1. ul li:nth-of-type(0n+5){
  2.     color:red;
  3. }

简化写法：

  1. ul li:nth-of-type(5){
  2.     color:red;
  3. }

选择所有元素的写法（使用伪类选择器,如果带上偏移量，效果大有不同）

  1. ul li:nth-of-type(1n){
  2.     color:red;
  3. }

带有偏移量的用法

  1. ul li:nth-of-type(1n+3){
  2.     color:red;
  3. }

带有偏移量的简化写法

  1. ul li:nth-of-type(n+3){
  2.     color:red;
  3. }

9.结构伪类-反向匹配任意伪类的元素，使用方法
语法结构:nth-last-of-type(an+b)（an为起点，b为偏移量，n从0开始取值）

  1. ul li:nth-last-of-type(-n+3){
  2.     color:red;
  3. }

10.结构伪类，选择所有索引为偶|奇数的子元素
偶数行：even;奇数行，odd

  1. ul li:nth-of-type(even){
  2.     color:red;
  3. }
  1. ul li:nth-of-type(odd){
  2.     color:red;
  3. }

11.结构伪类，选择第一个元素 :frist-of-type
选择最后一个 :last-of-type

$.ajax() 后期学习

12.如果只想匹配父元素里唯一子元素，使用 only-of-type实现

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post