前端(css)

一、表单标签的补充说明

基于form表单发送数据

1.用于获取用户数据的标签至少应该含有name属性

<form action="">
	<input type="radio" name="nothing">好家伙
	<input type="radio" name="nothing">好东西
	<input type="radio" name="nothing">好宝贝

</form>

  • name属性相当于字典的键，用户输入的数据会被保存到标签的value属性中，拥有name属性的数据才能发送到后端被识别。

  • value属性相当于字典的值

radio类型的input标签需要设置统一的name属性才能实现单选的目的

  • 没有name属性的标签，form表单会直接忽略，不会发送。

2.如果不需要用户填写数据 只需要选择 那么我们需要自己填写value

<input type="radio" name="gender" value="male">

这里的value就相当于默认参数，如果不写就是使用默认的值，如果写了就是使用我们给定的值

3.针对input标签理论上应该配一个label标签绑定 但是也可以不写

<label for="d1">username:
        <input type="text" id="d1">
    </label>
   	<label for="d1">username:</label>
    <input type="text" id="d1">

用上这label标签后，我们点击网页中的username就会自动跳转到input的选项框中区

4.标签的属性如果和属性值相等 那么可以简写

<input type="file" multiple="multiple">
	<input type="file" multiple>
    
<select name="" id="" multiple>
    <option value="" selected="selected">111</option>
</select>
<select name="" id="" multiple>
    <option value="" selected>222</option>
</select>

5.针对选择类型的标签可以提前设置默认选项

input标签使用checked属性设置默认值，select标签中的option标签需要设置selected属性设置默认值，两者因为属性值和属性名称一样，都可以省略值的书写

<input type="radio" name="gender" checked="checked">
 	<input type="radio" name="gender" checked>
 	<input type="checkbox" checked="checked">
   	<input type="checkbox" name="gender" checked>
	<option value="" selected="selected">222</option>
    <option value="" selected>222</option>

6.下拉框与文件上传可以复选

<input type="file" multiple>
   	<select name="" id="" multiple>

CSS：层叠样式表

css简介

  • CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表 CSS 是也是一种标记语言

  • CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、 边距等）以及版面的布局和外观显示样式

  • CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML更漂亮， 让页面布局更简单

css样式之标签的查找

css的组成部分：选择器和声明
image

  • 标签的两大重要属性>>>:用于区分标签
  1. class属性
    分门别类，主要用于批量查找
  2. id属性
    精确查找，主要用于点对点
 <div class="c1 c2 c3"></div>
    <p class="c1 c5"></p>
    <span class="c1 c8"></span>
    <div id="d1"></div>
    <a href="" id="d2"></a>

学习css的流程

  1. 先学习如何查找标签
  2. 再学习如何调整样式

css语法基础知识

  • css语法结构
    选择器 {
    样式名1:样式值1;
    样式名2:样式值2
    }
  • css注释语法
/*注释内容*/
  • 引入css的多种方式
    1.head内style标签内部编写(学习的时候使用)
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

2.head内link标签引入(标准的方式)

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

3.标签内部通过style属性直接编写(不推荐)

<p style="color: red">Hello world.</p>

CSS选择器

css基本选择器

  1. 标签选择器(直接按照标签名查找标签)
div {
         color: red;
    }
  1. 类选择器(按照标签的class值查找标签)
.c1 {
   color: green;
}

3.id选择器(根据标签的id之精准查找标签)

#d1 {
    color: yellow;
}

4.通用选择器(直接选择页面所有的标签)

* {
    color:blue;
}

CSS组合选择器

预知知识点 我们对标签的嵌套有另外一套说辞

<p>ppp</p>
<p>ppp</p>
<div>div
    <div>divdiv
        <p>divdivp
                   <span>divdivpspan</span>
                </p>
            </div>
            <p>divp</p>
            <span>divspan</span>
        </div>
        <p>ppp</p>
        <span>spanspan</span>
  • 针对标签的上下层级以及嵌套有另外的说法
    父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签
    1.后代选择器(空格)
div span {
        color: red;
    }
  1. 儿子选择器(大于)
div>span {
        color: yellow;
	}
  1. 毗邻选择器(加号)
div+span {
        color: yellow;
     }
  1. 弟弟选择器(小波浪号)
div~span {
        color: yellow;
    }

分组与嵌套

div,p,span {  # 多个选择器合并查找
            color: yellow;
        }
 	#d1,.c1,span {
            color: green;
        }
	div.c1 {  查找class含有c1的div
            color: red;
        }
	div#d1 {  查找id是d1的div
            color: red;
        }
	.c1 p.c2 {  查找含有c1样式值里面的含有c2样式值的p标签
           color: antiquewhite; 
        }

属性选择器

	/*[username] {*/	按照属性名查找
    /*    color: red;*/
    /*}*/

    /*[username='jason'] {*/  按照属性名等于属性值
    /*    color: yellow;*/
    /*}*/

    div[username='jason'] {  
        color: darkcyan;
    }

伪类选择器

"""a标签补充说明 针对没有点击过的网址 默认是蓝色 点击过的则为紫色"""
	 a:hover {
            color: orange;
        }
    input:focus {  input获取焦点(被点击)之后采用的样式
			  background-color: red;
    }

伪元素选择器

	     /*p:first-letter {*/
        /*    font-size: 48px;*/
        /*    color: red;*/
        /*}*/
        p:before {		css添加文本无法正常选中
            content: '嘿嘿嘿';
            color: blue;
        }
        p:after {		css添加文本无法正常选中
            content: '呵呵呵';
            color: red;
        }

选择器优先级

image

  1. 选择器相同，导入方式不同
    就近原则，代码处于下方的样式，会先被使用

  2. 选择器不同，导入方式相同
    优先级：内联样式 >>> id选择器 >>> 类选择器 >>> 标签选择器

字体属性

  • 字体大小
p {
  font-size: 14px;
}
  • 字重（粗细）
    font-weight用来设置字体的字重（粗细）
值 作用描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值
  • 文本颜色
    颜色属性被用来设置文字的颜色

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

ps：取色器工具可以快速取得想要的颜色，以下两种软件有这种功能。
1.pycharm
2.微信截图功能，可以看rgb值

文字属性

  • 文字对齐
    ext-align 属性规定元素中的文本的水平对齐方式
值 作用描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐
  • 文字装饰
    text-decoration 属性用来给文字添加特殊效果
值 作用描述
none 默认。定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线
inherit 继承父元素的text-decoration属性的值
  • 常用的为去掉a标签默认的自划线：
a {
  text-decoration: none;
}
  • 首行缩进
    将段落的第一行缩进 32像素：
p {
  text-indent: 32px;
}

背景属性

div {
            width: 800px;
            height: 800px;
        设置背景框的大小
            /*background-color: red;*/
        背景颜色
            /*background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");*/
        使用图片充当背景填充内容
            /*background-image: url("666.png");*/
        默认情况下使用背景填充内容会重复重复填充，直到填满背景框
            /*background-repeat: no-repeat;*/
        用了no-repeat之后就只填充一张图片，不会重复填充
            /*background-repeat: repeat-x;*/
        横向填充
            /*background-repeat: repeat-y;*/
        竖向填充
            /*background-position: center center;*/
        使图片在x轴和y轴上都处于中间，也就是正中间
            background:  url("666.png") blue no-repeat center center;
        }
    当多个属性名有相同的前缀 那么可以简写一次性完成
posted @ 2022-12-01 20:42  吴仁耀  阅读(76)  评论(0)    收藏  举报