【2020Python修炼记】前端开发之 CSS基础和CSS选择器

【目录】

一、CSS基础

1、什么是CSS3，如何学习？

2、CSS的注释方法

3、CSS语法结构

4、CSS的三种引入方式

二、CSS选择器

1、基本选择器

2、组合选择器

3、属性选择器

 

一、CSS基础

1、什么是CSS3，如何学习？

CSS3 就是 CSS（Cascading Style Sheet ）语言，也属于标记语言，数字3 是该语言的版本号；

CSS语言开发的文件后缀名是 .CSS，通过在HTML文件中引入该 CSS文件 来控制HTML代码的样式（CSS 也可直接写在HTML文件中）。

如何学习CSS？

  

css的学习流程
    1.先学如何查找标签
        css查找标签的方式你一定要学会
        因为后面所有的框架封装的查找语句都是基于css来的
        css选择器很简单很好学不要有压力!!!
    
    2.之后再学如何添加样式

 

2、CSS的注释方法

/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...

 

3、CSS语法结构

选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

 

4、CSS的三种引入方式（书写方式）

1.style标签内部直接书写
    <style>
        h1  {
            color: burlywood;
        }
    </style>
2.link标签引入外部css文件(最正规的方式 解耦合)
      <link rel="stylesheet" href="mycss.css">

3.行内式(一般不用)
      <h1 style="color: green">老板好 要上课吗?</h1>

 

二、CSS选择器

1、基本分类 以及 语法格式

/* 基本选择器 */
/* 
# id选择器

# 类选择器

# 元素/标签选择器

# 通用选择器 */

<style>
        /* id选择器*/ 
        /* !*找到id是d1的标签 将文本颜色变成绿黄色*! */
        #d1 {  
           color: greenyellow;
        }
        
        /* 类选择器 */
        /* !*找到class值里面包含c1的标签*! */
        .c1 {  
           color: red;
        }

        /* 元素(标签)选择器 */
        /* !*找到所有的span标签*! */
        span { 
           color: red;
        }

        /*通用选择器*/
        /* !*将html页面上所有的标签全部找到*!  */        
        *{  
           color: green;
        }

</style>

 

2、组合选择器 

/* 在前端 我们将标签的嵌套用亲戚关系来表述层级 */

<div>
    <p>div p</p>
    <p>div p
        <span>div p span</span>
    </p>
    <span>span</span>
    <span>span</span>
</div>

  /* div里面的p span都是div的后代
  p是div的儿子
  p里面的span是p的儿子 是div的孙子
  div是p的父亲
  ...
 */

/* 组合选择器分类：

# 后代选择器
# 儿子选择器
# 毗邻选择器
# 弟弟选择器 */

/*后代选择器*/
div span {
   color: red;
}

/*儿子选择器*/
div>span {
   color: red;
}

/*毗邻选择器*/
/* !*同级别紧挨着的下面的第一个*! */
div+span {  
   color: aqua;
}

/*弟弟选择器*/
/*同级别下面所有的span*/
div~span {  
    color: red;
}

 

3、属性选择器 

/* 属性选择器 */
/* 
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签

# 属性选择器是以[]作为标志的 */

/* !*将所有含有属性名是username的标签背景色改为红色*! */
[username] {
    background-color: red;
}

/* !*找到所有属性名是username并且属性值是jason的标签*! */
[username='jason'] {  
    background-color: orange;
}

/* !*找到所有属性名是username并且属性值是jason的input标签*! */
input[username='jason'] { 
    background-color: wheat;
}

 

 

参考阅读：

https://www.cnblogs.com/xiaoyuanqujing/articles/11669933.html

https://www.cnblogs.com/xiaoyuanqujing/articles/11669943.html

 

原文链接:https://www.cnblogs.com/bigorangecc/p/12875183.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有