CSS层叠样式表

表单标签知识补充

• 获取用户输入的标签两大重要的属性

  name属性：类似于字典的键
  value属性：类似于字典的值
  
  '表单通过post请求将数据发送到后端，我们就可以通过name的值来获取value'
  

• 获取用户输入的input标签理论上需要有label配合使用

  <label for="某个input标签的id值"></label>
  
  例如：
  <label for="username">
  	<input type="text"  id="username">
  </label>
  

• 获取用户输入的input标签也可以添加背景提示

  <input type="text" name="username">
  <input type="password" placeholder="密码">
  
  这样用户就可以知道这个标签内应该输入什么
  

  

• 获取用户输入的标签如果不是让用户自己写而是选择，那么需要自己写value

  情况一：radio单选
  gender:
  <input type="radio" name="gender" value="male">male
  <input type="radio" name="gender" value="female">female
  <input type="radio" name="gender" value="others">others 
  <!-- 需要需要自己添加value属性并添加好value的值，用户点击该单选框就可以获取到对应的值-->
  
  情况二：checkbox多选
  hobby:
  <input type="checkbox" value="basketball" id="s1">basketball
  <input type="checkbox" value="football">football
  <input type="checkbox" value="tennis">tennis
  
  情况三：select标签内含有多个option标签
  <select name="" id="">
    <option value="sh">上海</option>
    <option value="bj">北京</option>
    <option value="nj">南京</option>
  </select>
  

• 针对radio和checkbox可以默认选中

  checked="checked"  如果属性名和属性值相等，name可以简写：checked
  

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

  selected="selected"   简写为：selected
  

css层叠样式表

定义：css(Cascading Style Sheet)层叠样式表，定义如何显示HTML元素

作用：调整标签样式

语法结构：

选择器 {
	属性名1：属性值1；
	属性名2：属性值2；
}

注释语法：

/*注释内容*/

三种编写css的方式

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

css基本选择器

标签选择器：直接编写标签名来查找标签

查找所有的div标签，并将内部的文本颜色变为绿色

div{
  color:green; 
}

类选择器：通过编写class的值来查找标签

查找所有class属性中含有c1的标签，并将内部的文本颜色变为红色

.c1{
  color:red;
}

id选择器：通过编写id的值来精确查找标签

查找id值是d1的标签，并将内部的文本颜色改为红色

#d1{
  color:red;
}

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

查找所有的标签，并将内部的文本颜色改为蓝色(几乎不用)

*{
  color:blue;
}

css组合选择器

预备知识：标签之间的关系

 <p></p>
    <div id="d1">
        <p>
            <span></span>
        </p>
    </div>
		<span></span>
    <p></p>

后代选择器

两个选择器之间空格隔开，查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签

eg:查找div标签内部所有的span标签(后代)

#d1 span{
  color:red;
}

儿子选择器

两个选择器之间大于号隔开，查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签

eg:查找div标签内部所有的儿子span

#d1>span{
  color:red;
}

毗邻选择器

查找div标签同级别下面紧挨着的一个span标签(弟弟)

注意：必须是紧挨着d1的标签，间隔无效

#d1+span{
  color:red;
}

弟弟选择器

查找div标签同级别下面所有的span标签(弟弟们)

#d1~span{
  color:red;
}

css属性选择器

所有的标签除了有自己默认的属性之外，还可以拥有自定义的任意属性。我们可以通过这些属性修改标签样式

• 默认属性：id、class等
• 自定义属性：x=1、y=1等

查找属性名含有name的标签

[name]{
  background-color:red;
}

查找属性名含有name并且值是username的标签

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

查找input标签并且属性名含有name值是username的标签

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

前面的选择器可以是任意类型的，根据实际需求搭配标签、属性。

css选择器之分组与嵌套

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

div,p,span{
  color:red;
}

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

#d1,.c1,span{
  color:red;
}

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

span.c1  -- 查找span下的class为c1的标签
div#d1   -- 查找div下的id为d1的标签

css选择器之伪类选择器

a标签默认的颜色有两种，蓝色跟紫色。

• 紫色：链接的地址已经被点击过了
• 蓝色：链接地址从来没有点击过

<style>
  a:hover{
    color:red;
  }
</style> 

<a href="//https:www.baidu.com">点我</a>

鼠标悬浮上去之后样式就改变为red，适用于所有含有文本的标签。

css选择器之伪类选择器

通过css代码来操作标签的文本内容

<style>
  p:first-letter{
    font-size: 48px;
    color: red;
  }
  p:before{
    content: "我用双手成就你的梦想";
    color: gray;
  }
  p:after{
    content: "勇往直前";
    color: darkcyan;
  }
  p{
		background-color: rgba(14,13,13,0.2);
}
</style>
 <p>坚决作战</p>

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

css选择器优先级

当多个选择器查找到相同的标签修改不同的样式，选择器优先级的高低按照什么标准

• 选择器相同，引入位置不同：从下到上优先级从高到低
• 选择器不同情况：行内>id选择器>类选择器>标签选择器

补充

!important：提高指定样式规则的优先级

<style>
  #d1{
  color: back !important;
}
</style>
<p id="d1" style="color: red">好热</p> 

通过!important将id选择器的优先级提高了。

字体样式

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

• width属性可以为元素设置宽度
• height属性可以为元素设置高度

修改body内字体样式

font-family可以把多个字体名称作为一个回退系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。

body{
  font-famliy:"微软雅黑";
}

修改标签字体大小

p{
  font-size: 16px;
}

修改文本字重

font-weight用来设置字体的字重(粗细)。

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

p{
  font-weight:lighter;/**/
}

几种修改字体颜色的方式

方式1：
p{
  color:red;
}
方式2：
  color:rgb(...)
方式3：
   color:#3e3e3e;
方式3：
   color:rgba(1,1,1,0.1)  /*最后一个参数调整透明度*/

文本居中显示

text-align属性规定元素中的文本的水平对齐方式

text-align:center;

文本首行缩进

p{
  text-indent:32px;
}

文字装饰

text-decoration属性用来给文字添加特殊效果

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线
inherit	继承父元素的text-decoration属性的值

常用为去掉a标签默认的自划线

a{
text-decoration:none;
}

背景属性

• 背景颜色

  background-color:red;
  

• 背景图片

  background-image:url('图片路径')
  

• 背景重复情况

  repeat(默认):背景图片平铺排满整个网页
  repeat-x:背景图片只能在水平方向上平铺
  repeat-y:背景图片只能在垂直方向上平铺
  no-repeat:背景图片不平铺
  

• 背景位置

  background-position:left top;
  

• 支持简写：

  background:#336699 url('图片路径') no-repeat left top;
  

边框属性

边框样式

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

#d1{
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

/*可以简写成为：*/
#d1{
  border-width:2px solid red;
}

border-radius

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

display属性

用于控制html的显示效果

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

display:none和visibility:hidden的区别：

visibility:hidden可以隐藏某个元素，但隐藏的元素仍然需要占用与未隐藏之前一样的空间。也就是说，改空间虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏名某个元素，且隐藏的元素不会占用任何空间。也就是说没改元素不但被隐藏了。而且该元素原本占用的空间也会从页面布局中消失。