2018-10-30day2-css语法基础

作者: MW演员 | 来源:发表于2018-10-30 18:39 被阅读0次

2018-10-30day2-css语法基础
【Android】知识点汇总，坚持原创ing
java
软帝学院：80道java基础部分面试题（四）
快速上⼿ Kotlin
Java面试题知识点
Java初级面试题
高考英语基础语法单句语法填空
Go语言基础语法--注释、基础结构2
Swift5.1——前言

一、表单标签form

1、作用：作为容器，用来收集和提交其他标签的数据（常用有input）

action属性:用来设置提交路径（接口）
method属性：设置提交方式（post/get）
注意：input标签是单标签，其中有type属性，其中input的功能与type有关

2、type属性

text：文本输入框
语法：<input type="text" name="" id="" value="" />
name值：用来说明当前输入框的内容，提交数据时以name：value的形式进行提交，name值会作为发送请求的参数名，value就是参数值
value：指的是文本输入框中输入的内容
placeholder：占位符，可以在输入框中显示提示信息
maxlength:限制输入框中的字符个数

3、密码输入框（密文输入框）

<input type="password" name="password" value=""/>
type值为：password
也可以通过placeholder来设置提示信息

4、单选框（radio）

type = radio
name值:如果希望做到单选按钮，则同一类信息需要将name值设为一样（即单选按钮只能选一个）
value属性:需要设置值，用来设置选中按钮后提交的对应值
checked属性：设置默认选中
注意：在单选框中都可以设置checked属性，但一般只设置默认选一个

5、复选按钮（CheckBox）

type = checkbox
name属性：如果是同一类数据，则name值也必须一样，
value属性:需要设置值，用来设置选中按钮后提交的对应值

6、input做普通按钮

type = button
value值：设置按钮上显示的文字

7、button标签做按钮

格式：<button type="button">普通按钮2</button>

8、提交按钮（submit）

type = submit
格式：<input type="submit" value="提交" />
作用：可以自动提交当前form表单中的所有设置了name属性的标签中的值

9、重置按钮（rset）

type = reset
格式：<input type="reset" value="重置" />
作用：可以将当前form表单中所有的标签的值设置为初始状态的值（一般放在form表单中使用）

10、禁用输入（disable）

disable属性：值为disable，则被禁用（输入框、按钮、选择框）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form action="" method="get">
            <label>用户名：</label><input type="text" name="username" id="username" value="" placeholder="请输入账号"  maxlength="6" /><br /><br />
            <label>密&emsp;码：</label><input type="password" name="password" id="pwd" value="" placeholder="请输入密码"  maxlength="6" /><br /><br />
            <input type="radio" name="sex" id="" value="男" checked="checked" /><label>男</label>
            <input type="radio" name="sex" id="" value="女" /><label>女</label>
            <br /><br />
            <input type="checkbox" name="hobby" id="" value="听音乐" checked="checked" /><label>听音乐</label>
            <input type="checkbox" name="hobby" id="" value="足球" /><label>足球</label>
            <input type="checkbox" name="hobby" id="" value="游戏" /><label>游戏</label>
            <input type="checkbox" name="hobby" id="" value="写程序" checked="checked" /><label>写程序</label>
            <br /><br />
            <input type="button" value="input普通按钮1" />
            <button type="button">button普通按钮2</button>
            <br /><br />
            <button type="button"><img src="img/aa.jpg" ></button><p>图片按钮</p>
            <br /><br />
            <input type="date" name="date" />
            <br /><br />
            <input type="datetime-local" name="date1" />
            <br /><br />
            <input type="email" name="email" />
            <br /><br />
            
            <input type="submit" value="提交" />
            <input type="reset"  value="重置" />
        </form>
    </body>
</html>

11、下拉菜单(select)

name属性：提交时用来区分不同的数据
option标签：用来提供选项的
option里面的value属性是用来在提交时提交具体数据
格式：<option value="">内容</option>
内容：显示的部分只能是文字
option的selected属性：用来设置默认被选中

12、分组下拉列表

optgroup标签：对下拉列表进行分组
label属性：用于显示分组名
<optgroup label="四川省">四川省</optgroup>
option标签：用于显示分组内容

13、多行文本域

