标签：02 color 标签前端 background border 选择器属性

表单标签

1.用户输入标签两大重要属性(form-input)

1.1 name属性：类似于字典的键

1.2 values属性：类似于字典的值

注：针对给后端传递数据让后端知道用户输入的信息对应的字段

form表单向后端发送数据时必须要有name字段否则无法发送

 <p>password:<input type="password" name="password" placeholder="密码"></p>

2.input属性理论上应该与label属性配合使用否则input标签不太符合要求

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

3.input属性添加背景提示(如登录软件时用户名及密码框中的文字提示)(placeholder="密码")

<p>password:<input type="password" placeholder="密码"></p>

4.input属性用户直接选择要填写value值(给后端传数据)

<p>gender:
       <input type="radio" name="gender" value="meal">男
       <input type="radio" name="gender" value="female">女
 </p>
 <p>hobby:
        <input type="checkbox" name="hobby" value="sing">唱歌
        <input type="checkbox" name="hobby" value="draw">绘画
        <input type="checkbox" name="hobby" value="photograph">摄影
 </p>

5.针对radio标签(单选)与checkbox标签(多选)显示默认选中(checked="checked"/checked)

<p>gender:
      <input type="radio" name="gender" value="meal">男
      <input type="radio" name="gender" value="female" checked="checked">女
 </p>
 <p>hobby:
      <input type="checkbox" name="hobby" value="sing">唱歌
      <input type="checkbox" name="hobby" value="draw" checked="checked">绘画
      <input type="checkbox" name="hobby" value="photograph" checked>摄影
 </p>

6.针对option标签(滚动数据)显示默认选中(selected="selected"/selected)

<p>province：
      <select name="province">
            <option value="nj">南京</option>
            <option value="cd" selected="selected">成都</option>
            <option value="cq">重庆</option>
      </select>
</p>
<p>GF:
     <select name="" multiple>
            <option value="" selected="selected">嘻嘻</option>
            <option value="" selected>哈哈</option>
            <option value="">霍霍</option>
    </select>
</p>

css操作

CSS简介

1.定义：CSS层叠样式表(英文全称：Cascading Style Sheets) 用来表现HTML等文件样式的计算机语言调整标签样式

2.特点：丰富的样式定义、易于使用与修改、多页面应用、层叠、页面压缩

3.语法结构

选择器 {
 属性名1:属性值1;
 属性名2:属性值2;
}

4.注释语法

/*注释内容*/      # 与mysql中的一种注释语法一致(#、--注释、/* */)

5.三种编写CSS的方式

5.1 head中style标签内部直接编写(学习阶段使用方便查看)

5.2 head中link标签引入外部CSS文件(最正规方式)

5.3 直接在标签内部通过style属性编写(不推荐修改麻烦)

选择器

基本选择器

1.标签选择器：直接编写标签名类查找标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{color:green;}
    </style>
</head>
<body>
     <p>阳光正好 微风不燥</p>
</body>

2.类选择器：通过编写class的值来查找标签(.class值)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{color:coral}
    </style>
</head>
<body>
     <span class="c1">阳光正好 微风不燥</span>
</body>

