- 表单(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> |
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} |
| 属性选择器 |
用于选取带有指定属性的元素。 |
总结：
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#d1css伪类选择器
伪类选择器主要是通过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 | 使元素同时具有行内元素和块级元素的特点。 |
none 与hidden的区别
none隐藏元素且不占用任何空间，像消失了一样
hidden可以隐藏元素，但是还占用空间，影响布局
标签：color,元素,css,选择器,red,属性 From： https://www.cnblogs.com/scx-xiaochun/p/16616078.html