textarea标签：设置多行文本区域
rows属性：设置一屏最多能显示多少行
cols属性：设置一行最多能显示多少列
row和col：间接控制文本区域的宽和高
placeholder属性：设置默认提示信息
maxlength属性：设置最大输入字符数

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <body>
       <form action="#" method="get">
           <!-- 普通下来列表 -->
           <select name="Provence">
               <option value="贵州">贵州</option>
               <option value="成都" selected="selected">成都</option>
               <option value="北京">北京</option>
               <option value="上海">上海</option>
               <option value="广州">广州</option>
           </select>
           <br /><br />
           
           <!-- 分组下拉菜单 -->
           <select name="address">
               <optgroup label="四川省">四川省</optgroup>
                   <option value="成都">成都</option>
                   <option value="德阳">德阳</option>
                   <option value="绵阳">绵阳</option>
                   <option value="自贡">自贡</option>
                   
               <optgroup label="河南省">河南省</optgroup>
                   <option value="成都">成都</option>
                   <option value="德阳">德阳</option>  
           </select>
           <br /><br />

           <!-- 多行文本域 -->
           <textarea name="message" rows="10" cols="30" placeholder="请输入自我描述......" maxlength="200"></textarea>
           
           <br /><br />
           <input type="submit" value="提交" />
       </form>
   </body>
</html>

14、div标签（无语义标签）

div和span标签：都是无语义的标签，一般用来对网页中的标签进行分组和分块的
注意：一个div占一行，而多个span可以在一行
作用： div可以看成一个盒子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="">
            fdfd
        </div>
        <span id="">
            你好
        </span>
        <span id="">
            fsa
        </span>
    </body>
</html>

二、css基础

1、css就是web标准中的表现标准，专门用来对网页标签进行布局和设置样式的一门语言目前一般使用css3

2、css语法

格式：选择器{属性：值1；属性2：值2.....}
选择器：用来选中需要设置样式的标签
{}：固定写法
属性：必须是css支持的属性，总共200多个
属性值：根据属性赋不同的值，注意：如果属性的值是用来表示大小的数字，后面必须加单位，例如px(像素)，em（多少个空格）
注意：颜色值有三种英文单词、十六进制值（#六位十六进制的值）、rgb有两种方式如（rgb（r, g, b）和rgba（r, g, b, alpha））rgb取值范围在0-255，a表示透明度，取值范围在0-1
注意：属性和属性值之间用冒号隔开，多个属性之间用分号隔开，属性顺序除特殊情况外其他都是任意的

3、怎么使用css

a、内联样式（行内样式）：就是写在标签的style属性中，只对一个标签有效
b、内部样式：将样式表写在head中的style标签中,只能设置当前HTML的样式
c、外部样式：将样式写在外部的css文件中，然在head中同个link标签来导入样式，可以被多可HTML文件导入使用

4、link标签

link标签：用来导入外部文件
rel属性：说明导入文件的功能，stylesheet（样式表）、icon（设置网页图标）
type属性：对导入的文件类型进行说明，文件类型/文件后缀
格式：type="text/css"
href属性：被导入的文件地址

5、三种样式表的优先级

a. 内联样式优先级最高
b. 内部样式和外部样式没有严格的优先级要求，主要是谁后写的会覆盖先写的，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>css基础</title>
        <!-- 内部样式 -->
            <style type="text/css">
                /* * {
                    margin: 0;
                    padding: 0;
                } */
                p {
                    color: mediumorchid;
                }
                h1{
                    color: brown;
                    font-size: 30px;
                    background-color: aliceblue;
                }

            </style>
            <link rel="stylesheet" type="text/css" href="css/style.css"/>
            <!-- 设置网页图标 -->
            <link rel="icon" type="image/jpg" href="img/aa.jpg" />
        </head>
        
    <body>
        <!-- 
         background-color:背景颜色
         color：颜色
         width:宽度
         height：高度
         -->
         <!-- 内联样式 -->
        <div id="" style="background-color: cornflowerblue; height: 200px;">
        </div>
        
        <h1>标题</h1>
        <p>fdjfkjdskhf</p>
        <p>fdkjfkehiuereo</p>
        <a href="https://www.baidu.com" target="_blank">百度一下</a>
        
    </body>
</html>

三、选择器类型

1、作用：选中需要添加样式的标签

2、常用选择器有：元素选择器、id选择器、class选择器、群组选择器、父类选择器

