CSS的基本使用与选择器的基本使用

CSS的基本使用与选择器的基本使用

表单标签补充知识

1.获取用户输入的两大重要的属性
	name属性
		类似于字典的键
	values属性
		类似于字典的值
2.form表单提交数据的注意事项：
	2.1 所有获取用户输入的标签都必须放在form表单中
	2.2 action控制着往哪里提交
	2.3. form表单在朝后端发送数据的时候，标签中必须要有name属性，否则就不会发送该标签
	2.4 提交按钮<input type="submit">
3.获取用户输入的input标签理论上需要有label配合使用,否则就会飘黄
	<label for="某个input标签的id值"></label>
4.获取用户输入的input标签也可以添加背景提示
	password：<input type="password" name="password" placeholder="密码">
5.获取用户输入的标签如果不是让用户自己写而是选择，那么标签需要自己写values
	<input type="radio" name="gender" value="male">男
	<input type="checkbox" name="hobby" value="basketball">篮球
	<select name="province" id="sh">
		<option value="sh">上海</option>
   </select>
6.针对radio可以使用checked实现默认选中
	<input type="radio" name="gender" value="male" checked="checked">男  我们也可以简写checked直接写一个也可以实现同样的效果
7.针对option标签也可以默认选中
	<select name="province" id="sh">
		<option value="sh" selected="selected">上海</option>
	</select>同样可以简写成一个selected

CSS简介

1.CSS层叠样式表（Cascading Style Sheets）
2.作用
	调整标签样式
3.语法结构
	选择器 {
        属性名1：属性值1；
        属性名2：属性值2；
    }
    css生命以分号结束，声明用{}括起来
    建议一行写一个属性
    若值为若干单词，要把值用引号引起来，如：font-family:"agency fb"
4.注释语法
	只有一种：/*注释内容*/
5.三种编写CSS的方式
	1.head中style标签内部直接编写（我们学习阶段的时候使用，方便）
	2.head中link标签引入外部CSS文件或者自己书写css代码（最正规，最经常使用）
	3.直接在标签内部通过style属性编写

选择器之基本选择器

提前书写
<div>
    <p>520</p>
  </div>
  <div id="d1">
    juhygtfrdrfcgvhbjnk
  </div>
  <div class="c1">
      juhygtfrdrfcgvhbjnk
  </div>
1.标签选择器：直接编写标签名来查找标签，修改或者定义内部
	div {
      color: pink;  查找所有的div标签，并且将内部文本的颜色变成粉色
    }
2.类选择器：通过类的值来查找标签，修改或者定义内部
	 .c1 {
      color: wheat;  查找我们所寻找的类，并且修改内部文本的颜色
    }
3.id选择器：通过id的值来精确查找标签，修改或定义内部
	#d1 {
      color: indigo;  查找我们所寻找的id值的内容，修改内部文本的颜色
    }
4.通用选择器，查找所有的标签进行变更
	* {
      color: cyan;  查找所有的标签更改内部文本颜色
    }

选择器之组合选择器

首先需要有一个前提，然后我们根据这个进行操作
<body>
    <div id="d1">div首行
      <span>div内部的span，也就是div的儿子</span>
      <p>div内部p，也就是div的儿子，span的弟弟
        <span>div的孙子，p的儿子</span>
      </p>
      <span>div内部的span，也是上方那个p的弟弟</span>
    </div>
    <span>div的弟弟</span>
</body>
1.查找div标签内所有的span（后代，儿子孙子什么的全都要）
	后代选择器：两个选择器之间使用空格隔开，查找前面选择器获取到的标签内部所有符合条件的标签然后变色
     #d1 span {
        color: pink;
      }
2.查找div标签内所有儿子span标签
	儿子选择器：两个选择器之间大于号隔开查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要去的标签
	#d1>span {
      color: cyan;
    }
3.查找div标签下同级别下面紧挨着的一个span标签（弟弟，来了老弟）
	毗邻选择器 两个选择器之间使用加好来定义只寻找他下方的一个标签如果没有那么没有，有的话就修改
	#d1+span {
      color: aqua;
    }
