前端知识——CSS

表单标签知识补充

1. 获取用户输入的标签(input)的两大重要属性

   • name属性
     相当于字典里的健
   • value属性
     相当于字典里的值

   强调:form表单在往后端发送数据的时候，必须要有name属性，否则后端不知道你发送的是什么属性，所以也就不会发送该标签的值。

2. 获取用户输入的标签理论上是需要label的配合的

   <p>
     <label for="">
       <input type="text">
     </label>
   </p>
   

3. 获取用户输入的input标签也可以给name属性添加提示

   <p>
   	<input type="text" name="password" placeholder="密码">
   </p>
   

4. 获取用户输入的标签如果不是用户自己选择的，那我们要提前写好value值

     <p>gender:
       <input type="radio" name="gender" value="male" checked>男
       <input type="radio" name="gender" value="female">女
     </p>
   

5. 针对radio和checkbox可以默认选中

   checked="checked" 如果属性名和属性值相等 那么可以简写  checked
   

6. 针对option标签也可以默认选中

   selected = 'selected' 格式可以简写为selected
   

CSS层叠样式表

简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

语言特征

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

总体来说，CSS具有以下特点：

• 丰富的样式定义
• 易于使用和修改
• 多页面应用
• 层叠
• 页面压缩

语言结构

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

注释语法

/*注释内容*/

编写CSS的三种方式

1. head中style标签内部直接编写(学习阶段使用 方便)
2. head中link标签引入外部css文件(最正规)
3. 直接在标签内部通过style属性编写(不推荐)

CSS选择器

CSS基本选择器

1. 标签选择器(范围查找)
   直接编写标签名来查找标签

   div {
   	color: red  /*查找所有的div标签 并将内部的文本颜色变为红色*/
   }
   

2. 类选择器(范围查找)
   通过编写class的值来查找

   .c {
   	color: red  /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/
   }
   

3. id选择器(精确查找)
   通过编写id的值来精确的查找到标签

   #d1 {
   	color: red  /*查找id值是d1的标签 并将内部的文本颜色改为红色*/
   }
   

4. 通用选择器
   查找所有的标签

   * {
   	color: red  /*查找所有的标签 并将内部的文本颜色改为红色*/
   }
   

CSS组合选择器

预备知识：

标签之间的关系

<div>div1
<div>div2
	<p>p1</p>
</div>
<p>p2
	<span>span1</span>
</p>
<span>span2</span>
</div>

通过嵌套层级分析关系：

1. 对于div1来说div2、p2、span2都是儿子
2. 对于div2、p2、span2来说div1就是父亲
3. 对于p1来说div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
4. 对于span2来说div2、p2是哥哥 span2是弟弟
5. div1内部所有的标签无论层级都可以称之为是div1的后代

• 后代选择器(关键字是空格)

  #d1 span{
  	color: red  /*查找id是d1标签内部所有的后代span*/
  }
  

• 儿子选择器(关键字是大于符)

  #d1 > span{
  	color: red  /*查找id是d1标签内部所有的儿子span*/
  }
  

• 毗邻选择器(关键字是加号)

  #d1 + p{
  	color: red  /*查找id是d1标签同级别下面紧挨着第一个p标签*/
  }
  

• 弟弟选择器(关键字是小波浪符)

  #d1 ~ span{
  	color: red  /*查找id是d1标签同级别下面的所有的span标签*/
  }
  

CSS属性选择器

根据标签内部的属性名和属性值查找标签(关键符号是中括号)

所有的标签除了有自己默认的属性之外 还可以拥有自定义的任意属性
默认属性   id class
自定义属性 x=1 y=2

• 方法一：直接通过属性查找

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

• 方法二：查找属性名含有name并且值是username的标签

  [name = username] {
  	background-color: red;
  }
  

• 方式三：查找input标签并且 属性名含有name值是username的

  input[name = username] {
  	background-color: orange;
  }
  

强调:前面的选择器可以是任意类型的 标签、id、class

分组与嵌套

1. 当多个选择器查找到的标签需要调整相同的样式 那么可以合并

   div, p, span {
   	font-size: 20px;
   	color: aqua
   }
   

2. 并且合并的选择器彼此不干扰也没有类型的限制

   #d1, .c1, span {
   	background-color: red
   }
   