3.id选择器：通过编写id值精确查找标签(#id)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id{color:green;}
    </style>
</head>
<body>
     <span id="id">阳光正好 微风不燥</span>
</body>

组合选择器

1.后代选择器：在该标签以下的所有标签称为该标签后代(两个选择器之间用空格隔开查找符合后面选择器的标签)

2.儿子选择器：在该标签下的第一级标签称为该标签的儿子(父标签>子标签)

3.毗邻选择器：该标签同级别下挨着的第一个标签(该标签+挨着的标签)

4.弟弟标签：该标签同级别下的标签(该标签~同级别标签)

属性选择器

1.属性选择器：按照标签属性选择需要的标签所有标签除了自身属性外也可自定义属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*[name]{*/
        /*    background-color: green;*/
        /*}*/
        [name="username"]{
            background-color: green;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" name="username">
        <input type="password" name="password">
    </form>
</body>

分组与嵌套

1.当多个选择器查找标签需要相同的样式可以合并(选择器类型不受限制)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*span,p,div{*/           <!--1-->
        /*    color: green;*/
        /*}*/
        /*#id,p{*/                <!--2-->
        /*    color:red;*/
        /*}*/
        div#id,span.c1{           <!--3-->
            color: teal;
        }
    </style>
</head>
<body>
    <div>
        <span class="c1">阳光</span>
        <p>花草</p>
        <div id="id">河流</div>
    </div>
</body>

伪类选择器

1.鼠标悬浮上去之后颜色改变适合所有含有文本的标签(a:hover)

注：a标签默认的颜色有两种紫色和蓝色

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

蓝色：链接地址未被点击过

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:hover{
            color: #f1160f;
        }
    </style>
</head>
<body>
   <a href="http://www.baidu.com" target="_blank">点我去百度</a>
   <a href="http://www.jd.com">点我去京东</a>
</body>

2.未访问的链接(a:link)

3.选定的链接(a:active)

4.已访问的链接(a:visited)

5.input输入框获取焦点样式(input:focus)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*a:hover{*/
        /*    color: #f1160f;*/
        /*}*/
        /*a:link{*/
        /*    color:red;*/
        /*}*/
        /*a:active{*/
        /*    color:olivedrab;*/
        /*}*/
        /*a:visited{*/
        /*    color:red;*/
        /*}*/
        input:focus{
            outline: none;
            background-color: green;
        }
    </style>
</head>
<body>
   <form action="">
       <input type="text" name="username">
   </form>
   <a href="http://www.baidu.com" target="_blank">点我去百度</a>
   <a href="http://www.jd.com">点我去京东</a>
</body>

伪元素选择器

1.通过CSS代码来操作标签的文本内容(伪元素选择器可以用来解决标签浮动带来的负面影响也可以用来做数据防爬) before与after多用于清除浮动

注：通过下添加的数据无法选择

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-letter{
            font-size: 100px;
            color:green;
        }
        p:before{
            content:"真是好天气";
            color:brown;
        }
        p:after{
            content:"尽情的开心吧";
            color:firebrick;
        }
    </style>
</head>
<body>
  <p>阳光明媚 微风不燥</p>
</body>

操作优先级

1.选择器相同引入位置不同：就近原则

2.选择器不同的情况：行内>id选择器>类选择器>标签选择器

注：强制修改标签样式的操作：!important

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <style>-->
<!--        p{-->
<!--            color:red;-->
<!--        }-->
<!--    </style>-->
    <link rel="stylesheet" href="css数据.css">
</head>
<body>
    <p>电闪雷鸣 风雨交加</p>
<!--    <p style="color: green">电闪雷鸣 风雨交加</p>-->
</body>

字体相关操作

1.宽与高

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

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

注：块儿级标签才能设置宽度行内标签的宽度有文本内容决定

2.文字字体：font-family

font-family可以把多个字体名称作为一个"回退"系统来保存如果浏览器不支持第一个字体则会尝试下一个

3.字体大小：font-size(如果设置成inherit表示继承父元素的字体大小值)

4.字重(粗细)

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

5.文本颜色

十六进制：#FF0000

一个RGB值：RGB(255,0,0)

颜色的名称：green

6.文字属性

6.1 文字对齐：text-align属性

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

6.2 文字装饰：text-decoration属性(text-decoration:none 取掉a标签默认的下划线)

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

6.3 首行缩进：text-indent属性(后跟像素)

背景相关操作

1.背景颜色：background-color

2.背景图片：background-image

3.背景重复

属性	描述
repeat(默认)	默认图片平铺满整个网页
repeat-X	背景图片只在水平方向上平铺
repeat-y	背景图片只在垂直水平上平铺
no-repeat	背景图片不平铺

注：支持简写 background:#336699 url('1.png') no-repeat left top;

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            font-family: "Adobe 黑体 Std R";    <!--字体设置-->
            font-size: 70px;                    <!--字体大小-->
            color: olivedrab;                   <!--字体颜色-->
            text-align: center;                 <!--文字排版-->
            background-image:     <!--背景图片--> url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-090919%2F2gfegfqah5a2gfegfqah5a.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663852687&t=857b626a35bc4bb8dceaaf803cd95b88");
            background-position: center;     <!--图片居中-->
            background-size: 500px;          <!--背景图片大小-->
            background-repeat: no-repeat;    <!--照片不平铺-->
        }
    </style>
</head>
<body>
    <div>
         <p>狂风四起 找不到方向迷了路</p>
    </div>
</body>

边框相关操作

1.边框属性

属性	描述
border-width	边框宽度
border-style	边框样式
border-color	边框颜色

注：可简写 border:宽度样式颜色

2.边框样式

属性	描述
none	无边框
dotted	点状虚线边框
dashed	矩形虚线边框
solid	实线边框

注：可以单独设置某一侧的边框

3.圆形边框：border-radius(设置高宽一致)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: green;
            border-left-color: black;
            border-left-width: 70px;
            border-left-style: solid;
            border-right-color: black;
            border-right-width: 70px;
            border-right-style: solid;
        }
    </style>
</head>

<body>
    <div></div>
</body>

隐藏属性-display

注：visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div {*/
        /*    width: 200px;*/
        /*    height: 500px;*/
        /*    background-color: green;*/
        /*    border-left-color: black;*/
        /*    border-left-width: 70px;*/
        /*    border-left-style: solid;*/
        /*    border-right-color: black;*/
        /*    border-right-width: 70px;*/
        /*    border-right-style: solid;*/
        /*}*/
        p{
            width: 200px;
            height: 200px;
            background-color: gray;
            border: 5px solid black;
            border-radius: 50%;
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091301%2Fv1e3d2do0dsv1e3d2do0ds.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663856833&t=367b715d8c961f7da56a33f4c053facd");

        }
    </style>
</head>

<body>
    <div></div>
    <p></p>
</body>

标签：02,color,标签,前端,background,border,选择器,属性
From： https://www.cnblogs.com/040714zq/p/16618116.html

前端02