前端CSS

今日内容

form表单标签知识补充

1.获取用户输入的标签两大重要属性
	name属性
		类似于字典的键
	value属性
		类似于字典的值
form表单朝后端发送数据的时候 必须要有name属性 否则不会发送该标签的值

2.获取用户输入的input标签理论需要有label配合使用
	<label for="d1"></label>
	 <p>
        username: <input type="text" name="username" id="d1">
	 </p>

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

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

5.针对radio和checkbox可以默认选中
checked="checked" 如果属性名和属性值相等 那么可以简写checked
	<input type="radio" name="gender" value="others" checked>其他

6.针对option标签也可以默认选中
selected="selected" 简写为 selected
	<select name="province" id="">
		<option value="beijing" selected>北京</option>
	</select>

CSS层叠样式表

1.调整标签样式
2.语法结构
	选择器 {
        属性名1:属性值1
        属性名2:属性值2
    }
3.注释语法
	/*注释内容*/
4.三种编写CSS的方式
	1.head中style标签内部直接编写(学习阶段使用)
		<style>
			h1{
        color: blue;
			}
		</style>
	2.head中link标签引入外部css文件(最正规)
		<link rel="stylesheet" href="myscc.css">
	3.直接在标签内部通过style属性编写(不推荐)
		<h1 style="color:red">今天好困呀</h1>

CSS基本选择器

1.标签选择器:直接编写标签名来查找标签
	div {
        coler:blue;
    }  /*查找所有的div标签 并将内部的文本颜色变为蓝色*/
2.类选择器:通过编写class的值来查找标签
	.c1 {
        color: red;
    }  /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/
3.id选择器:通过编写id的值来精准查找标签
	#d1 {
        color: aqua;
    }  /*查看id值是d1的标签 并将内部的文本颜色变成天蓝色*/
4.通用选择器:查找所有的标签
	* {
        color: blueviolet;
    }  /*查看所有的标签 并将内部的文本颜色变成紫色*/

CSS组合选择器

储备知识
"""
<p></p>  /*属于div的哥哥*/
<div>
	<p>  /*div内部p属于div的儿子*/
		<span></span>  /*div内部p内部span属于div的孙子 div内部的所有标签无论层级都称之为div的后代*/
	<p>
</dir>
<p></p>  /*属于div的弟弟*/
"""

1.后代选择器:两个选择器之间空格隔开
	#d1 span {
        ccolor: blue;
    }  /*查找div标签内所有的span*/
2.儿子选择器:两个选择器之间大于号隔开
	d1>span {
        color: blue;
    }  /*查找div标签内所有的儿子span*/
3.毗邻选择器:两个选择器之间加号隔开
	d1+span {
        color: orange
    }  /*查找div标签同级别下面紧挨着的一个span标签*/
4.弟弟选择器:两个选择器之间小波浪号隔开
	#d1~span {
        color: orange
    }  /*查找div同级别下所有的span标签*/

CSS属性选择器

1.查找属性名含义name的标签
	[name] {
        background-color: red;
    }
2.查找属性名含义name并且值是username的标签
	[name='username'] {
        background-color: blue;
    }
3.查找input标签 并且属性名含有name 值是username的
	input[name='username'] {
        background-color: aqua;
    }

CSS选择器之分组与嵌套

当多个选择器查找的标签需要调整相同的样式 那么可以合并(分组)
	div,p,span {
        color: red;
    }  /*查找div或者p或者span*/
合并的选择器彼此不干扰也没有类型的限制(嵌套)
	#d1,.c1,span {
        color: red;
    }  /*查找id是d1或者class是c1或者是span*/
还可以在选择器基础之上添加额外的选择使得查找更精确
	span.c1  /*查找class含有c1的span*/
	div#d1  /*查找id含有d1的div*/

CSS选择器之伪类选择器

"""
补充知识
	a标签默认的颜色有两种 紫色跟蓝色
		紫色:链接地址已经被点击过了
		蓝色:链接地址从来没有点击过
"""
1.鼠标悬浮
	a:hover {
        coler: blue
    }  /*鼠标悬浮上去之后样式改成蓝色 适用于所有含有文本的标签*/

