javaweb-css

本文着重介绍CSS(在网上搜集的笔记是跟html在同一天讲完的,但是这样太草率,所以我把css单独列出来,毕竟是装修装饰的玩意,多了解一点,人靠衣装嘛)

CSS

1、css的简介

(1)什么是css?层叠样式表

* 样式表:有很多的属性和属性值,来设置内容样式

* 层叠:一层一层的,样式的优先级。

** 优先级:由上至下,就近原则

最终目的:把网页的内容和样式进行分离,利于代码的后期维护

* 想要使用css,不能单独使用,要和html结合使用

* css和html的如何结合使用。

2、css和html的结合方式

(1)css和html有四种结合方式

第一种:使用html标签里面的属性 style="css的代码"(不推荐,因为太乱)

* 代码 <div style="color:blue;">

第二种:使用html的标签

(这种用得比较多)

* <style type="text/css">

css的代码;

</style>

* 代码

<style type="text/css">

div {

color:black;

}

</style>

第三种:使用html标签实现  link,写在head里面

(外部样式表,用的也挺多)

* 首先创建css文件,在css文件里面写css代码

* 在html中使用link标签引入css文件

* 代码 <link rel="stylesheet" type="text/css" href="1.css"/>

第四种:使用html的style标签,在标签里面使用语句样式操作

(我用的很少)

* 首先创建css文件,在css文件里面写css代码

* 写style标签,在标签里面 @import url(css路径);

3、css的选择器

(1)css优先级

* 在一般情况下,优先级是后加载的优先级高

(2)格式规范:  属性名称1:属性值1;属性名称2:属性值2;

(具体的属性可以在帮助文档中查询)

(3)选择器:作用在哪个标签上(要对哪个标签里面的内容进行操作)

* css有三个基本选择

第一个:标签选择器

** 使用标签名称作为选择器

div {

}

第二个:class选择器

** 每个html标签上面都有一个属性class,通过设置class属性的值

** 代码

.haha {

background-color:red;

}

第三个:id选择器

** 每个html标签都有一个属性id,通过设置id的属性值

** 代码

#hehe {

background-color:green;

}

(4)选择器的优先级

* style(写在标签上的数据) > id选择器 > class选择器 > 标签选择器

4、css的扩展选择器

(1)关联选择器

* 设置嵌套标签的样式

** 代码

div p {

background-color:red;

}

(2)组合选择器

* 设置不同的标签具有相同的样式

* 代码

div,p {

background-color:green;

}

(3)伪元素选择器

* 比如超链接为例,

* 状态:原始状态、鼠标放上去的状态、点击状态、点击之后的状态

:link       :hover          :active      :visited

盒子模型:

定位属性 :position:a,绝对定位:从容器的左上角开始(它所在的容器中)

b,相对定位

Position:absolute 绝对定位

Left:横坐标

Top:纵坐标

单位:px(像素,如1366*768这个就是屏幕分辨率,单位也是像素)

相对定位:相对于自己原来的位置,relative

同时:在所有有标签初始排列顺序就成为顺序流

两种情况:控件脱离了顺序流

1,当把控件的位置设置为绝对定位

2,当把控件的float属性进行设置

Float:将两个div横线排列 left(脱离了顺序流)(如果用ID,两个ID区域内都要写)

注意:可能会被覆盖

Overfloat:当盒子中的内容超出范围该怎么办

Auto:浏览器自己解决(默认会出现下拉滚动条)

Visible:超出直接显示

Hidd:不显示

样式表示例:

创建一个html文件,把这个样式表放进去,可以对表格单元格生效

<style text="text/css">

td{

border-style:solid;

border-color:red;

border-width:thin;

font-size:100%;

width:45px;

height:45px;

}

table{

 text-align:center;

 border-collapse:collapse;

}

</style>

<script type="text/javascript">
时间: 2024-10-25 19:02:51

javaweb-css的相关文章

javaWeb css图文混排

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> #hunpai{ width:500px; height:400px; border:2px dashed orange; padding:5px;/* 内边界 */

javaWeb CSS 图像签名

<html> <head> <meta charset="utf-8" /> <title>CSS布局之图像签名</title> <style type="text/css"> #img12 { border: #FF00FF solid 2px; width: 500px; position: absolute; /*让文字不会脱离图片*/ top: 50px; } #text { color

[Java5新特性]加强For循环

替换迭代器 我们先来回忆一下Java中的迭代器的用法,可以使用迭代器的有List和Set集合.原因在于它们都实现了Collection接口,而Collection接口拥有一个叫做Iterable父接口.下面我们来看一个案例: public class Demo { @Test public void demo() { List<String> list = new ArrayList<String>(); list.add("hello"); list.add(

学习日记:关于javaweb filter中过滤了css文件的解决方法

这是搬运以前的笔记. 在用javaweb做项目时,遇到了filter把css文件等过滤了,导致HTML的布局失效,解决方法是再filter中进行判断,当遇到css文件,png,jpg图片等时,放行.代码如下 public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletReques

一口气从CSS讲到Servlet再到JSP、Struts2,清蒸JavaWeb的前前后后。

B/S系统就是Browser/Server,浏览器/服务器系统,即,客户在浏览器操作,而代码实现的具体处理以及数据库操作等,则由后台服务器来完成,男耕女织,相得甚欢.比如我们查询成绩,我们通过浏览器输入个人信息,并且把个人信息发送到后台,后台获取了你的信息后作一系列处理并从数据库中查出你的成绩,千回百转,最后把成绩返回到浏览器页面,展示在你的眼前,这就是典型的B/S系统. 而浏览器展示的静态页面,我们叫做HTML(超文本标签语言),其实所谓超文本,它归根结底是文本,就跟doc,txt一样,只不过

JavaWeb基础—CSS学习小结

重点记忆:四种结合方式 三种基本选择器 1.CSS:层叠样式表 相当于皮肤 提高了可维护性.样式与内容分离(注释格式/* */) 2.CSS与HTML结合的四种方式:内联式.嵌入式.外部式  1.每个标签上都有一个style[属性]来控制 sytle="key:value;key:value" <div style=""> 2.使用style标签:<style type="text/css">div{key:value}&

[JavaWeb基础] 028.CSS简介和基础语法

css 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 css 的优先顺序 浏览器缺省设置 外部样式表 内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部) css 的基础语法 代码结构 颜色的写法   p { color

javaweb基础学习—— css

1 导入方式:(优先级:离的越近,优先级越高.导入样式优先级最低) 内部样式,行内样式,外部样式,导入样式. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div,p,h1{ /*宽度*/ width:100px; /*高度*/ height:10

JavaWeb中基本的CSS的使用

动图CSS:页面美化和布局控制 一. 概念: Cascading Style Sheets 层叠样式表 * 层叠:多个样式可以作用在同一个html的元素上,同时生效 二. 好处: 1. 功能强大 2. 将内容展示和样式控制分离      * 降低耦合度.解耦      * 让分工协作更容易      * 提高开发效率 三. CSS的使用:CSS与html结合方式 1. 内联样式      * 在标签内使用style属性指定css代码      * 如:<div style="color:r

【JAVAWEB学习笔记】02_HTML&amp;CSS

//--------------纯文本版------------------------------------------------- 今日新增单词(更多属性查看手册) form:表单 (要提交的就要用这个括起来) action:行动(提交的路径) method:方法(提交的方式) get(链接有新内容) post(显示内容隐蔽一点) input:输入 type:类型 text:文本(文本输入项) password:密码 radio:单选按钮 name属性(分组) value 指定值(例如: