前端之CSS
form表单补充
1.获取用户输入的标签都必须有一个name属性
用户输入的值会被存放到标签的value属性中
可以理解为name属性对应是字典的key
用户输入的被value属性获取到的值是字典的value
2.label标签
通常和input标签组合使用：可以让用户点外面的文字也能进入文本框
<form action=''>
<label for='i1'>username:<input type='text' id='i1' name='username'></label>
<label for='i2'>password:<input type='password' id='i2' name='password'></label>
</form>
前端之CSS
css介绍
CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）
CSS语法
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值，每个声明之后用分号结束
语法结构
选择器 {属性：属性值；属性：属性值；属性：属性值
CSS注释
注释是代码之母
/*这是单行注释*/
/*
这是多行注释
*/
CSS三种引入方式
1.内部样式：
head内style标签内部直接书写css代码
<head>
<meta charset='utf-8'>
<title>title</title>
<style>
p {
background-color:#2b99f
}
</style>
</head>
2.行内样式
直接在标签内通过style属性书写css样式
<p style='color:red'>hello</p>
3.外部样式
link标签引入外部css文件
<link href='mystyle.css' rel='stylesheet' type='text/css'/>
ps:注意页面css样式通常都应该写在单独的css文件中
CSS选择器
1.基本选择器
1.1 标签选择器：所有p标签的颜色都为红
<style>
p {color:red;}
</style>
1.2 id选择器:所有id为s1的字体大小都为24
<style>
#s1 {font-size:24px;}
</style>
1.3 类选择器:所有class=c1的颜色都为1
<style>
.c1 {color:red;}
</style>
注意：样式类名不要用数字开头（有的浏览器不认）
标签中的class属性如果有多个，要用空格分隔
1.4 通用选择器
<style>
* {color:red;}
</style>
2.组合选择器
2.1 后代选择器:div里面所有的span标签都变为红
<style>
div sqan {color:red;}
</style>
2.2 儿子选择器:所有div子集的span标签都变为蓝色
<style>
div>span {color:blue;}
</style>
2.3 毗邻选择器:所有紧接着div下的第一个span标签都改为红色
<style>
div+span {color:red;}
</style>
2.4 弟弟选择器:所有div下的span标签都变为蓝
<style>
div~span {color:blue;}
</style>
3.属性选择器
3.1 只要有title属性名的标签都改为红色
<style>
[title] {color:red;}
</style>
3.2 只要有属性名为title并且值为1的标签都改为红色
<style>
[title='1'] {color:red;}
</style>
3.3 规定p标签内属性名为title并且值为2的标签都改为红色
<style>
p[title='2'] {color:red;}
</style>
4.分组与嵌套
4.1 分组：当多个元素的样式相同的时候，可以通过在多个标签之间使用逗号分隔来统一设置元素样式
<style>
/*div标签和p标签统一设置为红色*/
div,p {color:red}
</style>
4.2 嵌套:多种选择器混合起来使用
<style>
/*div 下的p标签和span标签设置为红色*/
div p,span {color:red;}
</style>
5.伪类选择器
<style>
/*未访问的链接*/
a:link {color:red;}
/*鼠标移动到链接上*/
a:hover {color:yellow;}
/*鼠标点下去的时候*/
a:active {color:black;}
/*已访问过的链接*/
a:visited {color:green;}
/*input输入框选中后背景颜色的样式*/
input:focus {
outline:none;
background-color:red;
}
</style>
6.伪元素选择器
<style>
/*first-letter给首字母设置样式*/
p:first-letter {
font-size:48px;
color:red;
}
/*首字母大小设置为48，颜色为红*/
</style>
<style>
/*在每个p标签内容前添加*/
p:before {
content:'**';
color:red;
}
</style>
<style>
/*在每个p标签内容后添加*/
p:after {
content:'??';
color:red;
}
</style>
选择器优先级
1.相同选择器，不同的引入方式
就近原则，谁越靠近标签就选谁
<head>
<style>
p {color:red;}
</style>
<!--mycss.css文件中也是p {color:blue;}-->
<link rel='stylesheet' href='mycss.css'>
</head>
<body>
<p>
我是一个p标签
</p>
</body>
<!--link靠近p标签，所以字体是蓝色-->
2.不同的选择器，相同的引入方式
行内样式>id选择器>类选择器>标签选择器
CSS属性相关
1.宽和高
<!--width属性可以为元素设置宽度
height属性可以为元素设置高度
注意：块儿级标签才能设置宽度，内联标签的宽度由内容来决定
-->
<style>
div {
width:400px;
height:100px;
}
</style>
2.字体属性
2.1 文字字体
<!--
font-family可以把多个字体名称作为一个回退系统来保存。
如果浏览器不支持第一个字体，则会尝试下一个
浏览器会使用它可识别的第一个值
-->
<style>
p {font-family:'Microsoft Yahei','微软雅黑'，'Arial',sans-serif}
</style>
2.2字体大小
<style>
p {font-size:16px;}
</style>
2.3 字重（粗细）
font-weight用来设置字体的字重
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细 |
2.4 文本颜色
颜色属性被用来设置文字的颜色
颜色是通过CSS最经常的指定：
十六进制值-如：#FF0000
一个RGB值-如：RGB（255,0,0）
颜色的名称-如：red
还有rgba(255,0,0,0.3),第四个值为alpha，指定了色彩的透明度，范围在0.0到1.0之间
3.文字属性
3.1 文字对齐：text-align属性规定元素中的文本的水平对齐方式
<style>
p {text-align:right;}
</style>
| 值 | 描述 |
|---|---|
| left | 左边对齐，默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
3.2 文字装饰：text-decoration属性用来给文字添加特殊效果
<style>
p {text-decoration:underline;}
</style>
| 值 | 描述 |
|---|---|
| none | 默认，定义标准的文本 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本的一条线 |
| inherit | 继承父元素的text-decoration属性的值 |
<style>
/*常用，为去掉a标签默认的下划线*/
a {
text-decoration:none;
}
</style>
3.3 首行缩进
<style>
/*首行缩进32像素*/
p {
text-indent:32px;
}
</style>
4.背景属性
<style>
div {
/*背景颜色*/
background-color:red;
/*背景图片*/
background-image:url('图片地址');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x:背景图片只在水平方向铺满
repeat-y:背景图片只在垂直方向铺满
no-repeat:背景图片不平铺
*/
background-repeat:no-repeat;
/*背景位置*/
background-position:left top;
/*background-position:200px 200px*/
}
</style>
支持简写
background:red no-repeat url('') center
<!--背景图片示例-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 400px;
background-color: tomato;
}
.box {
height: 400px;
background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");
background-attachment: fixed; /*图片固定不动*/
}
.c2 {
height: 400px;
background-color: red;
}
.c3 {
height: 400px;
background-color: fuchsia;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="box"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
5.边框
边框属性
- border-width
- border-style
- border-color
<style>
#i1 {
border-width:2px;
border-style:solid;
border-color:red;
}
</style>
通常使用简写方式：
<style>
#i1 {
border:2px solid red;
}
</style>
边框样式
| 值 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线边框 |
| solid | 实线边框 |
除了可以统一设置边框外还可以单独为某一个边框设置样式：
<style>
#i1 {
border-width:2px;
border-top-style:dotted;
border-top-color:red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
</style>
6.boder-radius:画圆
用这个属性能实现圆角边框的效果
将border-radius设置为长或高的一半即可得到一个圆形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: red;
border: 3px solid black;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
7.display属性
用于控制html元素的显示效果
| 值 | 意义 |
|---|---|
| display:'none' | HTML文档中元素存在，但是在浏览器中不显示，一般用于配合JS代码使用 |
| display:'block' | 默认占满整个页面，如果设置了指定宽度，则会用margin填充剩余的部分 |
| display:'inline' | 将块儿级标签变成行内标签 |
| display:'inline-block' | 使元素同时具有行内元素和块级元素的特点 |
display:'none'与visibility:hidden的区别
visibility:hidden:可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，也就是说，该元素虽然被隐藏了，但还是会影响布局
display:'none'：可以隐藏某个元素，且隐藏的元素不会占用任何空间，也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失