CSS选择器之伪元素选择器

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

1.修改首个字体样式
	 p:first-letter {
            font-size: 36px;
            color: aqua;
        }
2.在文本开头添加内容(添加的内容不可选中)
	p:before {
            content: "好想出去玩呀";
            color: red;
        }
3.在文本末尾添加内容(添加的内容不可选中)
	p:after {
            content: "嘿嘿嘿";
            color: coral;
        }
伪元素选择器可以用在解决标签浮动所带来的的负面影响 也可以用来做数据的防爬

CSS选择器优先级

当多个选择器查找到相同的标签修改不同的样式 那么标签该听谁的

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

字体样式

1.文字字体
	body {
        font-family: "微软雅黑";
    }
2.文字大小
	p {
        font-size: 16px;
    }
3.字体粗细
	p {
        font-weight: lighter;  /*更粗*/
        font-weight: ;bolder  /*更细*/
    }
4.字体颜色(四种方式)
	p {
        color: red;
        color: rgb(255,1,1);
        color: #3e3e3e
        color: agba(255,1,1,0.8)
    }

"""
获取颜色的方式有很多
	微信截图自带取色功能:rgb(255,1,1)
	pycharm提供的取色器:左侧色块双击即可
"""

5.文字对齐
	p {
        text-align:center;  /*居中对齐*/
        text-align:right;  /*右对齐*/
        text-align:left;  /*左对齐*/
        text-align:justify;  /*两端对齐*/
	}
6.文字装饰
	a {
        text-decoration: none;  /*去除a标签默认的自划线*/
        text-decoration: underline;  /*下划线*/
        text-decoration: overline;  /*上边线*/
        text-decoration: line-through;  /*删除线*/
    }
7.首行缩进
	p {
        text-indent: 32px;
	}  /*首行缩进32px*/

背景属性

1.背景颜色
	background-color: red;
2.背景图片
	background-image: url('填写图片地址');
3.背景重复
	3.1.background-repeat: repeat(默认):背景图片平铺排满整个网页
	3.2.background-repeat: repeat-x：背景图片只在水平方向上平铺
	3.3.background-repeat: repeat-y：背景图片只在垂直方向上平铺
	3.4.background-repeat: no-repeat：背景图片不平铺
"""
多个属性有相同前缀的时候 一般可以简写
background: blue url('填写图片地址')no-repeat center center
"""
4.背景位置
	background-position: left top;
	background-attachment: fixed;背景附着(固定)

边框属性

1.边框属性
    border-left-color  /*边框颜色*/
    border-left-width  /*边框宽度*/
    border-left-style  /*边框样式*/
2.统一设置边框
    border-left-color: red;  /*边框颜色为红色*/
    border-left-width: 5px;  /*边框宽度5像素*/
    border-left-style: dashed  /*边框样式dashed*/
"""
只要前缀一样都可以简写
	border: 2px solid red;  这样写上下左右全部一样
"""
3.单独设置边框(上下左右不一样)
	div {
			height: 100px;
			width: 600px;
			background-color: aqua;
			border-left:10px solid red;
			border-right:10px solid blue;
			border-top:10px solid chartreuse;
			border-bottom:10px solid deeppink;
        }
"""
none	无边框
dotted	点状虚线边框
dashed	矩形虚线边框
solid	实线边框
"""
4.画圆:border-radius
想要画圆长宽必须保持一样 不是一致则会变成椭圆
	p {
 		height: 400px;
		width: 400px;
		background-color: aqua;
		border-radius: 50%;
	}
参数设置成50%就行

display属性

1.display:"none"
	隐藏标签 页面不会显示也不会保留位置
2.display:"block"
	让标签聚集块儿级标签的特征
3.display:"inline"
	让标签聚集行内标签的特征
4.display:"inline-block"
	使元素同时具有行内元素和块级元素的特征
5.visibility:"hidden"
	同样是隐藏标签 页面不会显示但是会保留位置