首页 > 其他分享 >2前端开发css

2前端开发css

时间:2023-10-17 17:11:46浏览次数:36  
标签:color 标签 选择器 查找 属性 前端开发 css d1

form表单

'''获取前端用户数据并发送给后端服务器'''
<from action = ""></from>  #需要再form标签内部编写获取用户数据标签
#1属性action
   控制数据的提交地址
    方式1:写全路径
     action = "http://www.aa7a.cn/user.php"
     方式2:写后缀(自动补全IP和PORT)
     action = "user.php"
     方式3:不写(朝网页所在的地址提交)
     action =  ""
'''URL:统一资源定位符(网址)'''
#2.input标签
  获取用户各种类型数据的标签(html里面的变形金刚)
  type属性
    text                正常展示的普通文本
    password        密文展示
    date               日历展示
    radio              单选框
           可以通过添加checked = "checked"设置默认值
  ps:如果属性名和属性值相同,可以简写checked
   checkbox         多选
       可以通过添加checked = "checked"设置默认值
       ps:如果属性名和属性值相同,可以简写checked
    email             邮件格式数据
    file                文件数据
        可以通过添加multiple属性控制获取单个还是多个文件
   submit            触发form表单提交数据的动作
   reset               重置页面填写的数据
   button             普通按钮默认没有任何功能
      意味着以后可以给它添加任意的功能(js事件)
#3select标签
   下拉框
   <select name= "province"   id = "">
                  <option value = "BJ">北京</option>
                  <option value = "SH">上海</option>
                  <option value = "SZ">深圳</option>
</select>
    一个个的下拉选项是一个个option标签
    默认是单选   也可以添加mutiple变成多选
#4textareab
   获取大段文本内容
   <textarea  name = "desc"></textarea>
'''
   input标签中有两个非常重要的属性
    1.name属性
      类似于字典中的key(自己)
    2.values属性
      类似于字典中的value
    用于区分具体数据含义
    ps:我们在编写input标签的时候应该添加name属性
'''
#5.lable标签
  专门给input标签配文字说明,也可以不使用
  方式1
    <label for = "d1">用户名:</label>
    <input type = "text"  id="d1">
  方式2
     <label>用户名:
       <input  type ="text">
     </label>

 网络请求方式

'''最常见的网络请求方式有两种'''
1.get请求
 朝服务器索要数据
2.post请求
  朝服务器提交数据

#两种请求都可以携带数据
   get请求是在url后面通过?组织数据
    url?name = jason&pwd = 123&email = [email protected]

  post请求是在请求体中组织数据
  HTTP协议请求数据格式

 '''
  get请求虽然可以携带数据  但是一般只用于不重要的数据携带
  并且get请求携带数据的大小有限制  最多只能携带2KB左右
    '''
form表单中有一个method属性  用于控制提交的方式
  有两个选项  默认是get请求   

css简介

#1语法结构
  选择器  {属性名1:属性值1;属性名2:属性值2}
#2语法注释
  /*注释内容*/
'''
 一个正常的网页css样式是非常多的  就算专门开设css文件储存也很乱
 这个时候就可以在css文件中通过注释来辅助辨别查找'''

 eg :
      /*博客园样式*/
      /*导航条样式*/
      /*左侧栏样式*/
      /*右侧栏样式*/

#3多种引入css的方式
  1.head内style标签内部直接编写css代码
  建议在小白学习阶段可以使用
  2.head内link标签引入外部css文件
  工作中一般使用的都是link形式   符合标准
  3.标签内部通过style属性直接编写
    第三种也称之为"行内式"是最不推荐的一种方式
   因为它会将HTML和css柔和到一起  增加了耦合度
  
#问:CSS是用于调整HTML标签样式的  但是同一个页面上有很多相同的标签并且可能需要有不同的样式
先学会如何查找标签
之后才能学会如何给标签修改样式

 css基本选择器

#1标签选择器(范围查找)
  直接通过标签名查找标签
   h1{
          color:deeppink;/*让所有h1标签内部所有的字体颜色都变为深粉色*/
       }

#2类选择器(范围查找)
  通过标签class属性查找标签(关键性符号是句点符)
   .c1{
         color:greenyellow;/*将所有class属性中含有c1的标签内部字体颜色改为亮绿色 
       */}

#3  id选择器
   通过标签id属性查找标签
   #id{
           color:orange;
         }

#4通用选择器(了解,几乎不用)
    查找所有标签
    *{
        color:blue;
       }

css组合选择器(重要)

'''
  补充:标签关系
 <div>'div1
    <div>div2
        <p>p1</p>
    </div>
    <p>p2
         <span>span1</span>
    </p>
    <span>span2</span>
 </div>
  通过嵌套层级来表示亲属关系
  1.对于div1来说div2/p2/span2都是儿子
  2.对于div2/p2/span2来说div1就是父亲
  3.对于p1来说div2是父亲/div1是爷爷(可以将div1和div2统称为祖先)
  4.对于span2来说div2/p2是哥哥   span2是弟弟
  5.div1内部所有的标签,无论层级都可以称之为是div1的后代
  ps:判断的时候一定要看层级关系
'''

#1.儿子选择器(关键符号是大于号)
  #d1 > span {查找id是d1标签内部所有的儿子span
               color:red;
              }
