【前端】第2回 CSS
目录
1. 表单标签知识补充
1. 获取用户输入的标签两大重要的属性
name属性：类似于字典的键
value属性：类似于字典的值
form表单在朝后端发送数据的时候，标签必须要有name,否则不会发送该标签的值
2. 获取用户输入的input标签理论上需要有label配合使用
<lable 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="bobby" value="basktball">篮球
<select name="province" id=""><option value="sh">上海</option></select>
5. 针对radio和checkbox可以默认选中
checked="checked" 如果属性名和属性值相等，那么可以简写 checked
6. 针对option标签也可以默认选中
selected="selected" 简写为 selected
<form action="">
<p><label for="d1">username:</label><input type="text" name="username" id="d1" placeholder="账号"></p>
<p>password: <input type="text" name="password" placeholder="密码"></p>
<p>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
<input type="radio" name="gender" value="others">其他
</p>
<p>
<input type="checkbox" name="habby" value="basketball">篮球
<input type="checkbox" name="habby" value="ball">排球
<input type="checkbox" name="habby" value="football">足球
</p>
<p>
<select name="province" id="" multiple>
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="wh">武汉</option>
<option value="cq">重庆</option>
</select>
</p>
</form>
2. CSS层叠样式表
1. 调整标签样式
2. 语法结构
选择器{
属性名1：属性值1；
属性名2：属性值2；
}
3. 注释语法
/*注释内容*/
4. 三种编写css的方式
1. head中style标签内部直接编写(内部样式)
2. hesd中link标签引入外部CSS文件(外部样式)
3. 直接在标签内部通过style属性编写(行内样式)
3. CSS基本选择器
/*1.标签选择器：直接编写标签签名来查找标签*/
div {
color: red; /*查找所有的div标签，并将内部的文本颜色变为红色*/
}
/*2.类选择器：通过编写class的值来查找标签*/
.c1{
color: lime; /*查找所以class属性中含有c1的标签，并将内部的文本颜色变为黄绿色*/
}
/*3.id选择器:通过编写id的值来精准查找标签*/
#d1 {
color: aquamarine; /*查找id值是d1的标签 并将内部的文本颜色改为天青色*/
}
/*4.通用选择器:查找所有的标签*/
* {
color: blue; /*查找所有的标签 并将内部的文本颜色改为蓝色*/
}
4. CSS组合选择器
4.1 标签之间的关系
<body>
<p></p>
<div>
<p>
<span></span>
</p>
</div>
<p></p>
4.2 组合选择器
/*查找div标签内部所有的span(后代)*/
/*1. 后代选择器: 两个选择器之间空格隔开 查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签*/
#d1 span{
color: lime;
}
/*查找div标签内部所有的儿子span*/
/*2.儿子选择器 两个选择器之间大于号隔开 查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签*/
#d1>span {
color: red;
}
/*查找div标签同级别下面紧挨着的一个span标签(弟弟)*/
/*3.毗邻选择器*/
#d1+span {
color: aqua;
}
/*查找div标签同级别下面所有的span标签(弟弟们)*/
/*4.弟弟选择器*/
#d1~span{
color: fuchsia;
}
5. CSS属性选择器
所以的标签除了有自己默认的属性之外，还可以拥有自定义的任意属性，默认属性 id class 自定义属性 x=1 y=2
/*1.查找属性名含有name的标签*/
[name] {
background-color: aqua;
}
/*2.查找属性名含有name并且值是username的标签*/
/*[name='username'] {*/
[name='username']{
background-color: orange;
}
/*3.查找input标签并且 属性名含有name值是username的*/
input[name='username']{
background-color: aqua;
}
6.CSS选择器之分组与嵌套
/*1.当多个选择器查找到的标签需要调整相同的样式，那么可以合并*/
div,p,span{
color: red;
}
/*并且合并的选择器彼此不干扰也没有类型的限制*/
#d1,.c1,span {
color: gold;
}
/*还可以在选择器基础之上添加额外的选择使得查找更精确*/
span.c1{
color: aqua;
}
div#d1{
color: lime;
}
7. CSS选择器之伪类选择器
a标签默认的颜色有两种 紫色跟蓝色
紫色：链接地址已经被点击过了
蓝色：链接地址从来没有点击过
/*鼠标悬浮上去之后样式改变 适用于所有含有文本的标签*/
a:hover{
color: lime;
}
8. CSS选择器之伪元素选择器
伪元素选择器可以用在解决标签浮动所带来的的负面影响 也可以用来做数据的防爬
/*第一个字体定义*/
p:first-letter{
font-size: 40px;
color: lime;
}
/*p前加语句*/
p:before{
content: "CSS";
color: aqua;
}
/*p后加语句*/
p:after{
content: "html";
color: fuchsia;
}
9. CSS选择器优先级
当多个选择器查找到相同的标签修改不同的样式 那么标签该听谁的
1.选择器相同 引入位置不同(就近原则)
2.选择器不同的情况
行内 > id选择器 > 类选择器 > 标签选择器
3. !important作用是提高指定样式规则的应用优先权（优先级）。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}。 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级。
10 CSS属性相关
10.1 宽和高
- width属性可以为元素设置宽度。
- height属性可以为元素设置高度。
- 块级标签才能设置宽度，行内标签的宽度由内容来决定
10.2 字体样式
font-family:"微软雅黑" 字体类型
font-size:18px 字体大小
| font-weight | 字体粗细 |
|---|---|
| nomal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| inherit | 继承父元素字体的粗细值 |
10.3 文本颜色
| 类型 | 例 |
|---|---|
| 十六进制值 | #FF0000 |
| RGB值 | RGB(255,0,0) |
| 颜色名称 | red |
| rgba(255,0,0,0.3) | 第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。 |
10.4 文字属性
| text-align | 水平对齐方式。 |
|---|---|
| left | z左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
| text-decoration | 给文件添加特殊效果 |
|---|---|
| none | 默认，定义标准的文本 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
| inherit | 继承父元素的text-decoration属性的值 |
10.5 属性
1. 去掉a标签默认的自划线
a{ text-decoration:none;}
2. 首行缩进
p{text-indent:32px}
3. 背景属性
背景颜色
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;
4. 支持简写
background:#336699 url('1.png') no-repeat left top;
10.6 边框
| border | 属性 |
|---|---|
| border-width | 边框宽度 |
| border-style | 边框样式 |
| border-color | 边框颜色 |
| border-style | 边框样式 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线边框 |
| solid | 实线边框 |
| border | 边框 |
|---|---|
| border-top | 上边框 |
| border-right | 右边框 |
| border-left | 左边框 |
| border-bottom | 下边框 |
10.7 border-radius
用这个属性能实现圆角边框的效果。将border-radius设置为长或高的一半即可得到一个圆形。
10.8 display属性
1.用于控制HTML元素的显示效果
| 值 | 意义 |
|---|---|
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
2.display:"none"与visibility:hidden的区别：
- visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
- display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
