今日内容回顾

表单标签补充

  1. 获取用户输入的标签俩大重要的属性

    name属性：类似于字典的键

    value属性：类似于字典的值

    form表单在朝后端发送数据的时候，标签必须要有name否则不会发送该标签的值

  2. 获取用户输入的input标签理论上需要有label配合使用

    <label></label>
示例：
	<label> for="某个input标签的id值"></label>

  3. 获取用户输入的input标签也可以添加背景提示

    示例：
	<input type="text" name"password" placeholder="密码">

  4. 获取用户输入的标签如果不是让用户自己写而是选择，那么标签需要自己写vlue

    示例：
	<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标签也可以默认选中

    select="selected" 简写为 selectd

css层叠样式表

  • 调整标签样式

  • 语法结构

    选择器 {属性名1：属性值1；

    属性名2：属性值2；}

  • 注释语法

    /* 注释内容 */

  • 三种编写CSS的方式

    1. head中style标签内部直接编写（学习阶段使用 方便）

      # 示例：
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p {
                color: red;
            }
        </style>
     </head>

    2. head中link标签引入外部css文件（最正规）

      # 示例：
     <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="mycss.css">
     </head>

    3. 直接在标签内部通化style属性编写（不推荐）

      # 示例：
     <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <h1 style="color:yellow">h1标签</h1>
      </head>

css基本选择器

  • 标签选择器

    直接编写标签名来查找标签。

    # 示例：
	div {color:green;
        }
# 查找所有的div标签，并将内部的文本颜色变为绿色

  • 类选择器

    通过编写class的值来查找标签。

    # 示例：   
    .c1 {
        color:red;
    }
# 查找所有class属性中含有c1的标签，并将内部的文本颜色变为红色

  • id选择器

    通过编写id的值来精准查找标签

    # 示例
	# d1 {
    color：blue
    }
# 查找id值是的d1的标签，并将内部的文本颜色该为蓝色

  • 通用选择器

    查找所有的标签

    # 示例：
    * {
        color:blue
    }
# 查找所有的标签，并将内部的文本颜色改为蓝色

css组合选择器

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*下方输入需要查找的选择器*/    
       #d1 span {
           color: red;
       }
    </style>
</head>
<body>
    <p>div上面的p</p>
    <div id="d1">div
        <p>div内部的p
            <span>div内部的p的内部的span</span>
         </p>
    </div>
    <p>div下面的p</p>
</body>
</html>
"""
查找div标签内部所有的span（后代）
1.后代选择器
	俩个选择器之间空格隔开，查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签。“查找div的所有后代包括它儿子”
#d1 span {
	color：blue；
}
查找div标签内部所有的儿子span
2.儿子选择器
	俩个选择器之间用大括号隔开，查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签。“只查找div的儿子”
#d1 span {
	color：orange；
}
查找div标签同级别下紧挨着的一个p标签（弟弟）
3.毗邻选择器
	俩个选择器之间用加号隔开，查找同一级别紧挨着的一个p标签
#d1 p {
	color：red；
}
查找div标签同级别下面所有的span标签（弟弟们）
4.弟弟选择器
	俩个选择器之间用波浪号隔开，查找div同一级别所有的p标签
#d1~p {
	color：blue；
}
"""

css属性选择器

所有的标签除了有自己默认的属性之外，还可以拥有自定义的任意属性

默认属性 id class

自定义属性 自己设置的 列如： x=1 y=2 随自己设定。

属性选择器通过标签的属性来筛选标签

"""
示例：
	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；
    }
# 还可以在选择器基础之上添加额外的选择使查找更为精准
# 示例：
	span.c1,div#d1 {
    	color:red
    }

css选择器之伪类选择器

  • a标签的特性

    a标签默认颜色有俩种 紫色和蓝色

    紫色：链接地址已经被点击过了

    蓝色：链接地址从来没有被点击过

    a：hover {

    ​ color：blue；

    }

    鼠标悬浮上去之后样式改变，适用于所有含有文本的标签

    visited：访问后

    link：访问前

    hover：鼠标悬浮上去

    active：被点击的那一刻

css之伪元素选择器

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

# 修文本内容第一个元素尺寸和颜色 first-letter
p:first-letter {
        font-size: 48px;  # 调节内容大小
        color: red;  # 改变颜色
	}
# 在指定文本内容前面添加内容 before
p:before {
        content:"内容";
        color:red;
	}
 # 在指定文本内容尾部添加内容 after
 p:after {
        content:"内容";
        color:blue;
        }
 # 伪元素选择器可以用在解决标签浮动带来的负面影响，也哭用来做数据的防爬

css选择器优先级

当多个选择器查找到相同的标签修改不同的样式，执行结果

  1. 选择器相同，引入位置不同

    从上往下执行，可以理解为后面直接覆盖前面的。

    就近原则

  2. 选择器不同的情况

    行内 > id选择器 > 类选择器 > 标签选择器

字体样式

width属性可以为元素设置宽度

height属性可以为元素设置高度。

块级标签才能设置宽度，行内标签的宽度由内容来决定

  • 字体样式

    body {
    font-family:  "微软雅黑";
}

  • 字体大小

    p {
    font-size: 16px;  # 根据数字调节字体大小
}

  • 字体粗细

    p {
    font-weight:lighter;
}

    font-weight设置字体的粗细

    值 描述
    mormal 默认值，标准
    bold 粗体
    bolder 更细
    lighter 更细
    100~90 设置具体粗细，400等同于normal，700等同于bold
    inherit 继承父元素字体的粗细值

  • 文本颜色

    p {
    color:red; 
    color:rgb(254，84，48);  
    color:#3e3e3e;  # 十六进制值
    color:rgba(1,1,1,0.5)   # 0.5 调节透明度透明度

  • 文本对齐

    p {
    text-align:center;
}
left：左边对齐，默认值
center:居中齐
right：右对齐
justify：俩段对

  • 文字装饰

    a {
    text-decoration: none;
}
none:默认，定义标准文本
underline：文字下面加一条线
overline：文字上面加一条线
line-through：文字中间穿过一条线
inherit：继承父元素的text-decoration属性的值

  • 文字首行缩进量

    p {
    text-indent: 32px;
}

背景属性

如果多个属性名有相同前缀的时候可以简写为background
div {
        height: 400px;
        width:800px ;
        background-color: red;
     
        background-image: url("图片来源");
     
        background-repeat: repeat-x;
     
        background-repeat: repeat-y;
     
    }
    </style>

/*背景颜色*/
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;*/

边框属性

display属性

posted @ 2022-08-23 22:52  瓮小辉  阅读(21)  评论(0)    收藏  举报