#2.后代选择器(关键符号是空格)
  #d1  span {查找id是d1标签内部所有的后代子span
               color:red;
              }
#3.毗邻选择器(关键符号是加号)
  #d1 + a {查找id是d1标签同级别下面紧挨着第一个a
               color:red;
              }
#4.弟弟选择器(关键符号是小波浪号)
  #d1 ~ a {查找id是d1标签同级别下面所有a标签
               color:red;
              }

属性选择器

#根据标签内部属性名和属性值查找标签(关键符号是中括号)
1.方式1:直接通过属性名查找
  [type]{
              background-color: red;
            }
2.方式2:属性名是type并且值是text的标签
  [type="text"]{
              background-color: red;
            }
3.方式3:属性名是type并且值是text的div标签
  div [type="text"]{
              background-color: red;
            }

分组与嵌套

#1.分组
 div,p,span {查找div或p或span
               color:red;
                       }

#2嵌套
  #d1,.c1,span{查找id是d1或class包含c1或span
                 color:red;
                        }
'''
  综合玩法
  玩法1
    div#d1   查找id是d1的div标签
    div.c1     查找class包含c1的div标签
  玩法2
    div #d1   查找div内部id是d1后代的标签
    #d1 > .c1   查找id是d1的内部class包含c1的儿子标签
'''

伪类选择器

#1鼠标悬浮
  p:hover{ 鼠标移动到p标签上方  字体颜色动态修改为橙色
                    color:orange;
               }
#2获取焦点(指的是input输入框被选中的状态)
  input:focus  {  输入框被鼠标左键选中(聚焦)
                  background-color:black;
                    }

 

标签:color,标签,选择器,查找,属性,前端开发,css,d1
From: https://www.cnblogs.com/Milk1/p/17769522.html

相关文章

  • CSS-03
    去掉li前面的项目符号:list-style:none圆角边框border-radius:12px;可以是px或百分比若将正方形改为圆形,则:border-radius:50%;或者将其设为宽度的一半。盒子阴影box-shadow:8px10px10px10pxrgba(0,0,0,.3);水平阴影垂直阴影模糊距离阴影的尺寸阴影颜色透明色:rg......
  • CSS - 放大缩小淡入淡出效果
    效果图:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>CSSZoominandoutAnimation</title><style>@-webkit-keyframeszoomIn{from{......
  • 在html中 如何 插入 js 和 css 代码 以及 如何 引用 js 和 css 文件
    在HTML中插入JavaScript和CSS代码,以及引用JavaScript和CSS文件的方法如下:插入JavaScript代码:在HTML文件中,你可以使用<script>标签来插入JavaScript代码。例如:<script>functionmyFunction(){alert("Hello,World!");}</script>引用JavaScript文件:如果你的JavaScript......
  • [学习笔记] 有关CSS响应式设计的单位
    em和rem单位:em和rem是相对于元素的字体大小计算的单位。em单位是相对于父元素的字体大小,而rem单位是相对于根元素(通常是 <html> 元素)的字体大小。em和rem单位可以用于实现相对于字体大小的自适应布局。vw和vh单位:vw和vh是视口宽度和视口高度的百分比单位......
  • 26个CSS超实用技巧
    1.文字溢出显示省略号单行文字:一定要设置宽度p{​•width:200px;​•overflow:hidden;text-overflow:ellipsis;white-space:nowrap;​​​}多行文字溢出显示省略号p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-l......
  • Tailwind CSS 速查
    TailwindCSS提供了大量的实用程序类,这些类名都是使用缩写的方式,以更简洁地表述其含义。以下是一些常用的TailwindCSS缩写及其对应的意义:布局w:widthmax-w:max-widthh:heightmax-h:max-heightm:marginmt:margin-topmb:margin-bottomml:mar......
  • 【前端开发】可视化大屏网页适配方案autofit.js
    说明:针对全屏的网页,使用autofit.js可自适应大小屏幕,原理是通过屏幕改变放大/缩小网页,并做了留白区域的兼容处理。 地址:https://github.com/huiJeck/autofit.js#autofitjs......
  • 【前端开发】新版Chrome浏览器接口mock调试技巧,超实用
    给大家分享一个 Chrome117 更新中最实用的一个功能:在Network面板中发送mock请求。修改返回响应数据想要修改接口返回的数据,设置成特定的数据,首先打开 网络(Network) 面板,找到你需要Mock的接口,右键然后选择替换内容(Overridecontent): 这时候浏览器会提示:选择要用来......
  • 什么???CSS也能原子化!
    1.什么是原子化CSS?AtomicCSSistheapproachtoCSSarchitecturethatfavorssmall,single-purposeclasseswithnamesbasedonvisualfunction.Let’sDefineExactlyWhatAtomicCSSis上文的意思翻译过来就是原子化CSS是一种CSS的架构方法,倾向于使用用途单一且......
  • web前端html+css页面内容的六种隐藏方式
    一、使用透明度语法:opacity:0注意:元素消失,但是还会占据空间,只是视觉看不出来<style>.box{width:100px;height:100px;background-color:aquamarine;opacity:0;}</style><divclass="box"></div> 二、使用display语法:display:none注意:元素消失,不会占据空间<style......