前端 day 03 伪类、伪元素选择器，CSS相关

5.13

昨日回顾

• 表格标签

  <table>
      <thead>
          <tr>
              <th>加粗文本</th
          </tr>
      </thead>
      <tbody>
          <tr>
          	<td>表单里的用数据即可</td>
          </tr>
      </tbody>
  </table>
  

  table有一个border属性可以加边框，针对tr可以设置rowspan，colspan，合并单元格

• form表单

  能够获取用户数据发送给后端

  <form action='' method='' enctype=''></form>
  <!-- action:
  不写action默认向当前地址提交
  写全路径
  写 /index/，发送给当前地址+后缀，能够偶自动补全当前页面所在的后端服务器和端口
  -->
  <!--
  method:请求方式，默认是get，可以改成post
  -->
  <!--
  enctype 默认是urlencoded，只能发送文本
  如果要发送文件，要改成formdata
  发送文件必须要修改的两个参数：method改为post，enctype改为formdata
  -->
  

• input获取用户输入

  用于获取用户数据，包括用户输入、选择、上传

  可以改type把input变成其他类型

• input的type类型

  • text 输入普通文本
  • password 展示密文
  • date 日期
  • radio 单选：默认选择可以加 checked
  • checkbox：默认选择可以加 checked
  • file：获取本地的文件，加multiple可以上传多个文件
  • submit：触发form表单提交动作
  • button：什么功能都没有，一个普通的按钮
  • reset：重置按钮

• 触发form表单的两种方式

  触发提交的真正的按钮只有2种: input[type=submit], <button></button>
  

• select标签

  下拉框选择，默认是单选，可以加multiple变成多选

  下拉框选项里面是一个个option标签，加selected默认选择

  <select>
      <option value="111">111</option>
      <option value="222">222</option>
      <option value="333" selected>333</option>
  </select>
  

• textarea

  获取大段文本内容，个性签名，论坛评论

• lable标签

  给input框加上注释信息，不写其实也没事

  input写在lable里面，或着给lable的for属性关联input的id值

• placeholder：给输入框加一个默认的提示

• 补充小点

  获取用户数据的标签都应该有 name 属性，作为给后端发送数据的数据名，相当于字典的key，输入的数据相当于value

  需要用户选择的标签，需要自己加value值，作为给后端传数据的value

  如果给用户输入的标签加value值，就类似于直接加了默认值

• flask框架

  后端框架

• CSS

  /*注释*/由于前端代码比较多，所以一般会用注释来帮助维护代码

  语法结构：选择器

• CSS选择器

  emmt插件：p# d1 .ci 快捷键输入一个id为d1，类为c1的p标签

  基本选择器

  1. id选择器井号 #
  2. 类选择器点 .
  3. 标签选择器 标签名
  4. 通用选择器 *

  组合选择器

  我们将前端标签的嵌套定义为父亲，儿子，后代，兄弟等

  1. 后代选择器：拿到内部所有的标签

     div p {} 只要div内部的p都拿到
     

  2. 儿子选择器：拿到内部第一层的p

     div>p {} div内部第一层的p
     

  3. 毗邻选择器：拿到紧挨着的下一个

     div+p {}
     

  4. 弟弟选择器：同级别下所有的p

     div~p {} 同级别下所有的p
     

  属性选择器

  1. [属性名] {} ：含有属性名的标签
  2. [属性名=属性值] {}：含有属性名，属性名是属性值的所有标签
  3. input[属性名=属性值] {}：含有属性名，属性名是属性值的所有input标签

• 标签也可以有自定义的属性并且支持多个

今日内容

• 分组与嵌套
• 伪类选择器
• 伪元素选择器
• 选择器优先级
• CSS属性相关，操作标签样式

分组与嵌套

想要给多个标签添加一样的样式的方法

在CSS中用逗号分割开（空格表示后代，逗号表示并列），不同的选择器可以相互混用

/*在CSS中用逗号分割开并列关系*/
div,p,span {
	color:yellow;
}
#d1,.c1,span {
    color:red;
}

伪类选择器

/*给a标签各个状态设置颜色*/
a:link { /*访问之前的状态*/
	color:red;
}
a:hover { /* 鼠标悬浮态*/
	color:aqua;
}
a:active { /*激活态*/
    color:black;
}
a:visited { /*访问之后的状态*/
    color:darkgrey;
}

input:focus { /*输入框获取焦点：鼠标选中*/
	background-color:red;
}

重点掌握：hover，focus

伪元素选择器

/*给p标签的第一个字调大变色*/
p:first-letter {
	font-size:40px;
	color:orange;
}
/*通过css，在p标签的最开始添加内容，这个内容无法选中*/
p:before {
    content:'yes!';
    color:blue;
}
/*也可以在最后面添加*/
p:before {
    content:'no!';
    color:blue;
}
/*befor和after多是用来清除浮动带来的问题：父标签他先*/

选择器优先级

1. 选择器相同，书写顺序不同，选择的规则：就近原则，谁离标签近就是谁的属性

   html加载的顺序是从上往下加载的，所以下面的样式会覆盖掉上面的样式

2. 选择器不同，行内选择器 > id > 类 > 标签，总结就是：匹配越精确优先级越高

   <p id='d1' class='c1' style='color:blue;'>111</p>
   

   #d1 {
   	color:aqua;
   }
   .c1 {
   	color:orange;
   }
   p {
   	color:red;
   }
   

CSS属性相关