3. 还可以在选择器基础之上添加额外的选择使得查找更精确

   div#d1		查找id是d1的div标签
   div.c1		查找class包含c1的div标签
   
   div #d1   查找div内部id是d1的后代标签
   #d1>.c1	  查找id是d1的内部class包含c1的儿子标签
   

常用伪类选择器

补充知识:

a标签默认的颜色有两种 紫色跟蓝色
	紫色:链接地址已经被点击过了
	蓝色:链接地址从来没有点击过

1. 鼠标悬浮(适用于含有所有文本的标签)

   a:hover {
   	color: red  
   }  鼠标移动到p标签上方 字体颜色动态修改为红色
   

2. 获取聚点

   input:focus {  输入框被鼠标左键选中(聚焦)
        background-color: black;
    }
   

伪元素选择器

1. 修改首个字体样式

   p:first-letter {
   	font-size: 20px;
   	color: orange;
   }
   

2. 在文本开头添加内容

   p:before {
   	conter: '加油';
   	color: red;
   }
   

3. 在文本末尾添加内容

   p:after {
   	conter: '好结果';
   	color: blue;
   }
   

强调：伪元素选择器可以用在解决标签浮动所带来的的负面影响 也可以用来做数据的防爬

before和after多用于清除浮动。

选择器优先级

1. 相同选择器
   就近原则:谁离标签越近就听谁的!!!

2. 不同选择器
   行内选择器 > id选择器 > 类选择器 > 标签选择器

CSS修改属性

CSSx修改文字属性

宽和高：

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

• 文字字体

  font-family: '微软雅黑'
  

• 字体大小

  font-size: 20px
  

• 字体粗细

  font-weight: lighter
  

  值	描述
  normal	默认值，标准粗细
  bold	粗体
  bolder	更粗
  lighter	更细
  100~900	设置具体粗细，400等同于normal，而700等同于bold
  inherit	继承父元素字体的粗细值

• 字体颜色

  • 方式一

    color: red
    

  • 方式二

    color: rgb(128, 128, 128)
    

  • 方式三

    color: #4F4F4F
    

  • 方式四

    color: rgba(128,128,128, 0~1)  # 0~1表示的是颜色透明度
    

• 文字对齐

  text-align: center(居中)/left(左对齐)/right(右对齐)
  

• 文字装饰
  a标签默认带下划线

  a {
  	text-decoration: none  (主要就是用于去除a标签的下划线)
  	text-decoration: line-through;  删除线
  	text-decoration: overline;		上边线
  	text-decoration: underline;		下划线
  }
  

• 文字首行缩进

  text-indent: 32px
  

补充: 可以使用浏览器做样式的动态调整，查找到标签的css 然后左键选中 通过方向键上下动态修改数值

CSS背景属性

关键字：background

1. 背景颜色

   background-color: red;
   

2. 背景图片

   background-image: url(图片地址);
   

   背景图片如果没有设置的区域大 那么默认自动填充满

   background-repeat:no-repeat\repeat-x\repeat-y  是否平铺
   background-position:left top;  图片位置
   background-attachment: fixed;  背景附着
   

如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)

eg：background:#336699 url('1.png') no-repeat left top;

CSS边框属性

关键字：border

1. 自定义调整每个边的边框

   border-left/top/right/bottom-color: black;
   border-left/top/right/bottom-width: 5px;
   border-left/top/right/bottom-style: solid;
   

2. 统一调整每个边的边框

   border: 5px solid blue;  （依次是：大小、样式、颜色） 顺序无所谓 只要给了三个就行
   

边框样式:

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

边框属性

• border-width

• border-style

• border-color

3. 圆角边框

   border-radius: 50%
   

   用这个属性能实现圆角边框的效果。

   将border-radius设置为长或高的一半即可得到一个圆形。

   如果长宽一样那么就是圆，不一样就是椭圆

CSS-display属性

根据CSS规范的规定，每一个网页标签都有一个display属性，用于确定该标签的类型，每一个元素都有默认的display属性值，比如div标签，它的默认display属性值为“block”，称为块级标签，而span元素的默认display属性值为“inline”，称为“行内”标签。

值	意义
display:“none”	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:“block”	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:“inline”	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:“inline-block”	使元素同时具有行内元素和块级元素的特点。

重点掌握：

display: none

visibility:hidde 也是隐藏标签 但是位置会保留