java新建css,Javaweb学习之CSS（层叠样式表）

学习目的

了解什么是CSS(层叠样式表)

了解CSS的基础语法

掌握基础CSS的基础使用

掌握盒子模型

一、CSS

概念

CSS全称 Cascading Style Sheet，意为层叠样式表语言。CSS是用来修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面变得更加好看。CSS好比是化妆品，HTML是主体，CSS依赖HTML主体的存在来修饰。

特点

CSS的存在就是修饰HTML，新建的CSS文件还是xx.html文件。

1.1 CSS三种嵌套方式

分类

内联定义方式：在标签内部使用 标签的style属性 来设置元素的CSS样式；

样式块方式：在HTML的头部

标签中使用style块；

部样式表链入方式：

1.1.1 内联定义方式

概念

在标签内部使用 标签的style属性 来设置元素的CSS样式，这种方式称为内联定义方式。

特点

由于可以在每一个标签内部使用style属性来编写属于自己这个标签的样式，因此样式独立性较好，可以准确到每一个标签独有的样式。

语法格式

一个标签一个style属性，一个style可以有多个样式，每一个样式可以有一个值，采用 样式名：样式值 的方式表示一个完整的样式，多个样式之间需要使用 分号; 隔开。

标签>

示例

1.1.2 样式块方式

概念

在HTML的

头部中使用

示例

div {

样式名 : 样式值;

样式名 : 样式值;

.....

}

table {

样式名 : 样式值;

样式名 : 样式值;

.....

}

/* id选择器 */

#usernameErrorMsg {

color : red;

font-size : 12px;

}

/* 标签选择器 */

div {

background-color : black;

border : 1px solid red;

width : 100px;

height : 100px;

}

/*类选择器(class属性选择器)*/

.student {

border : 1px solid red;

width : 400px;

height : 30px;

}

对不起，用户名不能为空！

专科

本科

1.1.3 外部样式表链入方式

概念

将样式写到一个独立于HTML之外的xxx.css文件夹当中，在需要样式修饰的HTML网页的头部

标签上使用直接引入独立css文件，这种方式称为链入外部样式表文件(该方式在开发中最常用)。

语法格式

优点

易维护，类似于java面向接口编程，HTML主体的是接口，CSS样式是实现类，CSS随时可以修改维护，与主体无关；

维护成本较低。

示例

外部CSS样式文件：css文件夹的 1.css文件

a {

text-decoration : none;

}

/*

cursor : 鼠标样式，pointer是小手，hand也是，但是hand有浏览器兼容问题。建议使用pointer

*/

#baiduSpan {

text-decoration: underline;

cursor: pointer;

}

百度

点击我链接到百度哦！

1.2 样式定位

描述

HTML中用于对标签(通常是div或span)在整个HTML页面中的位置布局样式，可以在CSS样式中对标签进行样式修饰的同时，还可以在样式块中给标签进行定位。

分类

相对定位：

绝对定位：

示例

#div1{

background-color: red;

border: 1px black solid;

width: 300px;

height: 300px;

position : absolute; /*绝对定位*/

left: 100px;/*靠左100像素*/

top: 100px;/*距顶100像素*/

}

二、盒子模型