前端之CSS

css简介

CascadingStyleSheets 的简称，层叠样式表

给HTML标签修改样式

语法结构

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

注释语法

/*注释内容*/ 

/*
单独开设的css文件内代码也是非常多的 可以借助于注释管理   
    /*导航条样式*/   
    /*侧边栏样式*/
*/

引入方式

1.style内部直接编写css代码
    平时学习、练习的时候推荐使用
2.link标签引入外部css文件
    正式工作、实际生产环境推荐使用
3.标签内直接书写
    一般情况下不推荐使用 容易造成荣誉现象

1、基本选择器(重要)

css是用来调节标签样式的那为什么需要学选择器呢?
因为同一个页面上有很多相似的标签并且这些标签在不同的位置有不同的样式所以为了能够区分我们肯定先需要学习如何查找指定的标签

标签选择器>>>:通过标签名直接查找

/*查找所有的div标签*/
div {  
    color: red;
}

类选择器(关键符号为句点符.)>>>:通过class值查找标签

/*查找所有含有c1样式类的标签*/
.c1 {
    color: red;
}

id选择器(关键符号为警号#)>>>:通过id值查找标签

/*查找id为d1的标签*/
#d1 {
    color: orange;
}

通用选择器(了解)

/*body内所有的标签*/
* {
    color: darkgray;
}

2、组合选择器(重点)

前言：

<!--
为了区分嵌套标签之间的关系 我们发明了一种称呼
    <div>
        <p>
            <span></span>
        </p>
    </div>
span是p的儿子 是div的孙子也可以说是div的后代
p是div的儿子也是div后代 是span的父亲
div是p的父亲是span的爷爷 也可以说是他们的祖先
-->

1.后代选择器(特征为空格)

/*查找div内部所有的后代span*/
div span {  
    color: red;
}

2.儿子选择器(特征为 > 号)

/*查找div内部所有的儿子span*/
div > span { 
    color: greenyellow;
}

3.毗邻选择器(特征为+)

/*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/
div + span {  
    color: pink;
}

4.弟弟选择器(特征为~)

/*查找同级别下面所有的span(不需要紧挨着)*/
div ~ span {  
    color: deeppink;
}

3、属性选择器

# 标签可以有默认的属性也可以自定义属性
    <p id="d1" class="c1" name="jason" pwd="123">123</p>
 

[name] {  /*查找含有name属性名的标签*/
            color: red;
        }

[name='jason'] {  /*查找含有name属性名并且值为jason的*/
            color: red;
        }

p[name='jason'] {  /*查找含有name属性名并且值为jason的p*/
            color: red;
        }

4、分组与嵌套

# 多个相同选择器并列使用
div,span,p {  /*查找div或者span或者p*/
            color: red;
        }
# 多个不同选择器并列使用
div,#d1,.c1 {  /*标签查找div id查找d1 类查找c1*/
            color: red;
        }
# 不并列同样可以使用组合选择器
.c1 p {   /*查找class为c1的后代p标签*/
            color: red;
        }
# 直接筛选
    div#d1 {  /*查找id为d1的div标签*/
    color: red;
  }
  div.c1 {  /查找class为c1的div标签/
    color: red;
  }
"""
练习题
    #d1>div>.c1>span.c2
    查找id为d1的标签内部的儿子div
    并且在儿子div内部查找class为c1的儿子标签
    并且在该儿子内部查找class为c2的儿子span
"""

5、伪类选择器

a 标签的伪类选择器

/*鼠标悬浮在上面*/
a:hover {   # 重点掌握 很多网址都在用!!!
            color: orange;
        }
/* a标签默认的颜色会变化 第一次是蓝色 后面是紫色 */

input 标签的伪类选择器

input:focus {
            background-color: red;
        }
/* 我们将input框被用户点击即将录入数据的过程看成是focus状态(聚焦状态) */

p 标签的伪类选择器

/* 首字调整>>>:也是一种文档布局的方式 */
p:first-letter {
            font-size: 48px;  /*字体大小*/
            color: red;
        }
/* 在文本的前面通过css动态渲染文本>>>:特殊文本无法选中 */
p:before {
            content: '嘿嘿';
            color: red;
        }