a. 元素选择器：将标签名作为选择器，选中所有指定的标签。
语法：标签名{属性：值}
b. id选择器：将标签中的id属性的值作为选择器，选中id值对应的标签。
语法：#id值{属性：值.......}
c. 类选择器：将标签中的class属性作为选择器，选中class值对应的标签
d. 群组选择器：多个选择器之间用逗号隔开作为一个选择器，同时选中所有选择器对应的标签。如: a, p{属性：值....} .p1, img{属性：值....} 等任意组合的选择器
e. 父子选择器：按顺序依次往后找，找到最后一层选择器对应的标签。如：div div p{属性：值.....} 选中div下面的div下面的p标签；#p2 a{属性：值.....} 选中id为p2下面的a标签
f. 通配符（*）
通配符:就是将*号作为选择器，选择当前所有的标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>选择器</title>
        <style type="text/css">
            /* 通配符选择器 */
            * {
                margin: 0;
                padding: 0;
            }
            /* 元素选择器 */
            p{
                color: #A52A2A;
            }
            /* id选择器 */
            /* 选中id为div1的所有标签 */
            #div1{
                background-color: antiquewhite;
                height: 100px;
            }
            
            /* 类选择器 */
            /* 选中class值是div2的所有标签 */
            .div2{
                background-color: #7FFFD4;
                height: 100px;
            }
            /* 群组选择器 */
            .p1, #div3{
                color: blueviolet;
                height: 50px;
                background-color: #F0F8FF;
            }
            
            /* 父子选择器（层级选择器） */
        </style>
    </head>
    <body>
        <p>元素选择器</p>
        <p>元素选择器</p>
        <p>上面都是元素选择器</p>
        <div id="div1">
            这是id选择器
        </div>
        <br />
        <div class="div2">
            这是类选择器
        </div>
        <p class="p1">群组选择器</p>
        <div id="div3">
            群组选择器
        </div>
    </body>
</html>

四、伪类选择器

1、作用是选中某个标签的不同状态，可以给不同状态设置不同的样式。

a. link语法：标签:link{属性：值....} 选中初始状态，如：a:link{}，#p1:link{}
注意：a标签的初始状态是指a标签中的网址一次都没有访问成功的时候的初始状态

b. visited{属性：值....} 访问后的状态

c. hover:鼠标悬停在标签上对应的颜色

e. active：标签被激活时候的状态(鼠标按住不放时的状态)

注意:使用伪类选择器时要有先后顺序（link-visited-hover-active）,未按顺序写会导致某些样式无效

五、选择器优先级

注意：权重值越大优先级越高

选择器	权重
元素选择器	0001（1）
类选择器	0010（2）
id选择器	0100（4）
伪类选择器	0001（1）
群组选择器	单独看每个选择器的权重
父子选择器	当前所有的选择器权重之和

注意：如果优先级一样（权重值一样），则后写的有效
注意：内联样式的优先级是最高的（任何情况下）

 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8" />
        <title>伪类选择器</title>
        
        <style type="text/css">
            /* 标签初始状态 */
            a:link{
                color: forestgreen;
                font-size: 20px;
            }
            /* 标签访问后的状态 */
            a:visited{
                color: red;
                font-size: 50px;
            }
            /* 鼠标悬停在标签上时的状态 */
            a:hover{
                color: yellow;
                font-size: 80px;
            }
            /* 鼠标按住不放时的状态 */
            a:active{
                color: black;
                font-size: 100px;
            }
            p{
                color: red;
            }
            #p1{
                color: green;
            }
            .p1{
                color: black;
            }
        </style>
        
    </head>
    <body>
        <div id="div1">
            <a href="https://www.taobao.com" target="_blank">淘宝</a>
        </div>
        <p id="p1" class="p1">第一段的空间划分到合肥科技活动</p>
        
    </body>
 </html>

2018-10-30day2-css语法基础
一、表单标签form 1、作用：作为容器，用来收集和提交其他标签的数据（常用有input） action属性:用来...
【Android】知识点汇总，坚持原创ing
Android基础 Java基础 Java基础——Java内存模型和垃圾回收机制语法基础语法基础——C语法基础...
java
语法基础1.1 java初体验（语法基础）1.2 变量和常量（语法基础）1.2 变量和常量（语法基础）1.4 流程...
软帝学院：80道java基础部分面试题（四）
Java基础部分基础部分的顺序：基本语法，类相关的语法，内部类的语法，继承相关的语法，异常的语法，线程的语法，集...
快速上⼿ Kotlin
快速上⼿ Kotlin 基础语法函数基础语法与 Java 代码互调 Java 与 Kotlin 交互的语法变化...
Java面试题知识点
1. Java基础部分基础部分的顺序：基本语法，类相关的语法，内部类的语法，继承相关的语法，异常的语法，线程的语...
Java初级面试题
1. Java基础部分基础部分的顺序：基本语法，类相关的语法，内部类的语法，继承相关的语法，异常的语法，线程的语...
高考英语基础语法单句语法填空
高考英语基础语法单句语法填空
Go语言基础语法--注释、基础结构2
章节 GO语言基础语法--注释、基础结构(重要) 1.GO语言基础语法---注释、基础结构基础结构注意事项源文...
Swift5.1——前言
主要是针对Swift5.1，基础语法，和内部剖析。基础语法基础语法流程控制函数枚举可选项为什么选择S...