长宽设置

width，height

/*块级标签可以设置长宽，width，height*/
p,div {
	background-color: red;
	height:200px;
	width:400px;
}
span {
	background-color: green;
}

字体属性

font-family设置字体，

p,span {
	font-family: AmpleSoundTab,'...'; 
    /*第一个无法使用会用后面的*/
    font-size: 24px; /*字体大小*/
    font-weight: bolder; /*字体粗细*/
    /*inherit 继承父元素的粗细值*/
    /*color: #EEEEEE;*/
    /*可以直接写颜色英文，或着颜色编号，或着
    rgb(255,255,255);*/
    rgba(200,1,22,45,0.4) /*第四个参数是颜色的透明度，0~1，数字越大颜色越深*/
}

pycharm提供了取色器，微信截图，qq截图也能取色

文字属性

p {
	text-align: center; /*居中*/
	text-align: justify; /*两段对齐*/
	text-decoration: line-through; /*删除线*/
    font-size:16px;
    text-indent: 32px; /*缩进32px*/
}
a {
    text-decoration: none; /*主要用于a标签去除自带的下划线*/
}

背景属性

#d1 { /*设置颜色*/
	height:400px;
	width:200px;
	background-color: red;
	}
#d2 { /*设置背景图片*/
    /* 默认全部铺满，多出的截取*/
    background-image: url("封面.jpg");
    /*设置不平铺*/
    background-repeat:no-repeat;
    /*浏览器上不是一个平面的结构，有z轴，z轴越大离用户越近*/
    /*可以设计在哪个方向上平铺：repeat-x / repeat-y*/
    /* 背景图片默认是在div的(0,0)位置，可以调背景图片在div中的位置*/
    background-position: center center;
    
    /* 如果出现了多个属性名前缀是一样的，看可以简写，只写前缀*/
    background: red url("封面.jpg") no-repeat center center;
    /* 空格隔开，位置可以随便写*/
}

background-attachment: fixed;

边框

p {
    background-color: gold;
    /*设置整个边框，四边的宽度，类型，颜色*/
    border-width: 2px;
    border-style: solid;
    border-color: black;
    /* 也可以给每一个边设置不同的边框*/
    /*top，left，right，bottom*/
    border-top-width: 5px;
    border-top-style: dotted;
    border-top-color: pink;
}
/* 前缀一样，同样可以简写*/
/* 用边框画一个圆，指定radius，长宽一致就是圆，不一致就是椭圆*/
p{
    border: 3px solid red;
    width:100px;
    height:100px;
    border-radius: 50%;
}

display属性

block，inline，inline-block

<div id='d1'>01</div>
<div id='d2'>02</div>

#d1 {
	display: none; /*隐藏标签不展示，并且原来的位置也让出来*/
    display: inline; /*将标签设置为行内标签的属性，在一行显示，没法修改长宽*/
    display: block; /*将标签设置成块级标签的特点*/
    
    display:inline-block; /*既可以一行显示，又可以设置长宽*/
    
    height: 100px;
    width: 100px;
    background-color: red;
}
#d2 {
	display: none; /*隐藏标签不展示，并且原来的位置也让出来*/
    height: 100px;
    width: 100px;
    background-color: red;
}

display:none; 和 visibility:hidden; 的区别

响应式布局

马上要研究的知识点

盒子模型

以快递盒为例：

• 盒子与盒子之间的距离：标签与标签的距离：margin 外边距
• 盒子的厚度：标签的边框 border
• 盒子里面的物体到盒子之间的距离：内容到边框的距离 padding 内边距
• 物体的大小：内容 content

margin

可以通过调节margin，调标签之间的距离

浏览器会自带8px的margin，内容并不会紧贴着浏览器，所以在写页面的时候会先将body的margin去除

body {
	margin: 0;
}

margin写不同个数参数

div{
    margin: 10px 20px;
    /* 上下10，左右20*/
    margin: 10px 20 px 30px;
    /* 上10 左右20 下30*/
    margin: 10px 20 px 30px 40px;
    /* 上10 右20 下30 左40*/
}

两个标签都有margin，则取最大的margin，不会叠加啊

auto 标签水平居中

/*让标签左右居中，竖直方向没有用*/
div {
	margin 0 auto;
}

padding

内边距，标签内的元素的布局，

div{
    padding: 0;
    /* 上下左右无内边距*/
    padding: 10px 20px;
    /* 上下10，左右20*/
    padding: 10px 20 px 30px;
    /* 上10 左右20 下30*/
    padding: 10px 20 px 30px 40px;
    /* 上10 右20 下30 左40*/
}

浮动

float，让元素脱离底层的平面。浮动的元素没有块级一说，设置float之后，本身多大，就要占多大，不会再占一行

只要涉及到布局，一般都用浮动

<div id='d1'></div>
<div id='d2'></div>

body{
	margin:0;
	padding:0;
}
#d1{
	width: 100px;
	height: 100px;
	background-color: red;
}
#d2{
	width: 100px;
	height: 100px;
	background-color: yellow;
}

块级标签会独占一行，如果想让两个div在一行，可以设置浮动：float:left

#d1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left; /*左浮动，向左*/
}
#d2{
    width: 100px;
    height: 100px;
    background-color: yellow;
    float: right; /*右浮动，靠右*/
}
/* 效果：d1在左边，d2在右边。*/

例子：博客页面，左边是固定的，放链接可以跳转，右边是上下可以翻动的文章