4.查找div标签下同级别所有的span标签（弟弟们）
	弟弟选择器 使用波浪号来选择同级别下所有的我们所定义的标签
    #d1~span {
      color: darkorange;
    }

选择器之属性选择器

我们所使用的标签除了系统所默认的一些标签外，我们也可以自己定义一些我们自己使用的标签，我们也可以使用自定义的属性来查找我们需要的内容
	默认的属性
		id  class
	自定义属性
		a=1 b=2
首先要有东西供我们操作
    <p>
    username:<input type="text" name="username">
    </p>
    <p>
    username<input type="password" name="password">
    </p>
    <a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fec%2F7b%2F56%2Fec7b56c490557bc7e9bcda7460ab4bda.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663845587&t=c98fd0ef52da7d2b046b7be0a764315c" name="username">111</a>
    <div name="username">div</div>
1.查找属性名含有name的标签，然后我们可以通过name这个标签，找到他所对应的位置将他内部的进行重新定义和更改
      [name] {
        background-color: pink;
      }
2.查找属性名含有name并且值是username的标签，只寻找符合这个标签的标签然后去更改
      [name='username'] {
          background-color: darkorange;
      }
3.查找input标签并且属性名含有name值是username的标签，然后去更改内舒属性
      input[name="username"] {
          background-color: yellowgreen;
      }

选择器之分组与嵌套

前情概要
    <div id="d1">div</div>
    <p class="c1">p</p>
    <span>span</span>
    <a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fec%2F7b%2F56%2Fec7b56c490557bc7e9bcda7460ab4bda.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663845587&t=c98fd0ef52da7d2b046b7be0a764315c">点击链接美女图</a>
1.当多个选择器查询找到的标签需要调整相同的样式，那么可以合并
    div,p,span {
      color: pink;
    }
2.并且合并的选择器之间彼此也互不干扰没有类型限制
    #d1,.c1,span {
      color: darkorange;
    }

选择器之伪类选择器

前情概要：
<body>
    <p>
    <a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fec%2F7b%2F56%2Fec7b56c490557bc7e9bcda7460ab4bda.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663845587&t=c98fd0ef52da7d2b046b7be0a764315c">点击我查看妹子图</a>
    </p>
    <p>
    <a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-09-02%2F5f4ef6b1bd2b5.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663848876&t=960ef57e740ee944d8b86a88705738aa">点击我查询第二张妹子图</a>
    </p>
    <p>
    <a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F21%2Fc0%2Ff5%2F21c0f5d2f4b6325808b548d2f94e0ef3.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663849141&t=e549b3759fed89846db8ba6521d98eb8">点击我查看美女图</a>
    </p>
</body>
1.a标签默认的颜色有两种，紫色和蓝色
	紫色：连接已经被人点击过了那么就是紫色
	蓝色：还未被人点击过那么就是蓝色
2.鼠标悬浮上去之后样式改变，适用于所有含有文本的标签
     a:hover {
       color: blue;
     }
3.未被点击则默认为黑色
     a:link {
       color: black;
     }
4.被点击的状态呈现为红色
     a:active {
       color: red;
     }
5.全部无论怎么样都是灰色
     a:visited {
       color: gray;
     }

选择器之伪元素选择器

前情概要
    <p>
      唱、跳、rap、篮球、松果弹抖闪电鞭、混元形意太极拳、耗子尾汁、偷袭.....
    </p>
1.通过代码来操控标签的文本内容
    p:first-letter {  		首行第一个字符
      font-size: 32px;  	字体大小
      color: pink; 			颜色
    }
2.通过代码增加内容
    p:before {  前方增加
      content: "ikun的马师傅";
      color: red;  字体颜色
    }
    p:after {  后方增加
      content: "刘瑞奇每天都去私人会所";
      color: darkorange;  字体颜色
    }
3.委员色选择器可以用在解决标签浮动所带来的负面影响，也可以用来制作数据的防爬，因为它本身是一段代码，并且不会被选中

