Java Web-CSS

• CSS

样式层叠表，定义如何显示HTML元素。

• CSS的使用方式

1. 行内样式

<div style="width:600px;height:600px;background-color:red">
</div>

2.内部样式，在 head 中定义 style 代码块

<style>
    div{
        width:600px;
        height:600px;
        background-color:red;
    }
</style>

3.外部样式，将代码单独放到一个 CSS 文件中，再将 CSS 引入到 HTML 中

<link rel="stylesheet" href="css/index.css"></link>

• CSS语法

选择器+声明（多条）
selector{
​ property:value;
​ property:value;
​ property:value;
}

• 选择器

1、标签选择器，直接通过标签进行选择

2、类选择器，通过 class 属性来进行选择

<tr>
    <td>用户名：</td>
    <td>
        <input class="test" type="text" name="username" placeholder="请输入内容"/>
    </td>
</tr>

.test{
	width:100px;
	height:30px;
	background-color:red;
}

3.ID选择器

<tr>
    <td>ID：</td>
    <td>
        <input id="idtest" type="text" name="id" placeholder="请输入内容"/>
    </td>
</tr>

#idtest{
	width:300px;
	height:30px;
	background-color:blue;
}

类选择器和 ID 选择器的区别:ID 是每个标签独有的，不能重复，class 是多个标签可以共用的。

• 并集选择器

<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4 class="test">Hello World</h4>
<h5 class="test">Hello World</h5>
<h6 id="idtest">Hello World</h6>

h1,h2,h3,#idtest,.test{
	color:red;
}

• 交集选择器

<h1 id="idtest">1</h1>
<h1>2</h1>
<h1>3</h1>

h1#idtest{
	color:red;
}

• 后代选择器

<div>
    <h1>1</h1>
</div>
<h1>2</h1>
<h1>3</h1>

div h1{
	color:red;
}

• 文本

font-size 设置字体大小 font-size:100px;
font-family 设置字体类型 font-family:隶书;
font-weight 设置字体加粗 font-weight:bold;
font-style 设置字体样式 font-style:italic;

• 边框

font-size 设置字体大小 font-size:100px;
font-family 设置字体类型 font-family:隶书;
font-weight 设置字体加粗 font-weight:bold;
font-style 设置字体样式 font-style:italic;

• 页面背景

background-color 背景色
background-image 设置背景图片
background-image:url(’…/images/1.png’);
background-repeat 设置图片重复方式
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-position 设置图片位置
background-position:-90px -130px;

• 位置

position
relative 相对定位
position:relative;
top:100px;
left:100px;

absolute 绝对定位
position:absolute;
top:100px;
left:100px;

fixed 相对浏览器固定位置
position:fixed;
top:100px;
left:100px;

overflow 设置显示内容
overflow:auto 设置滚动条
overflow:hidden 隐藏超出部分
overflow:visible 设置全部可见