Day51--CSS--01

1.CSS

层叠样式表:就是给HTML标签添加样式的，让它变的更加的好看

# 注释
/*单行注释*/

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

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


# css的语法结构
选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

# css的三种引入方式
    1.style标签内部直接书写(为了教学演示方便我们用第一种)
    <style>
        h1  {
            color: burlywood;
        }
    </style>
    
    2.link标签引入外部css文件(最正规的方式 解耦合)
        <link rel="stylesheet" href="mycss.css">
        
    3.行内式(在标签内设置style属性，一般不用)
        <h1 style="color: green">老板好 要上课吗?</h1>

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

2.CSS选择器

1.基本选择器

# id选择器 （常用）
格式：
    <style>
        '#' + id值 +{属性1:值1}
    </style>
    
# 示例
<style>
    /*id选择器*/  
    #d1 {  
            color: greenyellow;
        }    #  找到id是d1的标签 将文本颜色变成绿黄色 
</style>

# 类选择器 （常用）
格式：
    <style>
    	'.' + 类名 +{属性1:值1}
    </style>
    
# 示例
<style>
    .c1 {  
            color: red;
        }  #  找到class值里面包含c1的标签 
</style>

注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。

# 元素/标签选择器  （不常用，因为不可能把所有元素都弄成同一个样式）
格式：
    <style>
    	标签名 +{属性1:值1}
    </style>
    
# 示例
<style>
    span {  
            color: red;
        }  # 找到所有的span标签 
</style>


# 通用选择器
格式：
    <style>
    	'*' +{属性1:值1}
    </style>
    
# 示例
<style>
    * {  
            color: green;
        }  #  将html页面上所有的标签全部找到
</style>

2.组合选择器

"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
    <div>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;*/
        /*}*/

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

3.属性选择器

"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的

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

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

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

总结

"""
1.form表单所有相关的标签都需要掌握
2.后端框架稍微了解一下 激发兴趣
3.选择器练习一下
"""

作业

今日作业
必做题
1.form表单所有知识点自己敲一遍并截图添加注释保存到手机
2.用html搭建一个注册页面
3.自己演示操作css各种选择器
选做题
1.用web框架体验一下form表单提交数据，完成前后端数据交互