选择器之优先级

  • 问题

    • 既然我们的选择器查找到相同的标签修改成不同的格式那么，标签最终到底应该听谁的变成谁想让我变成什么样

  • 选择器相同的情况下，根据引入位置的不同

    • 我们采用就近原则

  • 选择器不同的情况

    • 行内 > id选择器 > 类选择器 > 标签选择器
    • 行内选择器虽然是优先级最高的但是我们是不建议使用行内选择器的

  • 强制修改标签样式

    • !important
    • emyElement.style.cssText = "background-color: yellow ! important;"

字体相关样式

1.width属性康有为元素设置高度
2.height属性可以为元素设置高度
3.只有块儿级标签才可以设置宽度，内敛标签宽度有内容来决定
4.文字字体
	font-family可以把多个名字名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个，浏览器会使用他可是别的第一个值。
	body {
        font-family:"Microsoft Yahei","宋体"，"Airal",sans-serif
    }
5.字体大小,如果设置成inherit表示集成父元素的字体大小值
	p {
		font-size: 16px;
    }
6.字重（粗细）
	font-weight用来设置字体的字重（粗细）
	p {
		font-weight:lighter;
    }
7.文本颜色
	颜色属性被用来设置文字的颜色。
	颜色是通过css最经常的指定：
		十六进制值：如：#FF000
		一个RGB值：如：RGB（255,0,0）
		颜色的名称：如：pink
		p {
			color:red;
			color:rgb();
			color:#3e3e3e;
			color:rgba(1.1.1.0.5)
        }
	还有rgba（255,0,0,0.5）第四个值为alpha透明通道，制定了色彩的透明度/不透明度，它的范围0.0到1.0之间数字越小透明度越高
8.文字属性
	text-align 属性规定元素中的文本的水平对齐方式
9.文字装饰
	text-decoration 属性来给文字添加特殊效果
		常用的为去掉a标签默认的下划线：
			a {
				text-decoration:none;
            }
10.首行缩进
	将段落进行缩进，一般缩进为32px，16px是一位：
		p {
			text-indent:32px;
        }
  • 字体粗细
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值
  • 文本对齐
值 描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐
  • 文字装饰
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。

背景属性

1.背景颜色
background-dolor: pink;
2.背景图片
background-image: url('1.jpg')
3.背景重复
repeat():
repeat-x:
repeat-y:
no-repeat:
    
background-repeat:no-repeat;
4.背景位置
background-position: left top;
background-position:200px 200px;
5.有时候我们觉得上方一条一条搞得有点麻烦那么我们也可以将他简写
background:#336699 url('1.png')no-repeat left top
  • 有趣小案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动背景图示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1115%2F101021113337%2F211010113337-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663854541&t=3b45de75d2d3079d59d3053ee53362ed")  center center;
            background-attachment: fixed;
        }
        .d1 {
            height: 500px;
            background-color: darkorange;
        }
        .d2 {
            height: 500px;
            background-color: white;
        }
        .d3 {
            height: 500px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

边框属性

  • 边框属性
    • border-width:2px;
    • border-style:solod;
    • border-color:white;
#il {
	border-width:2px;
	border-style:solid;
	border-color:white;
}
简写方法：
il {
	broder:2px,solid,white;
}

除了可以统一设置边框我们还可以单独为某一个边框设置样式，如下所示：

li {
	border-top-style:dotted;
	border-top-color:pink;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-deft-style:none;
}
虽然挺丑的但是也证明了功能
  • border-radius
    • 用这个属性可以实现圆表边框的效果
    • 将border-radius：50%；设置为长或高的一般即可得到一个圆形

display属性

  • display用于控制HTML元素的显示效果
值 意义
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。
  • display:"none"与"visbility":hidden的区别：
    • visilility：hidden；可以隐藏某个元素，但隐藏元素人需要占用未隐藏之前一样的空间。也就是说改元素虽然被隐藏了，但是还在影响布局
    • display：none；可以隐藏某个元素，并且隐藏的元素不会占用空间，也就是说该元素不但隐藏了，并且从之前的布局上完全消失了，有很多的钓鱼网站就是使用这种方式进行钓鱼
posted @ 2022-08-23 22:44  Joseph-bright  阅读(164)  评论(0)  编辑  收藏  举报