前端之CSS

form表单的补充

# 获取用户输入的两大重要属性
1.name属性 和 value属性
form表单在朝后端发送数据的时候，标签必须要有name属性，否则发送不出去该标签

# label标签  input标签需要和label标签配合使用
<label for="某个input标签的id值"></label>

# placeholder标签 获取用户输入的input标签也可以添加背景提示
<input type= 'text' name='用户名' placeholder='请输入用户名'>

# 获取用户输入的标签如果不是让用户自己写而是选择，那么需要设置value值
<input type='radio' name='gender' value='male'>男
<input type='checkbox' name='hobby' value='badminton'>羽毛球
<select name='provinces' id=''>
    <option value='shanghai'>上海</option>
</select>

# 针对checkbox和radio可以默认选中
checked='checked' 如果属性名和属性值相等 那么可以简写成 checked

# 针对option标签 也可以默认选择
selected='selected' 也可以简写成 selected

css层叠样式表

调整标签的样式
语法结构：选择器 {属性名：属性值；属性名2：属性值}

注释语法：/*注释内容*/

三种编写css的方式：
1.head内style标签内部直接编写 （学习阶段使用）
2.head内link标签引入外部css文件 （最正规的写法）
3.body标签内部直接通过style属性编写 （不推荐）

选择器的查找

css基本选择器

css的四种查找基本选择器的方式：
# 1.标签选择器：直接通过编写标签名来查找标签
div{
 color ：green
}  * 查找所有的div标签并设置内部文本颜色为绿色

# 2.类选择器：通过class的值来选择标签
.c{
   color : red;
} * 查找所有类值为c的标签设置文本颜色为红色

# 3.id选择器：通过编写id值来精准查找标签
  #d1{
  color ：yellow；
  } * 查找id为d1标签并设置文本颜色为黄色

# 4.通用选择器：所有标签都可以查找到 （不推荐使用！）
  *{
  color : greenyellow;
  } 

CSS组合选择器（很重要！！！）

先看一下组合选择器的结构
    <p></p>
     <span>div上面的span</span>
      <div id="d1">
	   <span>div里面的span</span>
         <p>
          <span>div里面的span</span>
          </p>
      </div>
      <span>div下面的span</span>
      <p></p>
      

组合选择器的四种查找方式

# 1.查找div标签内部的所有span标签(后代)
 后代选择器：两个选择器之间用空格隔开，查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签（可以选择嵌套的任意层级）
 #d1 span{
   color : red;
 }
 
# 2.查找div内部所有的儿子span
 子代选择器：(只可以选择嵌套的第一层标签)两个选择器之间用大于号隔开，查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签
 #d1>span{
   color : yellow
 }

# 3.查找div同层级下面紧挨着的第一个span标签
 毗邻选择器：紧挨着的选择器，上面的是哥哥，下面的是弟弟
 #d1+span{
   color ：aqua;
 }
 
# 4.查找div同层级的所有span标签（所有弟弟）
  弟弟选择器
  #d1~span{
     color ： red；
  }

css属性选择器

 所有的标签除了有自己默认的属性外还可以自定义属性
 1.查找属性含有name的标签
 [name] {
  background_color :red;
 }
 2.查找属性名是name并且属性值是username的标签
 [name ='username'] {
  background_color : red;
 }
 3.查找input标签，并且属性名含有name值是username的标签
 input[name='username']{
  background_color : red;
 }
 前面的选择器可以是任意类型的，标签，id，class等

css选择器之分组与嵌套

1.当多个选择器查找的标签需要选择相同的样式，那么可合并，合并的选择器没有类型的限制也不会互相干扰
eg：
   div，p，.span{
   color ：red；
   }

eg：
    #d1,.cl{
    color ：red
    }
还可以在选择器的基础之上添加额外的选择使查找更精准
span.cl
div#d1

css选择器之伪类选择器

a标签的默认颜色有两种，蓝色和黑色
蓝色：连接地址被点过
黑色：连接地址未被点过

a:hover{
  color ：blue；
}
鼠标悬浮上去之后改变样式，适用于所有的文本标签

css选择器之伪元素选择器

伪元素：表示页面中一些特殊的并不真实存在的元素。(特殊的位置)
通过css代码来操作标签的文本内容
p:first_letter{  # 让标签的文本首字母大写
  font_size : 100px;
  color : red
}
p：before{
  content ：content
  color ：red
  
}
p:after{
  content :content;
  color : black
}
伪元素可以用作解决标签浮动带来的负面影响，也可以用作数据的防爬
注意：
伪对象要配合content属性一起使用
伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
伪对象的特效通常要使用:hover伪类样式来激活

伪类与为元素的区别

1.伪类是为了弥补常规css选择器的不足，以获取到更多的信息
2.伪元素是创造了一个有内容的虚拟容器
3.可以同时使用多个伪类，只能使用一个伪元素
4.伪类：用于向某些选择器添加特殊的效果
5.伪元素：用于将特殊的效果添加到某些选择器（标签）

css选择器优先级

# 当多个选择器查找到相同的标签修改不同的样式时，那么如何判断优先级？
1.选择器相同，引入位置不同 
   就近原则
   
2.选择器不同的情况下：
  行内>id选择器>类选择器>标签选择器

强制修改css标签样式的操作

关键字：!important
!important作用是提高指定CSS样式规则的应用优先权。
语法格式{ css样式 !important }，即写在定义的最后面，
例如：.cl{
    color:red !important;
      }
该样式声明具有最高优先级

css字体样式

1.width属性，为元素设置高度
2.height属性，为元素设置高度
ps：块级标签才是设置宽度，行内标签的宽度由内容来决定
p{
  width ：100px
  height ：50px
}

字体大小和文字样式
p{
 font_size:16px
 font_family:'微软雅黑'
}

字重（字体的粗细）
p{
 font_weight ：lighter #细
 font_weight ：bolder #粗
}

文本颜色
p{
  color : red；
  color ：rgb(); 三原色
  color : #00FFFFFF; 十六进制
  color ：rgba（）调节颜色透明度
}

文本对齐方式
p{
 text_align ：center
 
}

文字装饰（很重要！！）

主要记住去掉a标签的下划线
p{
   text_decoration：none
   text_decoration ：underline （给文字加下划线）
}  

默认首行缩进
 p{
  text_indent ：32px （）p标签默认字体缩进16px
 }

背景属性

1.背景颜色
 background_color 
2.背景图片
 background_img:url(可以是网址也可以是本地图片)
 
 
背景重复：
 repeat（默认）：背景图片平铺满整个页面
 repeat_x ：背景图片只在水平方向向上平铺
 repeat_y：背景图片只在垂直方向向上平铺
 no_repeat : 背景图片不平铺

当多个属性的前缀名是一样的时候，可以简写，只写一个前缀名，后面用逗号隔开需要写入的参数即可
eg： background ： color,repeat,img:url() 等等

边框属性border
p{
 border_lift_color :red 设置左边边框为红色
 
}
还可以设置圆形的边框
border_radius 
p{
 width : 10px;   宽和高要一样才能做成圆形
 heigth : 10px;
 border_radius:50%
 
}

display隐藏标签(多用于钓鱼网站盗取用户余额)
p{
 <p><input type='text' style='display:none' name='username' value='j'></p>
}
display ：None