css，css选择器，css伪类选择器，css选择器优先级，字体样式，背景属性，display属性

表单(form)知识补充
CSS
- css是什么
- css语法
- css布局分类
- css注释
css选择器
css选择器分组和嵌套
css伪类选择器
css选择器优先级
- !important
字体样式（font）
背景属性（background）
- 边框
- border-radius
display属性
- none和hidden的区别

表单(form)知识补充

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

name	类似于字典的键
value	类似于字典的值

1.form表单在朝后端发送数据的时候标签必须要有name 否则不会发送该标签的值

2.获取用户输入的input标签理论上需要有label配合使用
<label for="某个input标签的id值"></label>

3.获取用户输入的input标签也可以添加背景提示
<input type="text" name="password" placeholder="密码">

4.获取用户输入的标签如果不是让用户自己写而是选择那么标签需要自己写value
<input type="radio" name="gender" value="male">男
<input type="checkbox" name="hobby" value="basketball">篮球
<select name="province" id="">
<option value="sh">上海</option>
</select>

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

6.针对option标签也可以默认选中
selected="selected" 简写为 selected

css

css是什么

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

css相当于人的衣服，通过一些花里胡哨的一些样式对人进行装裱。

css语法

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

css布局分类

行内样式	<p style="color: red"></p>
外部样式 (link引入)	<link href="mystyle.css" rel="stylesheet" type="text/css"/>
内部样式 (style)	<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>

css注释

/*注释内容*/

css选择器

元素选择器	body内的所有元素都可以用 eg: p{color : red;}
id选择器 #	专门针对于起了id属性名的元素 eg: #d1{ color: red;}
类选择器 .	专门针对于起了class属性名的元素 eg: .c1{color: red;}
通用选择器 *	针对于全局 eg: *{margin: 0 auto;}
后代选择器	在body内被一个块级元素(p除外)包裹至少一个元素就可以使用，改变的就是它内部被包裹的所有元素 eg: li a{color: red;}
儿子选择器	eg: div>p{color : red;}
毗邻选择器	选择所有紧接着<div>元素之后的<p>元素 eg: div+p{color:red;}
弟弟选择器	eg: i1~p{color：red}
属性选择器	用于选取带有指定属性的元素。 p[title] { color: red; } 用于选取带有指定属性和值的元素。 p[title="213"] { color: green; }

总结：

css基本选择器：元素选择器，id选择器，类选择器，通用选择器

css组合选择器：后代选择器，父类选择器，儿子选择器，弟弟选择器，毗邻选择器，属性选择器

所有的标签(元素)除了有自己默认的属性之外，我们还可以给他们自定义属性

/*1.查找属性名含有name的标签*/
/*[name] {*/
/*    background-color: red;*/
/*}*/
/*2.查找属性名含有name并且值是username的标签*/
/*[name='username'] {*/
/*    background-color: orange;*/
/*}*/
/*3.查找input标签并且 属性名含有name值是username的*/
/*input[name='username'] {*/
/*    background-color: aqua;*/
/*}*/
/*前面的选择器可以是任意类型的 标签、id、class*/

css选择器分组和嵌套

当多个选择器查找的元素需要相同的样式的时候，我们就可以将他们合并，用逗号相隔

div,p,span {
        color: red;
            }

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

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

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

span.c1
	div#d1

css伪类选择器

伪类选择器主要是通过css代码的形式来操作标签的文本内容

/*让文本第一个字符大小为48px*/
p:first-letter {
        font-size: 48px;
        color: red;
	}
/*在字符之前添加内容*/
    p:before {
        content:"我不好这口!";
        color:red;
    }
/*在字符之后添加内容*/
    p:after {
        content:"雨化田喜欢洗脚";
        color:blue;
        }

css选择器优先级

选择器相同引入位置不同	就近原则
选择器不同的情况	行内 > id选择器 > 类选择器 > 标签选择器

ps:自行查阅强制修改标签样式的操作 !important

!important

只能在css中使用

在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级。

box{color:red !important;}

字体样式

width	设置元素的宽度
heigth	设置元素的高度
font-family	设置文字的字体
font-size	设置文字的大小
font-weigth	设置文字的粗重(粗细)等样式(normal,bold,bolder,lighter)
color	设置文字的颜色(red,RGB(),rgba(),#ffffff)
text-aline	设置文字的位置(left,right,center)
text-decoration	设置文字的特殊效果(none,underline,overline,line-through,inherit)
text-indent	文字首行缩进

背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/

简写

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

图片不动

background-attachment: fixed;

边框(border)

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

border-radius

border-radius: px或者%;

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

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

display属性

用于控制HTML元素的显示效果

none	隐藏元素，找不到 HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
block	可以使行内元素转为块级元素默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
inline	块级元素转行内元素
inline-block	使元素同时具有行内元素和块级元素的特点。