Java 新手学习 CSS样式列表 排版 格式布局

1,样式表分为  内联样式表   内嵌样式表  外部样式表  三种。

内联样式表是直接写在标签里面的  比如 <p style=“”></p>  <div style=""></div>

内嵌样式表是必须写在head 标签里面的  比如

<style>

p{样式}

</style> 只针对body 里的p 标签 改变样式

也可以是

<style>

div{样式(样式可以自己设定)比如 width:200px; height:50px; border:1px solid red; top:10px; left:20px;  那么div层标签的效果会是宽200高50 边框线为1像素 实线 红色实线的框, 当然也可以添加更多的样式效果在里面}

</style>只针对body里的div标签 改变样式

这是用标签名做的 选择器  比如p层标签、div层标签

还有一种class选择器  都是“."开头的  比如

<head><style>

.(点后面随便起名字方便记住就行 但是不能单独用数字命名 可以字母加数字 但数字不可以在开头 列如 a1 但不能是 1a)

{样式}</style></head>

这种选择器在head标签里写完了 要在body里的层标签 里引用  比如

<body>

<div class="上面点后边起好的名字”></div>这样div层标签就会执行class的样式指令了

<p class=“”></p>这个p标签也会执行class的指令

</body>   class选择器可以重复使用  也就是说可以同时被多个标签引用

还有一种ID选择器  这个在head的标签里以#开头   比如

<head><style>

#(名字){样式}</style></head>

<body>

<div id="(名字)“></div>

</body> 这种选择器的应用方式跟class一样 但是class可以被重复使用 id不能重复使用  也就是说#ab 只能在body里出现一次   如果是不同名字的# 可以被多次使用

比如#aa  可以跟#bb 同时出现在body里面

选择器种类里还有三种符合选择器

1)用,逗号隔开  表示并列  比如

<head><style>

p,span,div{样式}

</style></head> 这样p标签span标签和div标签可以同时执行样式的指令

2)用空格隔开  表示后代  比如

<head><style>

div p{样式}

</style></head>只有div标签里的p标签执行此命令 比如

<body>

<div><p></p></div>

</body>这中情况下是执行 div p 样式指令的

3)(.)表示筛选  这种情况跟用空格功能基本一样

格式与布局

1)position:fixed  锁定位置是相对于浏览器的

2)position:absolute  是绝对位置   这个有两种情况

一种是外层没有position:absolute或者是relative的情况下,创建的div是相对于浏览器定位的

另一种是外层有position:absolute或者relative,那么div就会相对于外层的边框定位

3)position:relative 是相对于默认位置的定位 (绝对定位是在页面上面进行定位,相对定位是真实的在页面里面占有某一块区域,有上下左右值的时候只是进行

形状上的平移,真实占有的位置不变)

分层  z-index    在z轴方向分层,层数越高越不容易被盖住, z-index层数默认为1

float:left  right

overflow:hidden;  为超出部分隐藏   overflow:visible;显示

超链接的样式

<style>

a:link  每点击是原来的样子

a:visited  访问过的链接样式

a:hover  鼠标指向是的样式  也就是把鼠标放在上面显示的样式

opacity  透明度

时间: 2024-10-12 16:51:50

Java 新手学习 CSS样式列表 排版 格式布局的相关文章

css样式表,格式布局。

今天不写知识了,这两天一直在练习,回想一下学习的内容,首先,你建立一个盒子,你得想到把盒子放在哪个位置,这时候就需要确定一下距离上下左右边框的距离,用什么定位,用相对定位还是绝对定位,一般默认的是相对定位,绝对定位有点死脑筋,也可以这样理解.你输入边距加一个position:fixed;把这个盒子定死了. 对于多个盒子的理解有时候需要用到流式布局,不建立流式布局,建立的盒子会从第一个盒子开始往下走,不会直着顺序走,一般都会用到流式布局.我自己理解的,定义一个盒子的位置很简单其实,你只要不粗心写错

【3-24】css样式表分类、选择器、样式属性、格式布局

一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> <div style="text-decoration:line-through;">第四格第三元</div> (二)内嵌样式表:将代码写在标签<style type="text/css"></style>之间,此标签一

引用css样式的书写格式

css的书写格式一共有三种 行内样式:意思是在行内中写样式 例如说<p style="color:red">用行内样式编写我的颜色</p> 只适用于<body>(字体颜色和背景颜色)和<body>里面的标签,但不适用于<body>之外的例如:head,title,之类的标签 内嵌样式:使用style,把所有样式都卸载style里面. 例如说: <head> <style> p{ color:red; b

样式表与格式布局

样式表 内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style > p   //格式对p标签起作用 { 样式: } </style> 外部样式表 新建一个CSS文件,用来放置样式表.如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表→附加样式表.一般用link连接方式. 把编剧都设为0像素: 第一种,class引出: 第二种,id引出,独一无二的 第三种:class引出 第四种main 的子标签是p标签 1.外层没有positio

Bootstrap全局CSS样式之排版

Bootstrap能完全友好的支持html5的文本元素,这里不再赘述,具体可参考我另一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. .small--当前元素字体大小的 85%,常用作副标题时,也可用<small>来代替: .lead--让段落突出显示; .text-left..text-center..text-right--将文字于左.居中.于右对齐: .text-lowercase..text-uppercase..text

CSS样式-列表

CSS列表属性,允许你放置和改变列表项标志,或者将图像作为列表项标志. 1)list-style-type list-style-type属性用于修改列表项的标志类型.无序属性值有:disc,circle,square,none. <html> <head> <style type="text/css"> <!-- disc小实心圆,ciecle小空心圆,square小实心方块,none无 --> ul.disc {list-style-

Bootstrap--全局CSS样式之排版

Bootstrap的排版样式大致和html基本元素一样,没什么大的区别,就是对元素加了样式. (1)标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. 代码如下: Code <div class="container"> <h1>h1</h1> <h2>h2</h2> <h3>h3

Java新手学习路线,0基础学习Java怎样效率更高?

Java是老牌编程语言,拥有扎实的群众基础和广阔的市场应用,从业人员薪资也普遍较高.很多人想要加入到Java开发行列,不过0基础学习Java怎样效率更高? 很多0基础学习Java的同学想知道怎样学习效率更高?小编以为,学习Java需要一个系统的过程,而根据你未来的职位方向不同,学习也各有侧重.目前来说,Java就业方向包括Web开发.大数据开发.Android开发以及各种后端服务开发领域,但不论你选择哪一个,都要从最基础的知识点学习. Java基础知识点多且杂,初学者在开始的时候需要认识什么是J

前端学习 -- Css -- 有序列表和无序列表

列表就相当于去超市购物时的那个购物清单, 在HTML也可以创建列表,在网页中一共有三种列表: 1.无序列表 2.有序列表 3.定义列表 无序列表 - 使用ul标签来创建一个无序列表 - 使用li在ul中创建一个一个的列表项, 一个li就是一个列表项 通过type属性可以修改无序列表的项目符号 可选值: disc,默认值,实心的圆点 square,实心的方块 circle,空心的圆 注意:默认的项目符号我们一般都不使用!! 如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置 ul和li