javaweb-css基础(一)

html表单

**action**表示要将接受的信息传往那个页面。 **method** 有get 和post两个方法。默认是get方法。 **name**为我们为他起的名称。

form之间放置输入框 按钮等
输入框常用 input方法

type中为设置的类型 有 text button submit等

label标签 点击该标签可以跳到对应位置

 <label for="in">你来啊!</label>
  <input type="text" id="in"/>

在点击你来啊时，可以跳到输入框。

css选择器

类选择器 class="ss"

在style中可以通过 .ss{ …} 的方式对ss元素处理

标签选择器
在style中可以通过 a{…} 的方式对a标签处理

id选择器 id="ss"
在style中可以通过 #ss{ …} 的方式对ss元素处理

通配符选择器
在style中可以通过 *{} 的方式对所有元素处理

各个选择器之间可以配合使用

css文本属性设置

front-family设置文本字体
front-size设置字号大小
line-height 行间距
front-weight设置文字粗细
front-style设置字体样式 normal italic斜体
front复合属性 front:style weight size/line-height family

.test{
            /*front符合属性*/
            front:italic 3px 4px "microsoft";
 }

clore文本颜色
text-align 文本对齐
text-decoration 文本装饰 none 无下划线 underline下划线
text-indent 文本缩进

CSS引入方式

行内样式表

<a href="#"  style="display:inline-block">内部样式表</a>

内部样式表

 .test{
            /*front符合属性*/
            front:italic 3px 4px "microsoft";
        }

外部样式表
新建一个css文件，将选择器放入其中
在html中链入 <link rel="stylesheet" href="xxxx.css">

Emment语法

选择器二

后代选择器(可以是子类或孙子后代)

    <style>
        ul li{
            text-align: center;
            font-size: 3px;
            color: pink;
        }
    </style>
<ul>
    <li>你好啊 </li>
    <li>你好啊 </li>
    <li>你好啊 </li>
    <li>你好啊 </li>
</ul>

子选择器(只能是子类)

    <style>
        ul>li{
            text-align: center;
            font-size: 3px;
            color: pink;
        }
    </style>
<ul>
    <li>你好啊 </li>
    <li>你好啊 </li>
    <li>你好啊 </li>
    <li>你好啊 </li>
</ul>

并集选择器

    <style>
        ul>li,.bar a{
            text-align: center;
            font-size: 3px;
            color: pink;
        }
    </style>
<ul>
    <li>你好啊 </li>
    <li>你好啊 </li>
    <li>你好啊 </li>
    <li>你好啊 </li>
</ul>

<div class="bar1">
    <a href="#"  style="display:inline-block">内部样式表</a>
    <a href="#">五彩导航栏</a>
    <a href="#">五彩导航栏</a>
    <a href="#">五彩导航栏</a>
    <a href="#">五彩导航栏</a>   
</div>

链接伪选择器（当光标在链接上方时）

   <style>
       a:hover{
            text-align: center;
            font-size: 3px;
            color: pink;
        }
    </style>
<div class="bar1">
    <a href="#"  style="display:inline-block">内部样式表</a>
    <a href="#">五彩导航栏</a>
    <a href="#">五彩导航栏</a>
    <a href="#">五彩导航栏</a>
    <a href="#">五彩导航栏</a>   
</div>

focus伪选择器(获取获得焦点的表单元素)

元素显示模式

块元素(一行只能一个)

行内元素(一行有多个，不能设置大小)

行内块元素（一行多个，可以设置大小）

显示模式的转换

display:inline-block/inline/block

背景