<p>::before言而有信 品行端正 光明磊落 待人以诚</p>
/* 在文本的后面通过css动态渲染文本>>>:特殊文本无法选中 */
p:after {
            content: '呵呵';
            color: greenyellow;
        }
<p>言而有信 品行端正 光明磊落 待人以诚::after</p>

/*
以后我们在编写爬虫程序爬取页面内容的时候如果没有正常文本
那么可能是因为伪元素选择器的问题
*/

4、选择器的优先级

我们学习了三种css引入方式并且学习了很多选择器
那么如果出现多个选择器修改同一个标签样式会优先参考谁的

顺序：标签选择器 --> 类选择器 --> id选择器 --> 行内选择器

# 相同选择器不同导入方式
    选择器系统遵循就进原则 从上往下谁离标签更近谁说了算
# 不同选择器不遵循就近原则>>>:优先级
    行内选择器 > id选择器 > 类选择器 > 标签选择器

5、字体相关

1.宽和高
    只有块儿级标签可以设置 行内标签无法设置
    p {
            height: 1000px;
            width: 50px;
        }
2.字体大小
    font-size: 99px;  # 字体大小一般有固定的大小参考(肉眼适应)
3.粗细
    font-weight: bolder;  
  font-weight: lighter;
4.文本颜色
    color:red;  # 第一种
  color:#4e4e4e;  # 第二种
  color:rgb(88,88,88)  # 第三种
                rgba(88,88,88,0.2)  # 最后一个参数调整透明度(0-1)
5.文字对齐
    text-align: center;  # 居中展示
6.文字装饰(很常用!!!)
    text-decoration: none;  # 主要用于去除a标签默认的下划线
7.首行缩进
    text-indent: 32px;  # 默认文字大小是16px

6、背景属性

  # 背景颜色
background-image: url('url');  # 背景图片
background-repeat: no-repeat;  # 是否铺满
background-position:左右 上下;  # 图片位置
"""多个属性名前缀相同 那么可以简写"""
background:orange url('url');  # 一个个编写即可 不写就默认
  
# 如何实时修改图片位置
    浏览器找到标签的css代码 然后方向键上下按住即可动态调整

7、边框属性

p {
    /*border-left-color: red;*/
    /*border-left-style: solid;*/
    /*border-left-width: 3px;*/
    /*多个属性有相同的前缀  一般都可以简写*/
    /*border-left: 5px red  solid;   !*没有顺序*!*/
    /*border-top:orange 10px dotted;*/
    /*border-right: black dashed 5px;*/
    /*border-bottom: deeppink 8px solid;*/
    /*多个属性有相同的前缀  一般都可以简写*/
    border: 5px red solid;  /*上下左右一致*/
}
div {
    height: 500px;
    width: 500px;
    border: 5px solid red;
    /*画圆*/
    border-radius: 50%;
}

8、display 属性

可以通过它来改变行内以及块儿标签的特性

div {
    display: inline;  /*行内*/
}

span {
    /*display: block;  !*块级*!*/
    display: none;
    /*
    隐藏标签 页面上看不见也不再占用页面位置
    但是通过浏览器查找标签是可以看到的
    到后面学习django会讲跨站请求伪造(钓鱼网站)
    */
}

p {
    display: inline-block;
    /*
    具备块级标签可以修改长宽的特性
    也具备行内标标签文本多大就占多大的特性
    */
}

9、盒子模型

"""
以快递盒为例
    1.快递盒与快递盒之间的距离          外边距(标签之间的距离)
    2.快递盒的厚度                                边框
    3.内部物品到盒子的距离                 内边距(文本内容到边框的距离)
    4.物品本身的大小                            文本大小
"""
# body标签默认自带8px的外边距 在编写的时候应该提前去掉
     body {
            margin: 0;
        }
1.外边距(标签之间的距离)
    margin简写
    margin:0px;  # 上下左右都一致
    margin:10px 10px;  # 第一个控制上下 第二个控制左右
    margin:20px 10px 20px;  # 上 左右 下
    margin:10px 2px 3px 5px;  # 上 右 下 左
2.内边距(文本内容到边框的距离)
    padding简写
    padding:0px;  # 上下左右都一致
    padding:10px 10px;  # 第一个控制上下 第二个控制左右
    padding:20px 10px 20px;  # 上 左右 下
    padding:10px 2px 3px 5px;  # 上 右 下 左