博客列表 >样式表模块化:让CSS更简洁高效

样式表模块化:让CSS更简洁高效

觅小趣
觅小趣原创
2021年01月03日 15:47:39580浏览

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

  • 外部样式表(引入)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;
    可简化为:
    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实现

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议